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>

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...";

Read more: Kunal's Blog

Posted via email from Jasper-net