Sunday, May 9, 2010

How to work with the Silverlight BusyIndicator?


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 wants 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 calling your WCF Service to store something in server or retrieving some data from server.


Let us go a bit 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:

<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:

<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. Lets try from code:

/// <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 it’s original state the the progress dialog will be hidden automatically.

image

So, what next? 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:

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

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

Free Email Newsletter:
Get article updates by Email (We will not share) | Subscribe to RSS Feed
* Click confirmation link sent in email * If you didn't see the email in Inbox, check spam folder.

Submit Feedback or Queries

Encourage the Author by providing feedback about the post. If you have any queries on the same topic, don't hesitate to ask your questions here. I will try to answer you at the earliest.





Post your feedback or queries

Reply

chirag said...

nice work.
Chirag


Reply

Kunal Chowdhury said...

Thanks Chirag for your feedback.
Regards,
Kunal


Reply

raghavendra said...

Good Post Kunal,

Did u post any articles on Custom control I have a hard time with it

Thanks


Reply

Kunal Chowdhury said...

Thanks Raghavendra.
Till now I don't have any articles on Custom Control, but you will see one in my coming articles/tutorial. Till then keep learning.

Regards,
Kunal


Reply

(¯`·._.·NIVAS·._.·´¯) said...

Hi Kunal,

Explained good. Thanks.

Nivas D.



Reply

Lyynx said...

What's a good way of handling asynchronous usage of a busy indicator. If two asynchronous calls set the indicator to busy then the first one to finish will set it to false when there is still an event busy. The last one to finish should be the one to do that.


Reply

Kunal Chowdhury said...

Hi Lyynx,
Hmm... In that case, you have to use some pointers to a local variable and then on the last call set it to false. This is one of the solution I can think of now. If I get any good one, I will get back to you. BTW, it's a good query. Thanks.
Regards,
Kunal


Reply

Anonymous said...

How to change the style of this control?


Reply

Anonymous said...

hi,

i have two silverlight user control pages(oob application - both pages are content pages of mainpage), first one with a button which loads the second with some data.
for loading the data it will take more than 3mins.While loading data i want to display loading message. i tried with busy indicator. but it is working with only one page. Is it possible to use busy indicator in this case?

thanks
sandhya


Reply

Kunal Chowdhury said...

Hi Sandhya,

I think BusyIndicator should help you. Please use http://silverlight.net/forums for more specific answer to your query.


Reply

Devc7 said...

Hi,

This looks good.
Is there any way i can get it working within loading or any operation of a domainContext?


Reply

divya said...

how to use in wcf service..iam doin in mvvm so code behind...can u help me


Reply

Anonymous said...

hi kunal if we want to add a cancel button on busy indicator, that is easy but button is displayed before the progress-bar, i want this button after progress-bar...can u help me???


Reply

Kunal Chowdhury said...

Try to customize the Template of the Progress Bar and there you can place the Cancel button.


Reply

Anonymous said...

Kunal,

thanks for help.but in my application busy indicator is not working i am calling wcf service
on save button i am setting isbusy = true and on complete of wcf service i am calling isbusy=false..but it is not working..can you tell me simple solution if you have?

here is my code
save button event
busyindicator.IsBusy=true;
bindservice.BinddataClient obj = new bindservice.BinddataClient();
obj.add_update_projectCompleted += new EventHandler(obj_add_update_projectCompleted);

obj.add_update_projectAsync(prj);

}

void obj_add_update_projectCompleted(object sender, bindservice.add_update_projectCompletedEventArgs e)
{
busyindicator.IsBusy=false;
}


Reply

Foram said...

Please let me know how to work busy indicator with aysnchorous call i want to implement it but it seems not working.

Please help

Thanks
Foram


Reply

Kunal Chowdhury said...

That is the right approach to work with BusyIndicator. Please check that you are not explicitly marking the visibility of the BusyIndicator to collapsed mode.


 
Copyright © Kunal's Blog by Kunal Chowdhury. All Rights Reserved.