Click here to Skip to main content
16,020,568 members
Articles / Desktop Programming / XAML

Working with BusyIndicator of Telerik Silverlight RadControls

Rate me:
Please Sign up or sign in to vote.
4.92/5 (13 votes)
16 Feb 2011CPOL5 min read 71K   13   18
In this tutorial, we will discuss about BusyIndicator of Telerik RadControls Library. Follow the step-by-step tutorial to know how to use it.

This article appears in the Third Party Products and Tools section. Articles in this section are for the members only and must not be used to promote or advertise products in any way, shape or form. Please report any spam or advertising.

Introduction

Last week, I started exploring Telerik RadControls for Silverlight. On Day 1 of exploration, I just went through the basic overview of Telerik RadControls and installation steps.

In this post, we will explore the BusyIndicator that comes with RadControls. The basic code is similar to what comes with Silverlight by default. The difference which catches the eye is the circular progress bar.

Let's start exploring it and see what are the properties available there and how to start working with this control.

Setting Up the Project

If you don't have RadControls library installed on your PC, download the free trial version from Telerik site. The installation steps are mentioned in this post: Day 1: Working with Telerik Silverlight RadControls.

Once your development environment is setup, open your Visual Studio 2010 IDE and click on Create New Project. In the "New Project" dialog Window, select Silverlight from the left panel. This will filter out the Silverlight templates for you.

In the main panel, you will see a template called "RadControls Silverlight Application". Select this as the default template for your project, if you want to create a sample project.

image

In the next step click "Ok". This will ensure that you are creating a web project for hosting your Silverlight application.

The third screen (as shown below) will give you an option to include various libraries required for your application. Chose the appropriate library assembly that you want to use. The cool thing is that the dependency libraries will also get selected when you select any assembly from that.

image

This will create the sample project for you. Build and run the application to check for any error.

What's There in RadBusyIndicator

Before starting with the next part, you might want to know about the RadBusyIndicator control. Well, Busy indicator is a Silverlight control 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 retrieve some data from server.

The Rad BusyIndicator has four visual states, named as Hidden, Visible, Busy and Idle. It has some dependency properties called:

  • IsBusyIndicatorVisible - You can set whether the busy indicator will be visible or not
  • BusyContent - Gets or Sets the content of the Busy Indicator. This will generally come in the UI when busy loads
  • BusyContentTemplate - You can change the content template of the Busy indicator
  • DisplayAfter - Sets the time duration, after which the busy indicator will show in screen
  • IsBusy - Gets or Sets whether the control will go to busy mode
  • IsIndeterminate - Sets the indeterminate state of the busy indicator
  • OverlayStyle - Changes the style of the overlay element
  • ProgressBarStyle - Set this if you want to change the style of the Progress bar
  • ProgressBarValue - Gets or Sets the value of the Progress bar that starts while in busy mode

Have a look into the complete list of the members in RadBusyIndicator here:

image

Playing with the XAML

Once your project has been created and successfully built, add the Telerik namespace "Telerik.Windows.Controls" in your XAML page. See the below screenshot for more details:

image

This will look as below:

image

Now add the telerik RadBusyIndicator as the root control of the MainPage. Replace Grid tag with the same. Here is the same:

image

Now add whatever you want to insert inside it. The content that is present inside the BusyIndicator will become disabled once the indicator enters into busy mode.

For our example, I created the below XAML code:

XML
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    x:Class="RadControlsSilverlightApp1.MainPage" Width="600">
    <telerik:RadBusyIndicator x:Name="radBusyIndicator">
        <StackPanel Orientation="Vertical" Margin="50">
            <TextBlock Text="Working with the Telerik Rad BusyIndicator Control" 
                       FontSize="32" TextAlignment="Center" TextWrapping="Wrap" 
                       FontWeight="Bold" Foreground="Red">
                <TextBlock.Effect>
                    <DropShadowEffect/>
                </TextBlock.Effect>
            </TextBlock>
            <telerik:RadButton Content="Show Busy" HorizontalAlignment="Center"
                               Width="100" Margin="20"
                               Click="RadButton_Click"/>
        </StackPanel>
    </telerik:RadBusyIndicator>
</UserControl>

We will not create a stunning UI for this sample project. Hence, we are going with a TextBlock and a Button control. Once we click on the button, the rad busy indicator will enter into the busy mode.

Playing with Code

As the UI is ready, we need to write a sample code to test the BusyIndicator. To do this, add the click event of the Button and write the following code in the event implementation:

image

To start the busy indicator, just set IsBusy to true and set it to false, when you want to close it.

Let's run our sample application. You will see the following screen inside your browser window:

image

Click on the "Show Busy" button to load the busy indicator.

image

You will now see that the busy indicator loaded into the UI and disabled the visible area which was surrounded by the RadBusyIndicator control. The progress bar that loads into the UI has a circular progress control. Check it here:

image

The progress bar will move in circular direction while in busy mode.

image

Now, do you want to change the text? By default, it shows "Loading..." as the content. You can change it to some other strings also. Have a look:

image

To do it, just set the BusyContent property of the indicator control. That will do the trick for you. You can either set it in the XAML or set in the code behind before doing the call. Let's have a look at it here:

image

You might also ask, is it possible to put a cancel button there too? Yes, why not!!! You can set any number of controls there instead of just the simple text. So, how to do this?

image

To do it, edit the Busy Indicator's BusyContentTemplate and modify the template there. You can bind any data there too. Have a look into the following XAML code for more details:

image

End Note

Hope this information will help you when you work with the Silverlight BusyIndicator, mainly the control that comes with the Telerik RadControls library. Enjoy reading my other articles too. I will continue for sometime exploring the telerik rad controls from now and will try to post them for you, so that you will get some help from there while working with them.

Don't forget to vote for it and leave your feedback. Suggestions are always welcome.

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

 
QuestionHow to add a close button in the busy indicator? Pin
thanki.kaushik24-Feb-14 3:21
thanki.kaushik24-Feb-14 3:21 
QuestionBinding in BusyIndicator Pin
dhaval808720-Sep-12 5:06
dhaval808720-Sep-12 5:06 
GeneralMy vote of 5 Pin
raju melveetilpurayil21-Mar-11 16:36
professionalraju melveetilpurayil21-Mar-11 16:36 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»21-Mar-11 23:11
professionalKunal Chowdhury «IN»21-Mar-11 23:11 
GeneralMy vote of 5 Pin
Brij26-Feb-11 7:53
mentorBrij26-Feb-11 7:53 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»21-Mar-11 23:11
professionalKunal Chowdhury «IN»21-Mar-11 23:11 
GeneralMy vote of 5. Pin
mbcrump18-Feb-11 14:42
mentormbcrump18-Feb-11 14:42 
GeneralRe: My vote of 5. Pin
Kunal Chowdhury «IN»18-Feb-11 15:06
professionalKunal Chowdhury «IN»18-Feb-11 15:06 
GeneralMy vote of 5 Pin
RaviRanjanKr18-Feb-11 2:21
professionalRaviRanjanKr18-Feb-11 2:21 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»18-Feb-11 3:03
professionalKunal Chowdhury «IN»18-Feb-11 3:03 
GeneralMy vote of 5 Pin
Abhishek Sur17-Feb-11 8:11
professionalAbhishek Sur17-Feb-11 8:11 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»17-Feb-11 15:30
professionalKunal Chowdhury «IN»17-Feb-11 15:30 
GeneralMy vote of 5 Pin
Abhijit Jana17-Feb-11 7:42
professionalAbhijit Jana17-Feb-11 7:42 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»17-Feb-11 8:04
professionalKunal Chowdhury «IN»17-Feb-11 8:04 
GeneralVoted 5! Pin
Nish Nishant17-Feb-11 2:33
sitebuilderNish Nishant17-Feb-11 2:33 
GeneralRe: Voted 5! Pin
Kunal Chowdhury «IN»17-Feb-11 3:54
professionalKunal Chowdhury «IN»17-Feb-11 3:54 
GeneralMy vote of 5 Pin
Anil_Saran16-Feb-11 16:46
Anil_Saran16-Feb-11 16:46 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»17-Feb-11 3:53
professionalKunal Chowdhury «IN»17-Feb-11 3:53 

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.