Using the BusyIndicator Control
It's always a good idea to let the user know that the application is busy retrieving or submitting data. Usually, you can do this by providing an animation that runs while the communication is being completed. You can design your own animation or take advantage of the BusyIndicator control (a part of the Silverlight Toolkit), which provides a simple message and animation for you, as shown in Figure 6-10. This control (in source form) has already been included in your project by the Silverlight Business Application project template and is implemented in the user login and registration functions.
Figure 6-10. The BusyIndicator control
Displaying the BusyIndicator Control
The key property on the BusyIndicator control is the IsBusy property. Setting this to True will show the animation, and setting it to False will hide the animation. If you decide to take the XAML-based approach to consuming the data and use the DomainDataSource control in your view, you can simply bind the IsBusy property of the BusyIndicator control to the IsBusy property of the DomainDataSource control, which will be set to True when the DomainDataSource control is waiting for the server request to complete, using ElementName binding. When the property value is changed on the source control, the bound property's value will be changed accordingly. Here we want the IsBusy property of the BusyIndicator control to have the same value as the IsBusy property of the DomainDataSource control, so we bind the two control properties using the following binding syntax:
If you are taking an MVVM-based approach instead, you can create an IsBusy property on your view model class, and set it to true when you initiate the server request, and set it back to false in the LoadOperation's Completed event. You can then bind the IsBusy property of the BusyIndicator control to this IsBusy property on your view model class.
Note You can determine whether the DomainDataSource control is loading data or submitting changes by its IsLoadingData and IsSubmittingChanges properties, which you can use to alter the message displayed in the BusyIndicator control accordingly.
Customizing the BusyIndicator Control's Content
By default, the text reads “Please wait . . .” but you can change that to something more meaningful by assigning the text you want displayed to the BusyContent property, like so:
<controlsToolkit:BusyIndicator BusyContent="Retrieving products..." />
The BusyContent property is actually a content property, and can accept any control as its value, using the content element syntax, as discussed in Chapter 2. Therefore, this provides you with a simple means to customize the layout of the BusyIndicator control to your liking. For example, you might wish to add a button to cancel the communication, or add your own animation.
However, one thing may get in the way of you laying out the contents of the BusyIndicator control completely the way you want it: the animated bar. The animated bar is not affected by setting the content of the BusyContent property, and remains where it is. This bar is actually just a progress bar, and its style is exposed to you by the ProgressBarStyle property on the control. This means you can assign a style to modify its properties, including its Visibility property. Therefore, you can set its value to Collapsed and hide it completely if you so wish, as follows:
<controlsToolkit:BusyIndicator.ProgressBarStyle>
<Style TargetType="ProgressBar">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</controlsToolkit:BusyIndicator.ProgressBarStyle>
Note Rather than just modifying the content of the BusyIndicator control, you can completely change its look, including changing the gray gradient background, by assigning it a new control template. Control templates are covered in Chapter 9.
Modal Behavior
In addition to displaying an animation to let the user know something is happening, the BusyIndicator control can also be used to automatically disable an area of your user interface while the server communication is taking place. The BusyIndicator control inherits from ContentControl and, therefore, has a Content property that can contain other controls in the same way as the Grid or the Canvas controls can. These content controls and any other controls within the area consumed by the control will be disabled when the IsBusy property is set to True. It disables the controls by overlaying a semitransparent Rectangle control over its area so that they cannot be clicked. Note that if used in a Grid, the BusyIndicator control actually fills the area of its cell, and just shows the indicator in the middle. Hence, the overlay will fill the entire grid cell, overlaying any other controls within that same cell. You can modify the properties of this Rectangle control via the OverlayStyle property on the BusyIndicator control.
Note Disabling user interface controls is not so important when retrieving data for summary lists, but it can be useful when you have a data entry form to stop the user from attempting to resubmit or alter the changes they've made while communicating with the server.
The DisplayAfter Property
To stop the BusyIndicator control from flashing on and off when a very short server call is made, or when multiple server calls are made in succession, you can control how long the control should be in the busy state before actually displaying the indicator to the user with the DisplayAfter property. By default it's set to 0.1 seconds, but you can change this, as required.