2. Showing Progress
In this section, I demonstrate
how to have your ViewModel drive UI, such as when to show progress bars
or not, via data binding. It is a quick example based on the previous
example that downloads the AppHub feed but the concept is very important
to help you understand how to put more code into your ViewModels and
less code in your View.
The SyndicatedServicesViewModel.cs code file is copied and renamed ShowProgressViewModel as well as the constructor. The new ShowProgressViewModelViewModelLocator just as before, and a new View named ShowingProgress.xaml is created and data bound to the ShowProgressViewModel. Run the project and it should work just as the previous sample. property is added to the
A new Boolean property named ShowProgressBar is added to the ShowProgressViewModel class. The ShowProgressBar property is set to true just before the HttpWebRequest.CreateHttp method call in the ShowProgressViewModel .DownloadAppHubFeed method.
The property must be modified on the UI thread so that data binding
propagates to the UI and an error doesn't happen from cross-thread
access:
public void DownloadAppHubFeed()
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
ShowProgressBar = true;
});
...
At the end of the ShowProgressViewModel.ReceiveFeedData method set ShowProgressBar
to false. This completes the changes in the ViewModel. The progress bar
should be enabled right before making the web call and then disabled
once the new data is data binded to the UI. Again the property must be
modified on the UI thread:
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
FeedItems = items.ToList<FeedItem>();
//Artificial delay to test progress bar
System.Threading.Thread.Sleep(3000);
ShowProgressBar = false;
});
In the ShowProgress.xaml page,
add a progress bar that applies to the width of the screen in the middle
of the page. The progress bar should look like the native WP7 progress
bar, otherwise known as "the flying dots." Luckily the Silverlight for
Windows Phone Toolkit has been updated to include two new controls, TiltEffectPerformanceProgressBar. Previously you had to create a customized version of the built-in progress bar in order to have good UI thread performance. and
Once the latest Silverlight toolkit for WP7 is installed, add PerformanceProgressBar to the Toolbox window in Visual Studio and drag the control on to the ShowingProgress.xaml View. Switch over to Expression Blend and set the HorizontalAlignment to stretch and reset Margin to just a top Margin of 300. Next set the IndeterminateProperty
to True and you can see the flying dots at design-time in Expression
Blend. We only want to see the flying dots when loading data so let's
data bind the LoadingDataPerfProgressBar's Indeterminate property to the ShowProgressViewModel.ShowProgressBar property. Here is the XAML for the PerformanceProgressBar from ShowingProgress.xaml:
<toolkit:PerformanceProgressBar x:Name="LoadingDataPerfProgressBar" Margin="0,300,0,0"
VerticalAlignment="Top" IsIndeterminate="{Binding ShowProgressBar}" />
By default, the data is obtained by ShowProgressViewModel when the application loads and the ShowProgressViewModel is created. We modify the constructor to not automatically call the DownloadAppHubFeed() method. The ShowingProgressView
is modified to have an Application Bar button that manually downloads
the feed. Clicking the Application Bar button will enable the progress
bar, download the feed, and then disable the progress bar by calling the
DownlaodAppHubFeed()Figure 6-4 shows the flying dots in the emulator. method.
This example demonstrates the
power of Silverlight and its data binding infrastructure to allow the
ViewModel non-visual class to drive the UI based on the applications
current state. This technique is critical to effective MVVM development
and can be extended to other data-driven UI to indicate state and
display additional UI when needed.
3. Lazy Load Images
When developing for a
mobile device with constrained networking and hardware capabilities
relative to a desktop computer, you sometimes have to take additional
steps beyond the "default" programming model. As an example, loading a
ListBox with data and images from a remote server can peg the UI thread
resulting in a poor user experience for scrolling and animations.
Anytime work can be taken off of the UI thread is a win for performance.
A Silverlight for Windows
Phone team member David Anson blogged here about a way to offload image
loading to a background thread that results in much better UI
performance in this article.
In the blog post, Dave introduces the LowProfileImageLoader class to address the very specific issue of loading lots of images from the web simultaneously. The LowProfileImageLoader
slows the loading of images but the UI remains responsive as images are
loaded because the UI thread is not slammed waiting for images to load
and then data bind.
To test out the
LowProfileImageLoader, let's work with the Netflix API. I picked this
API because it has an interesting set of images (movie art) in a
well-documented API. The API is available at developer.netflix.com.
We will use the OData Client Library for Windows Phone 7
to access the Netflix API. As before we add a reference to
System.Data.Services.Client.dll. We use the DataSvcUtil.exe to generate a
proxy class:
DataSvcUti.exe /uri:http://odata.netflix.com/Catalog/ /out:Netfli xOdataAPI.cs
/Version:2.0 /DataServiceCollection
Adding the DataServiceCollection option has the tool implement the INotifyPropertyChanged interface, which is important for change notification purposes. The OData access is wired into the LazyLoadViewModel.cs class, which is a copy of the ShowProgressViewModel:
public void DownloadNetflixTopTitles()
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
ShowProgressBar = true;
});
topMovieTitles = new DataServiceCollection<Title>(ODataContext);
topMovieTitles.LoadCompleted +=
new EventHandler<LoadCompletedEventArgs>(topMovieTitles_LoadCompleted);
topMovieTitles.LoadAsync(new Uri("/Titles()",UriKind.Relative));
}
void topMovieTitles_LoadCompleted(object sender, LoadCompletedEventArgs e)
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
ShowProgressBar = false;
TopMovieTitles = topMovieTitles;
});
}
The LazyLoad.xaml View page is modified to include a ListBox with a simple DataTemplate that shows the movie title and image. Figure 5 shows the UI.
Not every movie title has box
art, but many do. Let's now modify this application to use the
LowProfileImageLoader class to asynchronously display the images.
Download the source code at the blog post link above and grab the
PhonePerformance.dll. Add a reference to it in the AdvancedDatabinding
project and then add a namespace reference to LazyLoadImage.xaml:
xmlns:delay="clr-namespace:Delay;assembly=PhonePerformance"
Next
update the NetflixTopTitleDataTemplate so that the image is not loaded
from the built-in Source property but instead is loaded using this XAML:
<Image delay:LowProfileImageLoader.UriSource="{Binding BoxArt.SmallUrl}"
HorizontalAlignment="Left" Stretch="UniformToFill" Width="150"/>
The performance difference is
much more obvious on a physical device over 3G, but as you can see it
is pretty trivial to add support for the LowProfileImageLoader to see if
it can help with any performance issues related to image loading in
your applications.
