Busy-indicator in Silverlight .net 4

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.

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:

<navigation:Page

           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

           xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="HelloWorld.BusyIndicator"

           mc:Ignorable="d"

           d:DesignWidth="640" d:DesignHeight="480"

           Title="BusyIndicator Page">

    <Grid x:Name="LayoutRoot">

        <toolkit:BusyIndicator Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" Name="BusyIndicator1" IsBusy="False">

            <StackPanel>

                <TextBlock Text="The silverlight application is loading" x:Name="txt1" TextAlignment="Center" Foreground="Red" TextWrapping="Wrap" FontSize="50"/>

                <Button Content="Click Here" x:Name="btn1" Width="100" Height="25" Click="btn1_Click"/>

            </StackPanel>

        </toolkit:BusyIndicator>

    </Grid>

</navigation:Page>

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:

  private void btn1_Click(object sender, RoutedEventArgs e)

        {

            BusyIndicator1.IsBusy = true;

            ThreadPool.QueueUserWorkItem((state) => {

                Thread.Sleep(3 * 1000);

                Dispatcher.BeginInvoke(() => BusyIndicator1.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.

After 3 seconds of interval it will come back to it’s original state the the progress dialog will be hidden automatically.

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: