{"id":1110,"date":"2011-03-27T16:00:36","date_gmt":"2011-03-27T15:00:36","guid":{"rendered":"http:\/\/www.minddriven.de\/?p=1110"},"modified":"2011-03-26T17:52:55","modified_gmt":"2011-03-26T16:52:55","slug":"wp7-xaml-viewmodel-busy-indicator","status":"publish","type":"post","link":"https:\/\/www.minddriven.de\/index.php\/technology\/dot-net\/windows-phone\/wp7-xaml-viewmodel-busy-indicator","title":{"rendered":"WP7 #4: A XAML\/VM-driven Busy Indicator"},"content":{"rendered":"

This blog post introduces a Busy Indicator control<\/strong> for Windows Phone 7, which can be driven\/defined by XAML and allows binding of the busy state via a ViewModel property. This control can be defined around arbitrary page elements and handles the visibility of the application bar, as well.<\/p>\n

Introduction<\/h3>\n

Indicating the busy state is a common task of applications, that perform many actions asynchronously, while remaining responsive, like Silverlight and Windows Phone applications. It’s up to the developer to show the busy state in dependency of an operation and to disable parts of a page, which should not be selectable\/changeable in the meantime. For Windows Phone 7<\/strong> there are some solutions, but I was surprised that I couldn’t find a satisfying one for me. Either the level of control was inadequate (for example giving users the possibility to change\/select controls) or the busy indicator was set\/initialized directly from code (code behind\/ViewModel), which is more kind of an anti-pattern for me. Thus I decided to look at my favorite busy indicator control for (web-target) Silverlight and to port it to Windows Phone 7.<\/p>\n

\n
\"BusIndicator
Not Busy<\/figcaption><\/figure>\n<\/div>\n
\n
\"BusyIndicator
Busy State on Whole Page<\/figcaption><\/figure>\n<\/div>\n
\n
\"BusyIndicator
Partial Busy State<\/figcaption><\/figure>\n<\/div>\n

Structure and usage<\/h3>\n

My implementation of the busy indicator consists of 2 components: the BusyIndicatorControl<\/strong> as core part and the BusyIndicatorStyle<\/strong> in the Styles.xaml<\/code> for the layout. The implementation uses the PerformanceProgressBar<\/code> from the Silverlight for Windows Phone Toolkit (Feb2011 or newer), so make sure you’ve installed it.<\/p>\n

The usage of the BusyIndicatorControl<\/code> is fairly simple. In your XAML just place the control around those controls, which you want to set to „busy“. Bind the IsBusy<\/code> property to your ViewModel\/code behind property, set the BusyText<\/code> and that’s it! Optionally, with HideApplicationBar<\/code> you can indicate if you want to show or hide the application bar, when IsBusy==true<\/code>.<\/p>\n

Here’s an example, showing the usage of the control in a simple scenario:<\/p>\n

<phone:PhoneApplicationPage\r\n    x:Class=\"BusyIndicatorControl.MainPage\"\r\n    xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\r\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\r\n    xmlns:phone=\"clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone\"\r\n    xmlns:controls=\"clr-namespace:BusyIndicatorControl.Controls\">\r\n\r\n    <controls:BusyIndicatorControl x:Name=\"busyIndicator\" Style=\"{StaticResource BusyIndicatorStyle}\"\r\n                                   BusyText=\"Doing something...\"\r\n\t\t\t           IsBusy=\"{Binding IsDoingSomething}\"\r\n                                   HideApplicationBar=\"True\">\r\n\r\n        <Grid x:Name=\"LayoutRoot\" Background=\"Transparent\">\r\n            <Grid.RowDefinitions>\r\n                <RowDefinition Height=\"Auto\"\/>\r\n                <RowDefinition Height=\"*\"\/>\r\n            <\/Grid.RowDefinitions>\r\n\r\n            <StackPanel x:Name=\"TitlePanel\" Grid.Row=\"0\" Margin=\"12,17,0,28\">\r\n                <TextBlock x:Name=\"ApplicationTitle\" Text=\"Controls\" \r\n                           Style=\"{StaticResource PhoneTextNormalStyle}\"\/>\r\n                <TextBlock x:Name=\"PageTitle\" Text=\"Busy Indicator\" Margin=\"9,-7,0,0\" \r\n                           Style=\"{StaticResource PhoneTextTitle1Style}\"\/>\r\n            <\/StackPanel>\r\n\r\n            <Grid x:Name=\"ContentPanel\" Grid.Row=\"1\" Margin=\"12,0,12,0\"\r\n                  Height=\"550\" VerticalAlignment=\"Top\">\r\n                <Button Content=\"Do Something\" Height=\"80\" Width=\"300\"\r\n                    Click=\"Button_Click\" \/>\r\n            <\/Grid>\r\n        <\/Grid>\r\n    <\/controls:BusyIndicatorControl>\r\n\r\n    <phone:PhoneApplicationPage.ApplicationBar>\r\n        <shell:ApplicationBar IsVisible=\"True\" IsMenuEnabled=\"True\">\r\n            <shell:ApplicationBarIconButton IconUri=\"\/Assets\/Icons\/appbar.check.rest.png\" Text=\"Check\"\r\n                                            Click=\"ApplicationBarIconButton_Click\" \/>\r\n            <shell:ApplicationBarIconButton IconUri=\"\/Assets\/Icons\/appbar.close.rest.png\" Text=\"Close\"\/>\r\n        <\/shell:ApplicationBar>\r\n    <\/phone:PhoneApplicationPage.ApplicationBar>\r\n\r\n<\/phone:PhoneApplicationPage><\/pre>\n
In this case, the whole phone page would be set to „disabled“ by the overlay of the busy indicator control and the application bar would hide, when the IsBusy<\/code> property is set to true<\/code>. IsBusy<\/code> is bound to a property IsDoingSomething<\/code> in the ViewModel, which controls the visibility and state of the busy indicator. Of course, you can choose the area to disable and change the property values and the style of the control as you want.<\/p>\n
Features<\/h3>\n
This busy indicator includes the following main features:<\/p>\n