Following on from that previous post, the last thing that I wanted to do was just tidy up the styling around the new downloading dialog that I’d created and the UI for launching it.

So, I opened up Blend once more and the first task is to replace that Download button with a suitable icon;

which is easy enough (after a bit of manipulation of the Visual Studio 2010 image library to make the icon I wanted );

Then it’s time to take a look at the downloading view that I hacked together in the previous post which shows up looking ever so slightly blank inside of Blend;

this is a bit useless from a design perspective so I need to make some sample data based on my DownloadingViewModel class which is going to sit behind this view at runtime;

I then edited the sample data a little bit by editing the XAML for the data in order to give it more realistic values and then I dragged that data source out to my view which then gives me some values that I can see;

and then it becomes a matter of making up UI elements and data-binding them. I ended up doing something pretty simple with images and TextBlocks mainly and I’ve tried to highlight how much of the data I bound to the screen on this screenshot;

I wanted to have 2 states on this UI – one for when it is downloading and one for when it is finished;

and, like I did in Part 2 of this series of posts, I wanted to data-bind this to a property on the ViewModel rather than try to manipulate the Visual State Manager from code ( which isn’t so easy from a ViewModel ) so I used my BindableVsmState class again in my XAML;

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
  x:Class="PDCTutorial.Views.Views.DownloadingView"
  xmlns:util="clr-namespace:PDCTutorial.Utility;assembly=PDCTutorial.Utility"
  mc:Ignorable="d"
  d:DesignHeight="768"
  d:DesignWidth="1024"
  util:BindableVsmState.VsmState="{Binding ViewState,Mode=TwoWay}">

to ensure that a simple property change on the underlying ViewModel property called ViewState can cause the Visual State Manager to perform state transitions on the view for me purely by binding.

With that, I’m pretty much done. I’ve got a downloading dialog that does pretty much what I wanted;

Where’s the Source?

Here’s the source code for download.

Wrapping Up

In the end, this is a pretty simple app presenting just a couple of lists worth of data and then doing some file downloading and presenting the progress of that file downloading to the user.

It could have been written with a lot less code and, in truth, I did write it the first time around with a lot less code but in revisiting the application I managed to come away with a few bits that I’d perhaps re-use in the future and a much more loosely coupled solution with the benefit that;

1. Running in the browser, the application only loads 3 small XAP files.
2. Running out of the browser, the application is factored into 7 XAP files.
3. The application’s loading of XAP files is configurable so adding new XAP files is a matter of editing a configuration file and specifying which load context (i.e. in browser? out of browser? both?) the XAP needs to load in.
4. The application is factored into Views, ViewModels and underlying services.
5. ViewModels are injected into views and so implementation can easily be replaced and is testable.
6. Services are injected into ViewModels (and, in some cases, other services) and so implementation can easily be replaced and is testable.

and I came away with some re-usable bits and pieces;

1. A file downloading component
2. A revisited version of my MEF loader which is driven by either a code-definition or by XAML which can either be embedded into the app or dynamically downloaded at runtime.
3. A simple framework for deferred loading of views into the application where a view only has to export itself a certain way to appear in a named slot in the application – see part 1 for more on this.

and I got the posts finished by the end of the year

Enjoy!