/default.aspx
Silverlight .NET CMS and Controls
Home
/controls.aspx
Silverlight Controls
Controls
Progress Bar

Silverlight Progress Bar

This Silverlight only Progress Bar with overlaying label is, easy to implement on your Silverlight website and also customizable to provide a visual feel suitable for any website design.

How to Use the Progress Bar Control

In your XAML ensure you have a reference to the Liquid.dll in the UserControl tag at the top, to use the Progress Bar on your Silverlight page:

<UserControl x:Class="ProgressBar.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
     <Canvas>
          <Canvas.Triggers>
               <EventTrigger RoutedEvent="Canvas.Loaded">
                    <BeginStoryboard>
                         <Storyboard x:Name="timer">
                              <DoubleAnimation x:Name="animation" BeginTime="00:00:00" Duration="00:00:0.02" Storyboard.TargetName="InvisibleRect" Storyboard.TargetProperty="Width" />
                         </Storyboard>
                    </BeginStoryboard>
               </EventTrigger>
          </Canvas.Triggers>

          <Rectangle Visibility="Visible" x:Name="InvisibleRect" Width="1" Height="1" />

          <liquid:ProgressBar x:Name="progress" Canvas.Top="0" Canvas.Left="0" Width="128" Height="16" Text="Uploading"/>
     </Canvas>
</UserControl>

 

In your C# code behind file you can refer to the Progress Bar using progress. The Silverlight Progress Bar has a Complete property which controls how much the bar is filled.

In this example we use a Timer to increment the progress on every tick, this method of using a StoryBoard is necessary as Silverlight as yet has no build in support for timers.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ProgressBar
{
     public partial class Page : UserControl
     {
          public Page()
          {
               InitializeComponent();
               timer.Completed += new EventHandler(Tick);
          }

          private void Tick(object sender, EventArgs e)
          {
               progress.Complete++;
               if (progress.Complete >= 100)
               {
                    progress.Complete = 0;
               }
               // restart the timer
               timer.Begin();
          }
     }
}

 

Example Silverlight Progress Bar Control:

Silverlight Progress Bar Control
  • Written in Client-Side C# .NET 3.5
  • Microsoft Silverlight Only
  • Customizable Visual Feel

Your Comments and Questions Answered

 You are not logged in. You need to login to post new messages, if you do not have a login you can register for free!

Edu_storm Aug, 01 2008 - 14:14

Could I use Progress Bar to load a Video? thanks!!

 

andreyk44 Jun, 26 2008 - 00:22

Yes. I use SV 2 beta 2 and i need to bind property 'Complete' to some property in data context..
Unfortunately i have to use data-binding, so i cannot follow the example literally.
Anyway thank you for your response. I'll try to invent some workaround.

 

dan Jun, 25 2008 - 13:30

Hello,

What version of Silverlight are you using? These controls are for Silverlight 2 BETA 2 only. Also the progress bar does not support data-binding, you should follow the example given above and see if that works. Thanks for your question!

 

andreyk44 Jun, 25 2008 - 09:41

I try to use Progress Bar Control 4.6.
I get error "AG_E_PARSER_BAD_PROPERTY_VALUE [Line: xxx Position: xxx]" when i try to bind it to some datasource:


It seem like property 'Complete' is not dependency property ... ?
Please advise...

 
This page is 25.32KB and was generated by the SilverPages CMS in 0.125 seconds. Total impressions: 917.