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.
You need to login to Download the Progress Bar example, If you do not have a login you can register for free!
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:
- 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...