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.
To use the Progress Bar control you will need to add a reference to Liquid.dll in your project.
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:ProgressBarPlus 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!