Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / XAML

How To Work With Silverlight BusyIndicator?

Rate me:
Please Sign up or sign in to vote.
4.78/5 (11 votes)
9 May 2010CPOL3 min read 127.6K   3.5K   24   20
Silverlight BusyIndicator is not a new thing in Silverlight. It was first added in Silverlight 3 Toolkit in November 2009 release (if I am not wrong). In this post, I will describe about this for those who want to know about it.

Introduction

Silverlight BusyIndicator is not a new thing in Silverlight. It was first added in Silverlight 3 Toolkit in November 2009 release (if I am not wrong). In this post, I will describe about this for those who want to know about it.

So, what is this Busy Indicator? Busy indicator is a tool which you can add in your Silverlight application to show a loading indication to your user while saving some sort of operation in database. Generally it is useful when you are calling your WCF Service to store something in server or retrieving some data from server.

Background

Earlier to BusyIndicator, you have to create a UserControl with some sort of animations and then you have to call the animation while loading the UserControl and setting it in the top layer of your application. But using this control available in the toolkit, it is very easy to develop.

Using the Code

Let us go a bit in-depth to add it in our Silverlight application. First of all, we will create a new Silverlight application with some content inside it. In my example, I am using a Text & a Button inside a StackPanel. The XAML will look like this:

XML
<StackPanel>
<TextBlock Text="Silverlight Toolkit Busy Indicator Demo" FontSize="36" 
FontWeight="Bold" Foreground="Red" TextWrapping="Wrap" 
TextAlignment="Center"/>
<Button x:Name="btnClick" Content="Click Here" Width="100" Height="25" 
Click="btnClick_Click"/>
</StackPanel>

image

Now we want to do some operation on click of the button present there and want to notify the user that something is going on, so please wait. For doing this, we have to use the BusyIndicator tool available in Silverlight Toolkit. You can download it from CodePlex. Now we will wrap our StackPanel with the BusyIndicator tool. The significance behind this is to make the content disabled while showing the busy indicator. Let's see the XAML:

XML
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:BusyIndicator HorizontalAlignment="Center" VerticalAlignment="Center" 
Name="busyIndicator" IsBusy="False">
<StackPanel>
<TextBlock Text="Silverlight Toolkit Busy Indicator Demo" FontSize="36" 
FontWeight="Bold" Foreground="Red" TextWrapping="Wrap" 
TextAlignment="Center"/>
<Button x:Name="btnClick" Content="Click Here" Width="100" Height="25" 
Click="btnClick_Click"/>
</StackPanel>
</toolkit:BusyIndicator>
</Grid>

On button click, we will set the IsBusy property of the Indicator to “True” first. This will ensure that while the busyindicator is in busy mode, the content inside it will be disabled. After completion of the operation, we will again set the IsBusy property to “False”. This will automatically make the inner content to enabled mode. Let's try from code:

C#
/// <summary>
/// Handles the Click event of the btnClick control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance 
/// containing the event data.</param>
private void btnClick_Click(object sender, RoutedEventArgs e)
{
busyIndicator.IsBusy = true;
//busyIndicator.BusyContent = "Fetching Data...";

ThreadPool.QueueUserWorkItem((state) =>
{
Thread.Sleep(3 * 1000);
Dispatcher.BeginInvoke(() => busyIndicator.IsBusy = false);
});
}

Here on button click, first of all I am setting the busyIndicator.IsBusy to true and setting a delay of 3 seconds to show the indicator for demonstration. During this time, the progress bar will be visible to the screen and the whole content will be disabled.

image

After 3 seconds of interval, it will come back to its original state. The progress dialog will be hidden automatically.

image

Points of Interest

When you are calling WCF service to get/set some data in the server, just set the busyindicator to busy mode and while in the completed event, set the busy mode to false. Thus you can tell your user that something is going on, so that he can wait for further steps. Not only this, you can set the message in the busy indicator by writing the following code:

C#
busyIndicator.BusyContent = "Fetching Data...";

End Note

If you have any queries or feedback, don't forget to write about that. I will be really very pleased to answer your queries as soon as possible.

History

  • 9th May, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
QuestionWhat if i have row difintions and column difinitions in the Grid ? Pin
MK87_200829-May-13 4:23
MK87_200829-May-13 4:23 
AnswerRe: What if i have row difintions and column difinitions in the Grid ? Pin
Kunal Chowdhury «IN»29-May-13 4:58
professionalKunal Chowdhury «IN»29-May-13 4:58 
Questionbusyindicator with out using thread.sleep() Pin
vikasproject27-Feb-13 0:06
vikasproject27-Feb-13 0:06 
AnswerRe: busyindicator with out using thread.sleep() Pin
Kunal Chowdhury «IN»27-Feb-13 5:09
professionalKunal Chowdhury «IN»27-Feb-13 5:09 
QuestionRegarding position of busy indicator Pin
jiggy_vivek10-Sep-12 0:03
jiggy_vivek10-Sep-12 0:03 
AnswerRe: Regarding position of busy indicator Pin
Nandita1410-Jul-14 19:35
Nandita1410-Jul-14 19:35 
QuestionBusyIndicator and RIA Services in Silverlight Pin
MadridJos17-Jul-11 1:22
MadridJos17-Jul-11 1:22 
AnswerRe: BusyIndicator and RIA Services in Silverlight Pin
Kunal Chowdhury «IN»17-Jul-11 1:26
professionalKunal Chowdhury «IN»17-Jul-11 1:26 
GeneralRe: BusyIndicator and RIA Services in Silverlight Pin
Hunsoul20-May-12 8:30
Hunsoul20-May-12 8:30 
AnswerRe: BusyIndicator and RIA Services in Silverlight Pin
Kunal Chowdhury «IN»2-Jun-12 7:19
professionalKunal Chowdhury «IN»2-Jun-12 7:19 
General[My vote of 1] You copied all from CodePlex Pin
viktor_khazanov22-Feb-11 20:35
viktor_khazanov22-Feb-11 20:35 
GeneralMy vote of 1 Pin
TigerNinja_5-Jan-11 4:42
TigerNinja_5-Jan-11 4:42 
QuestionHow To Work With Silverlight BusyIndicator? Pin
Kumar Reddi27-Dec-10 13:31
Kumar Reddi27-Dec-10 13:31 
GeneralDisplaying accross all Grid.RowDefinitions Pin
NeCroFire13-Dec-10 22:15
NeCroFire13-Dec-10 22:15 
Hi
I'm using the BusyIndicator, but it will only fadeout the first rowdefinition from a grid. So now the user is able to click the button in the second row multiple times as the BusyIndicator is not fading across it. I did not specify to which row the Indicator should belong as I figure it should by default work over the entire grid.

I hope this makes sens?
Thanks
AnswerRe: Displaying accross all Grid.RowDefinitions Pin
Kunal Chowdhury «IN»14-Feb-11 1:05
professionalKunal Chowdhury «IN»14-Feb-11 1:05 
Generalvery useful Pin
jadughar9-Nov-10 4:20
jadughar9-Nov-10 4:20 
GeneralRe: very useful Pin
Kunal Chowdhury «IN»9-Nov-10 4:25
professionalKunal Chowdhury «IN»9-Nov-10 4:25 
GeneralMy vote of 1 Pin
Colin Grealy27-May-10 12:47
Colin Grealy27-May-10 12:47 
GeneralGod job man Pin
Abhijit Jana9-May-10 8:13
professionalAbhijit Jana9-May-10 8:13 
GeneralRe: God job man Pin
Kunal Chowdhury «IN»9-May-10 17:13
professionalKunal Chowdhury «IN»9-May-10 17:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.