Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you have a long-running process that impacts the user experience, you should display some type of busy notification. Silverlight includes the BusyIndicator control for these scenarios. For this demonstration, I will use Visual Studio and a project called UsingBusyIndicator. I will start by looking inside the DefaultSettingsPage. The idea behind this interface is the user clicks on this Upload Photos to your journal. I will send the photos to the server and while the photos are uploading, I will show a busy indicator. I am going to drag a busy indicator into the bottom half of the screen.
I will go to my Toolbox, go to the All Silverlight Controls section and find the BusyIndicator. I will drag it to my designer surface and make it a little bit taller and a lot wider. It doesn't look like much now. It won't show up until I set the IsBusy property equal to true. I'll double-click on the Upload Photos button and I will write a little bit of code here. What this code does is check the current value of IsBusy and set it to the opposite.
So I will run the application, press F5, click on the button and there is my BusyIndicator. You will run indefinitely until I click on the button the second time. Naturally, you can customize the content that you showed to the users. I will show you how to do that. You can do it in your XAML. I am going to show you how to do it in your code. The BusyIndicator contains content. You might remember that content is any valid Silverlight UI. I am going to use a simple string for my example, but this could be any custom elements that you would like. And then I will also set another message called the BusyContent.
Again, this is any content you want, I will choose a string. Okay, let's try this again. Press F5 to run the app, click on the Upload Photos, and there are my two custom messages. As I mentioned, you can do custom content, so if you click on the second tab, you can see an example of a BusyIndicator with custom content. It has a Pause button, a Cancel button and a progress bar. Let's look at the XAML for this. I'll open this CustomContentPage, I scroll down to my BusyIndicator and look at this section called the DataTemplate.
Here is where I defined my alternate UI for this control. You can see that it is just normal XAML. There is a StackPanel, with a TextBlock and a progress bar and some buttons. For the next example, I am going to show you how to spawn a worker thread to do some work and then toggle on and off the BusyIndicator's IsBusy property. To do that, I'm going to look at the InteractivePage. This is a sample from the Microsoft MSDN Library. There are two user controls over here for the user to enter number values; the Number of seconds to be busy. and the Number of milliseconds to delay.
These are ComboBoxes called delayMilliseconds, there one is called BusySeconds. When I double click on this button, it takes me to the code behind. These first two lines of code are gathering that user information from the user from those combo boxes. For example, here is the DelayMilliseconds. I am then going to go to the BusyIndicator and set its DisplayAfter property to a TimeSpan derived from that value from our users. How long to wait before we display a control? Now to simulate a long-running task on a worker thread, I am going to use the ThreadPool class.
The ThreadPool class has a QueueUserWorkItem method that is used to ask for work to be done on the second thread, on a worker thread. Typically, what you do here is you define a method to do the work and then you queue it up. For my example, I am using a lambda expression or way of doing in-line code. These two lines of code are sleeping the thread for the number of busy seconds times 1000 and then it's doing a BeginInvoke, go back to the UI thread and it's setting the DataContext to False.
Notice how I set it to True here and set it to False here, DataContext is used by the data binding agent which you will learn more about in another chapter. Let's look at how I am using this on my XAML. Here is my BusyIndicator. So the IsBusy property on the BusyIndicator is bound to the data context. And what I am storing in the DataContext? I am staring either True or False. So before I run the long-running task, I set the DataContext to True which sets IsBusy to true and when this worker thread is done, it sets it back to False which then turns off the BusyIndicator.
Now you have seen how to show a customized wait interface when your application is doing background work.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101478 Viewers
61 Video lessons · 88242 Viewers
71 Video lessons · 72114 Viewers
56 Video lessons · 103875 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.