How To Work With 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 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:

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:

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:

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.

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

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:

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.

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 Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

i am using busy indicator..but i do't want to use thread.sleep(time)..
because i am enable to calculate how much time it will take to some calculation..
so is there any alternate to use busyindicator...

I think you misunderstood the use of Thread.Sleep() in the sample project and in the article. It was just to let you know about the work of busy indicator. In real world scenario, you will NOT need to give a call to that method. Let me know, if it is still unclear to you.

Hi,
I have 2 questions.
1)I have very big xaml page in my silverlight application and as Busyindicator is coming in middle of the page, I'm unable to see it.I want it on top of the page(atleast some where in the first page).Can we do it.
2)My xaml page will fetch data and show dynamically and depending on data it's taking time.How can I determine when shall I make the busyIndicator.IsBusy to false.

As you Know, every query you launch you are always getting Nothing. This is due to asyncronous mecanism of Silverlight Bussiness Appplication.
Is there any way of knowing when a query is completed by using BusyIndicators ?

You can do it very easily in the AsyncCompleted event. Call the BusyIndicator just before calling the Async() method and set it to false once your service calls returns to the completed event. Let me know, if you need further help on this.

Hi Kunal,
I think this simple solution isn't good enough because as the nature of async calls you may call more than one request before you get any Completed call, so the first Completed call will hide the progress even there is other calls still running in the background... so I think you've to use some kind of thread safe counter here...
What's you opininon?
Cheers and keep up your good work!

Thanks for the feedback. This is just the introduction that a poor novice should learn before implementing the complex code. Once the beginner knows what he wants to do and how to achieve this, the dev can easily implement those complex stuffs.

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.

This is a Thread to make the UI busy. During this time, the thread will go for a sleep mode. Once the thread wakes from it's sleep mode, the Dispatcher will call the BeginInvoke() to set the UI property.

Generally, this code is not require for general case. This is just to demonstrate the demo application. In real scenario, it will be your WCF service call. Once your service comes to completed event, you will set the said property.