In the sample for using the location service we tackle both of these scenarios.

So, I am going to jump straight in here and assume that you have either looked at the sample in the Spikes folder of the WP7 Contrib (WP7C) or you have some experience of using the Rest API provided by the Bing Maps endpoint. If you have not done this then I would suggest opening up the sample and taking a quick look at the Location View Model, its pretty straight forwards so you should be back in 10.

First off if you have not already created a project then you need too. If you are using MVVM and some sort of DI library cool, if not no worries. There are two different options provided by the Location Service from the Bing REST API; you can either use the Geo Coordinate Location of the device and pass this to the service in order to give you back a current address; or you can enter a location to find out what Geo Coordinate Location is.

If you are not already using the WP7C components in you app (shame on you J) then you need to add a couple of references in order to get this up and running, these include:-

• WP7Contrib.Services
  • BingMaps
  • BingMaps.Model
  • Location

These are the basic bits that you need to get your geo location app up and running. Once we have included those assemblies then we need to define the interfaces we want to use and the data objects that correspond to the location service calls.

First up we need to declare the private fields so let’s go ahead and do that

private readonly IBingMapService bingMapService;
private readonly ILocationService locationService;
private LocationRect boundingRectangle;
private GeoCoordinate currentDeviceGeoCoordinate;
private IDisposable currentLocationObserver;
private RelayCommand selectFindMyCurrentLocationCommand;
private RelayCommand selectFindGeoLocationFromAddressCommand;
private Address address;
private LocationData locationDataByPoint;

Next, we need to create a constructor for our VM. You will notice that not only am I using the ILocationService which is the WP7C’s Rx location component but we are also going to pass in a IBingMapService which is our wrapper that we will use to call the REST services. The other interfaces that I am using here are the navigation service and the logging component from WP7C.

public LocationViewModel(
INavigationService navigationService,
ILocationService locationService,
IBingMapService bingMapService,
ILog log)
: base(navigationService, log)
{
this.locationService = locationService;
this.bingMapService = bingMapService;
this.address = new Address {CountryRegion = "UK", PostalCode = "LE17 5ER"};
}

Currently, and this is consistent across all of our samples we are using Funq as our DI framework of choice, its light and simple which is why it’s great for WP7, we are not bound to Funq in anyway so if you want to use your Favourite DI then you can do so.

With our constructor defined we need to go ahead and do our register and resolve in the bootstrapper.

There is quite a bit of stuff happening in the bootstrapper, mainly because of the fact that we are taking advantage of the different components inside of the WP7C, now you don’t have to use these however if you need things like logging; want to store data; and if you have a design where you are not loading all the VM’s upfront take a look at the Last Message Replay. As this is the first in a series of posts we can deconstruct what is happening here in the future articles I will only reference this section.

The code below setups the Logging bits for us.

this.Container.Register<ILogManager>(c => new LoggingService("BingMaps"));
this.Container.Register<ILog>(c => this.Container.Resolve<ILogManager>());
<p>var logManager = this.Container.Resolve<ILogManager>();
logManager.Enable();

Here we setup the settings for the app and assign the key that we want to use for bing maps. The registered key in the code is registered to the WP7C so I would advise that you register, it does not take long and the key is generated instantly.

this.Container.Register<IStoreSettings>(c => new SettingsStore(this.Container.Resolve<ILog>()));
this.Container.Register<ISettings>(c => new Settings("Bing Key"));
var serialisationAssemblies = new List<Assembly> { this.GetType().Assembly };

Setup the cache provider and initialise it.

this.Container.Register<ICacheProvider>(c => new  IsolatedStorageCacheProvider("BingMaps", serialisationAssemblies,  c.Resolve<ILog>()));
var cache = this.Container.Resolve<ICacheProvider>();
System.Threading.ThreadPool.QueueUserWorkItem(state => cache.PreemptiveInitialise());

Setup the last replay messenger.

this.Container.Register<IMessenger>(c => new LastMessageReplayMessenger());

Setup the WP7C Navigation Service.

this.Container.Register<INavigationService>(

c => new ApplicationFrameNavigationService(((App)Application.Current).RootFrame));

Setup the WP7C Network service

this.Container.Register<INetworkService>(c => new NetworkMonitor(5000));

Setup the WP7C Storage service.

var assemblies = new List<Assembly> { this.GetType().Assembly, typeof(BaseModel).Assembly };
this.Container.Register<IStorageService>(c => new StorageService(assemblies, c.Resolve<ILog>()));

As we are using the Resource Client from WP7C we also need to add this setup code into our bootstrapper.

this.Container.Register<IEncodeProperties>(c => new UrlEncoder());
this.Container.Register<IHandleResourcesFactory>(c => new ResourceClientFactory(c.Resolve<ILog>()));

The final part is that we need to wire in the IBingMapService which needs to be resolved using some of the interfaces that we registered earlier.

this.Container.Register<IBingMapService>(c => new BingMapService(
c.Resolve<IHandleResourcesFactory>(),
c.Resolve<IEncodeProperties>(),
c.Resolve<ICacheProvider>(),
c.Resolve<ISettings>(),
c.Resolve<ILog>()));

Ok, so we nearly have, all of the underlying plumbing done what we need to do next is to setup the VM locator. If you need more details on this please refer to the sample code. Once you have the VM locator updated we can go ahead and bind our Data Context up to the VM using the service locator pattern in Xaml.

As I mentioned at the start of this article, the UI’s are more about form and function, so our intentions are purely to visualise all the different types of data coming back from the service. So, for this we went with simple UI controls to make sure that the data being returned from our request is correct.

Now, that we have the plumbing in place, and some simple UI that displays the responses, our next step is to make our requests out to the Bing Services. This code is going to live in the VM.

The first thing on our list to implement is that we need to make our app location aware, everything you need to do this is already baked in the WP7C, it just requires a simple bit of Rx to get it wired in. In order to do this we need to leverage the ILocation Service that we injected into the VM as this will find out what our current location is.

private GeoCoordinate currentDeviceGeoCoordinate;
private IDisposable currentLocationObserver;
private void ExecuteSelectFindMyCurrentLocationCommand()
{
try
{
this.currentLocationObserver =
this.locationService.Location()
.ObserveOnDispatcher()
.Subscribe(geoCoordinate =>
{
this.CurrentDeviceGeoCoordinate = geoCoordinate;
this.SearchForLocation(this.BuildLocationSearchForPoint());
});
}
catch (Exception exn)
{
MessageBox.Show(string.Format("Failed! Message - '{0}", exn.Message), "Location Search",                MessageBoxButton.OK);
}}

Notice in the subscribe how we are assigning a value to the VM’s Current Device Geo Coordinate Property which is bound up in the view; also note that we are then doing a Search for a geo location and passing into this method the result from the Build Location Search For Point. We decided that in order for us to wrap up all the services and provide a common API from which users can use the services we would adopt a factory style pattern. So, what’s going on in the Build method? Well here we are calling out to the factory and asking it to create what we need in order to query the Bing services for dealing with the request.

private ILocationSearchPointCriterion BuildLocationSearchForPoint()
{
return CriterionFactory.CreateLocationSearchForPoint(this.CurrentDeviceGeoCoordinate);
}

And that is all you need to add location awareness to your app, I hope that you agree with me that this is rather straight forwards. Next up we need to build out the search for location method, which is going to use the Bing wrapper service from the WP7C to search for a location. If you have looked over the code you will see that we have 2 overloaded methods, one which deals with Geo Location and the other which deals with addresses.

private void SearchForLocation(ILocationSearchPointCriterion criterion)
{
this.bingMapService.SearchForLocationUsingPoint(criterion)
.ObserveOnDispatcher()
.Subscribe(this.ProcessSearchLocationByPointResponse,
FailedSearch,
CompletedSearch);
}

And for completeness I have included the code for the address mechanism below.

private void SearchForLocation(ILocationSearchAddressCriterion criterion)
{
this.bingMapService.SearchForLocationUsingAddress(criterion)
.ObserveOnDispatcher()
.Subscribe(this.ProcessSearchLocationByAddressResponse,
FailedSearch,
CompletedSearch);
}

Note that there are a couple of differences between the overloads; first the interface type that we are passing into our method for locations we always need to use the ILocationSearchPointCriterion and for addresses we need to use the ILocationSearchAddressCriterion; and the other difference is that we use a different method to deal with the response that we get sent from the Bing Services.

private void ProcessSearchLocationByPointResponse(LocationSearchResult result)
{
if (result == null)
{
return;
}
if (result.Locations.Count != 0)
this.LocationDataByPoint = result.Locations[0];
}

In order to successfully process the data and then work on this data the WP7C provides you with the data transformation classes that you need and does all the map and wrap code so that you don’t have to. In the code above this is illustrated by our use of the LocationDataByPoint property which uses the Location Data class from the WP7C, we are using databinding in the view and wiring up to this property from the VM .

So, just to recap what we have covered are a couple of things here; first we made our app Geo Location aware by using the WP7C Rx location service; which was then wired up to the Bing Services Wrapper and we used this to provide an address of the device’s current location; and for completeness we provide a way for the user to enter details of an address and the app responds with a Geo Location that corresponds to the address.

Admittedly we are doing some simple tasks here however its super important that we put in the ground work so that you can gain a deep understanding of how the wrappers work. We would really like to hear your feedback, if you have built an app using the Bing services we would also be interested in talking to you about your sceanrios.

In the next post I will dig into using the Route Service.

Ollie has some deep dive blog posts planned which are based around the patterns that he is using along with some gems of information around using Rx with these more traditional patterns so watch out for those.

Enjoy!

Our first session will be all about building Data Data Intensive apps for WP7 and we are really looking forward to talking to you about what we have learnt building these types of applications. We are also going to show off bits from the WP7 Contrib that help to make building these types of applications easier. It’s going to be a demo packed session so hold on for a rollercoaster ride. We are making avaliable all our demos before the session so if you are attending and interested you can download these from the skydrive link at the bottom of the post.

My other session obviously will be about using Blend =P  and the title of the session is aptly named “Expression Blend for Silverlight Developers”.

The session is broken down into 3 sub sections; designer developer collaboration; Blend quick fire tips; and the main part, building out an app from a Adobe Photoshop/Illustrator visual design into a functional Silverlight app. This session is aimed particularly at developers who are just starting out with Blend, however even if you have been using Blend for a while there should be plenty of refreshers.

Now, I had thought about doing

“… this is how I create a button in Blend, and oh look I can make it into a circle and bounce across the screen…”

as much as I love attending these sessions and love the buzz afterwards sometimes it can be difficult to relate the content to a problem you may currently be working on.

Up on skydrive you will find; the .psd file I am going to use; an unstyled version; and a completed version that is styled. There is still plenty more to do so the scope is open and hopefully you will be able to use this as a reference point for future apps that you build. Therefore, I thought that it would be an interesting idea to see how attendees if they so wished can use the session as a hands-on Blend training hour, and if you want to participate then you can. Otherwise you can sit back and watch how we build a static vector graphic into a functioning app.

If you are planning on attending and would like me to cover off anything in particular I will do my best to make it happen, otherwise I would be more than happy to chat during the event, if you can bring code or have a scenario that would really help me understand the context of your questions.

You can find all of the goodies up on the sky drive folder.

See you there!

1. Define the Message which wraps up the data
2. Add the IMessenger interface as a parameter in the VM constructor
3. Register the IMessenger interface with the Last Message Replay Messenger
4. In the originator register the type of message data your interested in with the Notification Message Action
5. In the VM which is interested in the message register for the Message defined in step 1
6. Provide a method that deals with the received messages and sets up the data context of the View

Now this works just fine when I want to pass data to disconnected lazy loading VM’s but I got into trouble when it came to stashing this content. The main reason is that it comes down to a level of responsibility which results in the question of who owns the data ? and who is responsible for storing the data ?

What I ended up with was a collection of favourites that were being managed by each VM that required their Views to have the ability; add to the favourites list and then fire a message broadcasting that here is the new favourite item which needs to be added into the favourites collection. Cool!

So all is cool now? Well sure until it comes to building out the persistence mechanism using the override Activate and DeActive methods that the VM Base provides us with in order to store the data. My next move was then to start changing the data inside of the Message to a collection of the same type, but this solution means that I now pass around a reference pointer to the collection in the message and each VM is then responsible for adding new items. The Favourites VM is then inherently responsible for persisting the collection. Ok so that gets us closer. Unfortunately, the Favourites Page and VM are not primaries in the user journey through the app therefore, there is a high potential that the user will not have viewed the Favourites Page resulting the Favourites VM not being instantiated and now things start to get sticky again….

At this point its time for a brew…. I could continue trying to bend the message pattern to fit our needs but its generating a large amount of friction when we try and push. This is where using a service makes far more sense. Now, if you chat to Ollie he will say well this is all about “ask don’t tell, Rich”. Therefore, moving to a more service style pattern similar to the one used in the service layer for our Apps results in those VM’s which need to use the favourites service have this injected during startup via the bootstrapper. Unlike our current situation where each VM has to register for the message. This gets us back into check with a single responsibility pattern. As the favourites service is now responsible for anything to do with favourites cleaning up the implementation code in the VM’s wanting to use the service. Sweet!

Now I really like this pattern as its super simple to implement and by taking advantage of IStorage and IStorageService which can be found in the WP7C not only do we have a simple pattern for sharing data and operating on that data, we also get the ability to stash this content into Isolated Storage.

The best way for me to show this off is to do a sample, so I am going to build on the sample from the previous post, its also in the spikes directory on Codeplex. What we are going to add to this is a favourites page, wired up to a Favourites VM, and a favourites service that has the ability for our user to do an add to favourites from the list (Main VM)and an add to favourites from the details page (Child VM).

First, up we need to create an interface, in my case its called IFavouriteSearch and it going to provide a service to retrieve the current collection of favourites, add a new favourite, query to see if the service already contains a particular favourite and also remove a favourite from the collection.

using ServiceStyleRatherThanMessengerStyle.Model;

using WP7Contrib.Collections;

/// <summary>
/// The favourites service contract.
/// </summary>
public interface IFavouritesService
{
        #region Properties

        /// <summary>
        /// Gets Favourites.
        /// </summary>
        ReadOnlyObservableCollection<Person> Favourites { get; }

        #endregion

        #region Public Methods

        /// <summary>
        /// The add.
        /// </summary>
        /// <param name="person">
        /// The currently selected person.
        /// </param>
        void Add(Person person);

        /// <summary>
        /// The is a favourite.
        /// </summary>
        /// <param name="person">
        /// The person.
        /// </param>
        /// <returns>
        /// The is a favourite.
        /// </returns>
        bool IsAFavourite(Person person);

        /// <summary>
        /// The remove favoutite.
        /// </summary>
        /// <param name="person">
        /// The person.
        /// </param>
        void RemoveFavourite(Person person);

        #endregion
}

That’s the service defined.

Next up we need to define a concrete class called the Favourite Service which implements the interface, the important part to remember here is that we want to stash the collection to isolated storage in order to persist the selected favourites between sessions. In order to do this we can simply pass into the constructor the IStorageService interface, if you wanted to use the logging parts of WP7C then you can added this into the constructor parameter list.

public FavouritesService(IStorageService storageService, ILog log)
{
   this.storageService = storageService;
   this.log = log;
}

So this is the cool part, when we expose the favourites collection all we need to do is work out if we are rehydrating the collection for the first time from Isolated Storage and load up the collection in ISO, otherwise we new up a collection of the required type. Each piece of content that is stored into ISO has its own key, in my case its called favourites and its used as the Unique ID to retrieve the specified content. The code to Load from Storage is boiler plate and done once it’s a rinse and repeat style pattern.

/// <summary>
/// Gets Favourites.
/// </summary>
public ReadOnlyObservableCollection<Person> Favourites
{
   get
   {
      if (!this.loaded)
      {
         this.LoadFromStorage();
      }

       return new ReadOnlyObservableCollection<Person>(this.favourites);
   }
}

The management methods that operate on the collection we build out as normal and then decorate this code with the storage calls. These are rather easy to remember; once the collection has been updated then we make a call to write the list into ISO associated with our Unique ID, then we flush the storage buffer.

/// <summary>
/// Adds a person to the favourites.
/// </summary>
/// <param name="person">
/// The currently selected person.
/// </param>
public void Add(Person person)
{
   if (person == null)
   {
      return;
   }

   if (!this.loaded)
   {
      this.LoadFromStorage();
   }

   if (this.favourites.Contains(person))
   {
      return;
   }

   this.favourites.Add(person);
   this.storage.Write(StorageKey, this.favourites.ToList());
   this.storage.Flush();
}

/// <summary>
/// The is a favourite.
/// </summary>
/// <param name="person">
/// The person.
/// </param>
/// <returns>
/// Returns true if the person is a favourite.
/// </returns>
public bool IsAFavourite(Person person)
{
   if (person == null)
   {
      return false;
   }

   if (!this.loaded)
   {
      this.LoadFromStorage();
   }

   return this.favourites.Contains(person);
}

/// <summary>
/// The remove favoutite.
/// </summary>
/// <param name="person">
/// The persoh.
/// </param>
public void RemoveFavourite(Person person)
{
   if (person == null)
   {
      return;
   }

   if (!this.loaded)
   {
      this.LoadFromStorage();
   }

   if (!this.favourites.Contains(person))
   {
      return;
   }

   this.favourites.Remove(persoh);
   this.storage.Write(StorageKey, this.favourites);
   this.storage.Flush();
}

Lets now take a look at the Load From Storage method.

/// <summary>
/// The load from storage.
/// </summary>
private void LoadFromStorage()
{
   if (this.loaded)
   {
      return;
   }

   lock (this.sync)
   {
      if (this.loaded)
      {
         return;
      }

      this.favourites = new ObservableCollection<Person>();
      this.storage = this.storageService.OpenPersistent(StorageKey);

      var favs = this.storage.Read<List<Person>>(StorageKey);
      if (favs == null || favs.Count == 0)
      {
         this.log.Write("FavouritesService: No favourites");
      }
      else
      {
         foreach (Person fav in favs)
         {
              this.log.Write("FavouritesService: Loading Person, hash code - " + fav.GetHashCode());
              this.favourites.Add(fav);
         }
     }

      this.loaded = true;
   }
}

When we need to read the collection we use the Storage service to setup the storage mechanism once this has been done happy days simply call the Read method telling what type is being rehydrated using the specified Unique key that was defined earlier. Iterate over what comes out and add it to our collection.

Now we need to be able to use the service so we head over to the bootstrapper and crank out some register and resolve calls for the service.

this.Container.Register<ILogManager>(c => new LoggingService("LastReplayMessenger"));

this.Container.Register<ILog>(c => this.Container.Resolve<ILogManager>());

var assemblies = new List<Assembly> { this.GetType().Assembly, typeof(BaseModel).Assembly };

this.Container.Register<IStorageService>(c => new StorageService(c.Resolve<ILog>(), assemblies));

this.Container.Register<IFavouritesService>(
c => new FavouritesService(c.Resolve<IStorageService>(), c.Resolve<ILog>()));

And that’s our service registered and resolved, our next step is to inject the favourite service into the VM’s that are going to be using it.

this.Container.Register(
c =>
new MainViewModel(
c.Resolve<INavigationService>(),
c.Resolve<IMessenger>(),
c.Resolve<ILog>(),
c.Resolve<IFavouritesService>()));

this.Container.Register(
c =>
new ChildViewModel(
c.Resolve<INavigationService>(),
c.Resolve<IMessenger>(),
c.Resolve<ILog>(),
c.Resolve<IFavouritesService>()));

A common scenario is that we have a View which provides an experience that allows the user to add items via a list. In my case I choose a context menu which was added to the data template used by the list box. In order to do this I created a Relay Command and wired this up to the context menu from the toolkit in the data template. There are two implementations that we need to implement here first we need to be able to trigger a command from inside the data template of the listbox.

/// <summary>
/// The select add to favourites command.
/// </summary>
private RelayCommand<Person> selectAddToFavouritesCommand;

/// <summary>
/// Gets SelectAddToFavouritesCommand.
/// </summary>
public RelayCommand<Person> SelectAddToFavouritesCommand
{
   get
   {
      return this.selectAddToFavouritesCommand ??
      (this.selectAddToFavouritesCommand = new RelayCommand<Person>(this.ExecuteAddToFavouritesCommand));
   }

   private set
   {
      this.selectAddToFavouritesCommand = value;
   }
}

/// <summary>
/// The execute add to favourites command.
/// </summary>
/// <param name="person">
/// The person.
/// </param>
private void ExecuteAddToFavouritesCommand(Person person)
{
   this.favouritesService.Add(person);
}

<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="add to favourites"
Command="{Binding MainViewModel.SelectAddToFavouritesCommand, Source={StaticResource Locator}}"
CommandParameter="{Binding .}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

And the other implementation is from an app bar button.

/// <summary>
/// The execute add to favourites command.
/// </summary>
private void ExecuteAddToFavouritesCommand()
{
   this.favouritesService.Add(this.CurrentlySelectedPerson);
   this.NavigationService.Navigate(new Uri("/View/FavouritesPage.xaml", UriKind.Relative));
}

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True"
IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="AddToFavourites"
IconUri="/resources/icons/appbar.favs.addto.rest.png"
Text="AddToFavourites" />
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

<i:Interaction.Behaviors>
<Behaviors:ApplicationBarIconButtonCommand TextKey="AddToFavourites"
CommandBinding="{Binding SelectAddToFavouritesCommand}" />
</i:Interaction.Behaviors>

Lets just quickly circle back, what we have done thus far is implement the required add to favourites functionality, but ultimately we also want to allow the user to view their favourites so next we need to create the page and the favourites VM remembering to add the new VM to the VM Locator.

The favourites VM.

/// <summary>
/// The favourites view model.
/// </summary>
public class FavouritesViewModel : ViewModelBaseWp7
{
    #region Constants and Fields

    /// <summary>
    /// The favourites service.
    /// </summary>
    private readonly IFavouritesService favouritesService;

    /// <summary>
    /// The currently selected person.
    /// </summary>
    private Person currentlySelectedPerson;

    #endregion

    #region Constructors and Destructors

    /// <summary>
    /// Initializes a new instance of the <see cref="FavouritesViewModel"/> class.
    /// </summary>
    /// <param name="navigationService">
    /// The navigation service.
    /// </param>
    /// <param name="messenger">
    /// The messenger.
    /// </param>
    /// <param name="log">
    /// The log.
    /// </param>
    /// <param name="favouritesService">
    /// The favourites service.
    /// </param>
    public FavouritesViewModel(
        INavigationService navigationService, IMessenger messenger, ILog log, IFavouritesService favouritesService)
        : base(navigationService, messenger, log)
    {
        this.favouritesService = favouritesService;

        ThreadPool.QueueUserWorkItem(
            state => { this.MessengerInstance.Register<SelectedPersonMessage>(this, this.OnReceiveMessage); });
    }

    #endregion

    /// <summary>
    /// Gets CurrentlySelectedCurrentlySelectedPerson.
    /// </summary>
    public Person CurrentlySelectedPerson
    {
        get
        {
            return this.currentlySelectedPerson;
        }

        private set
        {
            this.SetPropertyAndNotify(ref this.currentlySelectedPerson, value, "CurrentlySelectedPerson");
        }
    }

    public ReadOnlyObservableCollection<Person> Favourites
    {
        get
        {
            return this.favouritesService.Favourites;
        }
    }

    #region Methods

    private void OnReceiveMessage(SelectedPersonMessage obj)
    {
        if (obj == null)
        {
            return;
        }

        if (obj.Person == null)
        {
            return;
        }

        this.CurrentlySelectedPerson = obj.Person;
    }

    /// <summary>
    /// The is being activated.
    /// </summary>
    /// <param name="storage">
    /// The storage.
    /// </param>
    protected override void IsBeingActivated(IStorage storage)
    {
    }

    /// <summary>
    /// The is being deactivated.
    /// </summary>
    /// <param name="storage">
    /// The storage.
    /// </param>
    protected override void IsBeingDeactivated(IStorage storage)
    {
    }

    #endregion
}

And the favourites page which has a listbox data bound to the favourites collection exposed by the VM.

<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<ListBox ItemsSource="{Binding Path=Favourites}"
SelectedItem="{Binding Path=CurrentlySelectedPerson}"
ItemTemplate="{StaticResource PersonsDataTemplate}"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}" />
</Grid>

And we are done!

One thing that I did add here is the Last Replay Message Messenger and data binding to the selected item in the listbox so that I can highlight the newly added favourite.

A quick recap on what happened

1. Create the interface for the service and expose what you need usually a collection and some management methods for managing the data
2. Create the concrete implementation adding in the IStorageService into the constructor
3. In the concrete add logic to rehydrate and stash your data
4. Update the constructor on the VM’s that need to have the add to favourites functionality
5. In the Bootstrapper register the new service and Resolve them in the VM’s
6. Create relay commands in the VM and View to trigger the actions
7. Create the favourites page and VM
8. Update the Bootstrapper and VM Locator with the new VM
9. Expose a property for the collection so that it can be bound to in the View
10. [Optional] use the Last Replay Message to inform the favourites VM about the currently selected person

What is very interesting about all this is that we so often when using a framework get familiar with a certain technique and this becomes fashionable and we try to use it everywhere and there is nothing wrong with trying out new ways of doing something. However, there also has to be a realisation that when we start getting friction trying to bend the framework api to do something that it was not really meant for its time to use something solves the problem better.

Interested in your comments and you can find the code up on codeplex.

Before we start to roll you are going to make sure you have all the bits installed

WP7 Dev tools ISO download thanks JaimeR

MVVM Light Toolkit

WP7 Contrib

Now if you are using some sort of DI component, at the moment my favourite is funq (Ninject will always have a place in my heart) you may have found yourself in a situation where by you want to pass data from one VM to another, however the VM you want to pass the data to has not yet been created. There are various ways around this like not using DI and newing up all your VM during start-up so that this is no longer an issue. But, remember we are running under WP7 and performance is never going to be what it’s like in the browser. We also want to take advantage of DI and all the goodness that it brings to the party.

Which came first, the chicken or the egg ??

An inherent problem with using Silverlight navigation and DI and having your VM’s lazily loaded. When you navigate to a page its not until this moment in time that your VM is constructed, therefore we hit this timing problem where the VM that is loaded up and trying to send a message to a VM which has yet to be loaded. What we first started out with was an implementation that was not so polished in that we would have a Register and Send Message being defined in the VM making the call; a Register Message defined in the receiving VM; and a callback Message in the receiving VM.

The way in which this works would be something like :-

1. VM SearchPeople Registers for Message CurrentlySelectedPerson
2. In response to an interaction in the View (i.e. selecting an item in a list box). The associated VM SearchPeople Sends Message CurrentlySelectedPerson from within a INPC Property
3. In response to an interaction in the View (i.e. tapping an item in a list box). The associated VM SearchPeople ‘s RelayCommand navigates to a new page Person Details
4. VM Person Details is constructed by our DI framework
5. VM Person Details constructor Registers for the Message CurrentlySelectedPerson
6. VM Person Details constructor fires a CallBack for the MessageCurrentlySelectedPerson
7. VM SearchPeople received the Message CurrentlySelectedPerson
8. VM SearchPeople Send the Message CurrentlySelectedPerson
9. VM PersonDetails received the Message CurrentlySelectedPerson

This mechanism has to deal with the timing issue of the second VM not being loaded before the message is sent from the first, we end up in a situation where the first message never works and the subsequent messages always work. Therefore, by providing a callback in the second and sending the message from here to the first VM we solve the problem, but its not as elegant as it could be. The main issue here is that we are forced to send our messages twice due to the fact that our recipient VM has yet to be created and we need to give it a poke.

What becomes apparent is that the callback mechanism is not built for this type of work and we need a more structured and direct messaging mechanism. I had a chat with Ollie and he came up with a great messaging implementation. The rest of this post is concerned with how to use this Replay Messenger in your app, Ollie has a great post coming where he is going to go into more detailed post on the implementation details.

Laurent has provided an interface called IMessenger which provides developers with the ability to extend the and create our own Messages, nice… Let’s make a start on building out a simple implementation. If you have all the bits installed lets make a start. First off what is this app we are going to build, well is a simple app which has some sort of people list and we can select a person from the list and navigate to a more detailed page. Not the most exciting of apps but I want to keep the context fairly striaght forward so that we can concentrate on the problem and the solution rather than being distracted by other stuff. Saying that you are going too meet some other interface from WP7Contrib, ILogManager, ILog and INavigation Service. Over on the right you can see an screen shot showing the strcuture of the sample which can be found in the Spikes dir of the WP7Contrib.

My intentions below are not to walk you through every step we have some planned detailed posts and maybe even some screencasts to illustrate this points, therefore I am assumming that you know about the message classes availavble to you in MVVM Light Messaging and I am also assuming that you understand how to uses a DI framework.

Over on the right there is a screen grab of the solution if you want to fire this up then you can find it in the Spikes dir of the WP7Contrib. I have a model class called Person this is going to hold our data;2 pages main page and child page; 2 corresponding View Models main VM and child VM; in messages I have a base message and something called the Selected Person Message; a custom Base VM for WP7 which subclasses the MVVM Light VM Base; and finally I have a BootStrapper for my DI bits.

So first off what we need to do is take a look at the Selected Person Message as this is the message which is a wrapper for our data that we want to pass from the Main VM to the Child VM.

namespace ReplayLastMessageMessenger.ViewModel.Messages
{
    using System;

    using ReplayLastMessageMessenger.Model;

    /// <summary>
    /// The currently selected search result message.
    /// </summary>
    public class SelectedPersonMessage : BaseMessage
    {
        #region Constants and Fields

        /// <summary>
        /// The person.
        /// </summary>
        private readonly Person person;

        #endregion

        #region Constructors and Destructors

        /// <summary>
        /// Initializes a new instance of the <see cref="SelectedPersonMessage"/> class.
        /// </summary>
        /// <param name="person">
        /// The person.
        /// </param>
        public SelectedPersonMessage(Person person)
        {
            this.person = person;
        }

        /// <summary>
        /// Initializes a new instance of the <see cref="SelectedPersonMessage"/> class.
        /// </summary>
        /// <param name="exception">
        /// The exception.
        /// </param>
        public SelectedPersonMessage(Exception exception)
        {
            this.Exception = exception;
        }

        #endregion

        #region Properties

        /// <summary>
        /// Gets person.
        /// </summary>
        public Person Person
        {
            get
            {
                return this.person;
            }
        }

        #endregion
    }
}

The code above is boiler plate making the implementation clean and repeatable, the code above is the message that we use for passing Property data between our VM’s.

That’s the message built.

Remember, what we have in our view is a list of items, and in our case a list of people and when you select an item from the list we navigate from this page to a details page, and we do this by sending a message that contains the data of the currently selected item from the list.

/// <summary>
/// Gets or sets CurrentlySelectedPerson.
/// </summary>
public Person CurrentlySelectedPerson
{
    get
    {
        return this.currentlySelectedPerson;
    }

    set
    {
        this.SetPropertyAndNotify(ref this.currentlySelectedPerson, value, "CurrentlySelectedPerson");
        this.NavigationService.Navigate(new Uri("/View/ChildPage.xaml", UriKind.Relative));
        this.MessengerInstance.Send(new SelectedPersonMessage(this.currentlySelectedPerson));
    }
}

Note, in the above code the Messenger is only responsible for sending message, its the Navigation Service that is responsible for the navigation from the list page to the details page and the details page displays the details of the data item selected from the list, therefore the Child VM will need to know the currently selected person. I will cover off the Navigation Service interface in a future post.

In order to do this we need to inject the IMessenger into each VM from our bootstrapper. I am using funq for this so the code below is specific to funq however it’s the same drill register your wire ups with the container and then resolve them to an interface, This will provide a way of firing Registering and Sending those Currently Selected Person messages.

public class BootStrapper : IDisposable
{
    #region Constants and Fields

    /// <summary>
    /// The disposed.
    /// </summary>
    private bool disposed;

    #endregion

    #region Constructors and Destructors

    /// <summary>
    /// Initializes a new instance of the <see cref="BootStrapper"/> class.
    /// </summary>
    public BootStrapper()
    {
        this.Container = new Container();

        this.ConfigureContainer();
    }

    #endregion

    #region Properties

    /// <summary>
    /// Gets Container.
    /// </summary>
    public Container Container { get; private set; }

    #endregion

    #region Implemented Interfaces

    #region IDisposable

    /// <summary>
    /// The dispose.
    /// </summary>
    public void Dispose()
    {
        if (this.Container != null)
        {
            this.Container.Dispose();
            this.Container = null;
        }
    }

    #endregion

    #endregion

    #region Methods

    /// <summary>
    /// The configure container.
    /// </summary>
    private void ConfigureContainer()
    {
        this.Container.Register<ILogManager>(c => new LoggingService());

        this.Container.Register<ILog>(c => this.Container.Resolve<ILogManager>());

        this.Container.Register<IMessenger>(c => new LastMessageReplayMessenger());

        this.Container.Register<INavigationService>(
            c => new ApplicationFrameNavigationService(((App)Application.Current).RootFrame));

        this.Container.Register(
            c => new MainViewModel(c.Resolve<INavigationService>(), c.Resolve<IMessenger>(), c.Resolve<ILog>()));

        this.Container.Register(
            c => new ChildViewModel(c.Resolve<INavigationService>(), c.Resolve<IMessenger>(), c.Resolve<ILog>()));
    }

    #endregion
}

There are a couple of interfaces here that I am injecting into my VM’s these include the Navigation Service, the log manager and the log all of which we will talk about in future posts.

Again, Laurent has done a great job by providing a property in the View Model Base called Messenger Instance which returns the instance of the messenger we injected in our bootstrapper, nice. There is a small nugget here as well to help with performance, as the registration of the message does not need to happen on the UI thread we can wrap this up like so.

The Main VM looks like this.

public MainViewModel(INavigationService navigationService, IMessenger messenger, ILog log)
    : base(navigationService, messenger, log)
{
    ThreadPool.QueueUserWorkItem(state =>
    {
        // messaging
        this.MessengerInstance.Register<NotificationMessageAction<Person>>(
            this, message => message.Execute(this.CurrentlySelectedPerson));
    });
}

Now in the constructor of the Child VM its far sweeter code instead of the crufty callback and force a message in order to get the data we simply register for the replay message we are interested in, and provide a method to deal with the received message.

public ChildViewModel(INavigationService navigationService, IMessenger messenger, ILog log)
    : base(navigationService, messenger, log)
{
    ThreadPool.QueueUserWorkItem(state =>
    {
        this.MessengerInstance.Register<SelectedPersonMessage>(this, this.OnReceiveMessage);
    });
}

The Xaml in the Main View looks like this.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel"
        Grid.Row="1"
        Margin="12,0,12,0">
    <ListBox ItemsSource="{Binding Path=Persons}"
                SelectedItem="{Binding Path=CurrentlySelectedPerson, Mode=TwoWay}"
                ItemTemplate="{StaticResource PersonsDataTemplate}" />
</Grid>

The Xaml in the Child View looks like this.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel"
        Grid.Row="1"
        Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="90" />
        <RowDefinition Height="513" />
    </Grid.RowDefinitions>
    <StackPanel Orientation="Vertical">
        <TextBlock Text="{Binding CurrentlySelectedPerson.LastName}"
                    FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                    FontSize="{StaticResource PhoneFontSizeMediumLarge}" />
        <TextBlock Text="{Binding CurrentlySelectedPerson.FirstName}"
                    FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                    FontSize="{StaticResource PhoneFontSizeMedium}" />
    </StackPanel>
    <Border Grid.Row="1"
            BorderThickness="2">
        <Image Source="{Binding CurrentlySelectedPerson.ProfileImage}" />
    </Border>
</Grid>
</Grid>

Just to recap our steps were :-

1. Define the Message which wraps up the data
2. Add the IMessenger interface as a parameter in the VM constructor
3. Register the IMessenger interface with the Last Message Replay Messenger
4. In the originator register the type of message data you’re interested in with the Notification Message Action
5. In the VM which is interested in the message register for the Message defined in step 1
6. Provide a method that deals with the received messages and setups up the data context of the View

You can find out more information on the WP7Contrib and find out what people are saying on twitter #WP7Contrib.

As i mentioned at the start if you are already using MVVM Light today then you can take advantage of the Last Replay Message. Ollie is going to follow up with a more detail post on the implementation details.

But this is a POC ? Why would you do this?

Well its an interesting question and I am sure that there are folks out there who like to build prototypes and POC’s in this way, but based on my experience this usually ends up taking longer as you find yourself adding a workaround to the existing workarounds resulting in friction between what you want to do and the limitations of the framework. So the approach that I prefer to use is to take some time out at the start of the process and deconstruct the visual designs and build out a data model to represent what information needs to be presented. We can then go off and create the simple factory classes to build these data structures and take full advantage of the features supported by the framework. In essence we are using the same techniques that we would use for a production quality application but slimming down a journey through the application using more appropriate patterns.

This simple process is not time consuming, helps clear up any potential misunderstanding of how the application will react based on certain interactions, and it means that when deconstructing the visual designs its easy to figure out what type of control you can use in order to build the visual and if the control you are thinking about using will support the interactions required. The additional bonus here is that if you want to go a step further then you easily wire in a simple MVVM pattern, again this is something that I do however its not an essential step.

What I also like about this approach is that POC’s are usually built in a short timeframe and are thus open to change on a regular basis and we need to have an approach which reduces churn. By having a good data model you can limit the pain when things change as you can easily change the data object to suit and then a simple change to the Xaml. The opposite of this can result in lots of conditional logic which becomes prone to bugs and also limiting the application to potentially just a clickable mockup.

The other benefit which results in this approach is the level of reusability that I can pull from the POC and move into the production application. By having taken the time to produce a data structure that is usable this means that I can potentially reuse all the existing data templates, data bindings, styles, templates and certain custom controls. Again from my experience this level of reusability is normally higher than when we push forwards with a more static and tightly coupled approach.

To put this into a better context, a number of Surface applications that I have been involved in recently have required a ScatterView with ScatterView Items as these control provide those all important gestures for NUI interactions out of the box. Cool, but we are faced with the options either; create a known number of items and potentially recreate the same style but with different hardwired data; or create a single data template and style and take advantage of the data bind features. This can easily be achieved by data binding to the DP’s provided by the ScatterView Item that controls its placement, its easy to maintain and manage when those known changes happen. It also provides us with the flexibility to extend certain aspects rapidly without getting freaked out by the amount of conditional logic being added to the app.

My approach here is a simple one, create a base class for all your data controlled visuals which allow you to provide point data information so that when the objects are created you can initialise them where they need to be placed on screen. You can also add into here some more properties such as Orientation and data bind your data object property to the Orientation DP. Properties such as CanScale etc I would manipulate in a Style for the ScatterView Item, however there is no reason why you could not add them into the base. My reasons for the using a Style is so that when I am working with the designer I can easily make changes to the Style when we are both using Blend, it also allows me to share the work with designers visually, this for me is essential, personally I am more of a visual guy I prefer to see something rather than read textual content a visual helps paint the picture in a more accurate way with less room for individual perceptions of a textual instruction or description.

This simple approach provides; the ability to place visual elements exactly where the designer wants them;animations can be built in order to animate these visual elements on and off screen, interrogating the strongly typed data types means that we can apply the required styles on demand; reduces the complexity of app by taking advantage of data binding.

Just to break this down a little further, with the Tag Heuer implementation, I created a bunch of data objects for the locations around the world, London, Los Angeles, Cape Town, Sydney etc; all of which subclass the same base called Location. Location, Travel and Watches, the three different states of the app all subclass a class providing the positioning logic which intern subclasses an abstract base implementing INPC. I then have a data templates for each of the locations that we need to visualise, London, Los Angeles, Cape Town, Sydney etc. The data templates deal nicely with presenting our data, however there is a problem with layout as some of the aforementioned locations need to be positioned from left to right and some need to be positioned from right to left. To achieve this visual effect I used a different style
one for left to right and a second for right to left and wired these into the data template. I could have written c# to flip the visual tree however in this instance it was more effective to rebuild the styles in Blend it also has the advantage that I can show the designer in Blend the visual created and make any additional tweaks required.

I used the same technique for the F1 GP races and the watches area all of which have strongly typed data objects to encapsulate the visual information providing me with the advantages mentioned above to create and adapt quickly with the changes to the visual designs, it also allows me to take advantage of OO when it comes to adding additional properties to the base classes which will have a ripple effect down the object hierarchy.

In your next POC or prototype in WPF I hope that you will feel confident enough to try out this technique and reap the benefits that are at your disposal. Unfortunately the current version of Silverlight does not support implicit data templates, which in my humble opinion is a fundamental missing part of the Silverlight framework. Hopefully we will see this in a future release.

In the next post I am going to dig into how I built the watches section of the application and also dive into how interactions with the watch chrome and its content were created.

This is really the start of a number of posts that I have been meaning to put together for a while now. These are centred around how to rapidly build prototypes. It’s a technique that I use on a regular basis both for WPF and for Silverlight. In order for me to get across how effective this is it seems only right to provide context of how you can also take advantage of this technique.

More about that later, for this particular implementation I partnered with Splendid in order to produce an interactive experience for travellers at London Heathrow T5 lounges. The brief was to help raise brand awareness of the new Tag Heuer watches available and take advantage of the collaborate aspects provided by Surface.

The Tag Heuer Surface application has three main areas of functionality, all driven by the concept of time.

Travel Guide: The application displays the current time at your departure destination, displayed on a Tag Heuer watch display with moving hands. Using a stylized world map passengers can choose popular destinations and explore local time, travel duration and view local landmarks.

Sports Finder: Tag Heuer have a number of sports stars as ambassadors, we chose Lewis Hamilton as the trial location was the UK. Passengers can explore the world find the next Grand Prix including a  countdown and images of last years race.

Watch Explorer: A Tag Heuer Application wouldn’t be quite right without the ability to explore their classic  watch collection, passengers can use gesture to explore high-res images of the men’s and women’s collections with the ability to sign-up for an email on your favourite watch. The email contains details of the watch and your nearest location to purchase.







For a UX developer there are some really rather cool interactions used in each of the areas. I am going to try and give a higher level overview of these areas  below and then jump into the detail in separate posts. The first of these are interactions present in each of the different functional pillars of the experience illustrated above and were designed so that visual elements could be placed into specific areas, animation of these items on and off screen and designed in such away that data bound objects provided the visual positioning information. The solution I used here was a combination of strongly typed data templates with model objects that contained the required coordinates of where to be positioned on screen and styles to create the required interactions.

When deconstructing the visual design I knew that the ScatterView Control would do the job nicely and having the coordinates in the model meant that we can take full advantage of data binding as each ScatterView Item has a centre and orientation DP which can be used to achieve this layout. Using a different ScatterViewItem Style provided the ability to choose different interactions and visuals based on which area of functionality is in use. Note there are 2 styles for the map points; a style for map points which are right aligned and a style for those which are left aligned. Using the strongly typed data templates and the use of data binding provides a clean and easy to achieve solution that provided the required interactions. The application was aware of its state and by changing the data based on state the usage of the strongly typed data templates come into their own as these state changes are triggered resulting in the new visuals to be displayed all done using data and data bindings in the Xaml.

For the travel section animated clocks were used and the TimeZoneInfo class provided the ability  to calculate the time in different time zones. Here I used a dispatch timer that was ticking away and then updating the value of the data object. Each of the different time zones were associated data objects of the current location using data binding and INPC meant that we can change the time in the data object and this will trigger the animations used to rotate the hands on the watch.

The watch section has cool interaction where there is a 2 level zoom mechanism, I broke this one down to be a ScatterViewItem which wraps a ScatterView. This allowed for an interaction which meant the user could  use a pinch gesture in increase the size of the outer ring and then a second pinch gesture can be used to manipulate the watch being displayed. What I like about this interaction design is that it allows the user to easy move and collaborate with other users interested in seeing the detailing of the watch. More importantly this also meant that I could take full advantage of data binding and strongly typed data templates.

As you may have noticed there is an underlying theme happening here, data and Xaml. For me WPF is really all about your data, get the data structure right that needs to be presented on screen and we can take full advantage of the framework and reduce the amount of C# code we write to a minimum.

links

The Moodie Report http://www.moodiereport.com/document.php?c_id=1113&doc_id=23335

As promised I have stashed all the final code examples up on my skydrive folder so that you can download and play with the samples. As we ran out of time in the last session what I will do in the next week or so is to record a Camtasia session and capture what I unfortunately did not get time to go over during the session.

I have named the zip files as intuitively as possible so these line up with the title of the session.

What I also wanted to briefly mention is that in the MEF and Ninject demos you will see that I am using Commands from the Silverlight Extensions project on CodePlex. The command pattern that is used here is a standard command pattern common to WPF. In the current release there is no support for Commands so what you will see included in the projects are the Command classes that I need in order to harness the power of Commands.

In a previous life I wrote a post on WPF commands that you may want to take a look at if you are not familiar to the Command pattern used in WPF and how it helps to separate out UI logic into you View Model and helps increase the testability of your code that responds to the behaviours in your application. The refactor that I did here was to remove the click event handler on the button and replace this with a command. There are 3 steps for refactoring out the event handler.

First we need to create a commands.cs file and create a Commands class which will hold all our commands associated with our view model. In essence we are going to be providing a list of possible actions that the View Model can perform in relation to the view. Once we have created the class we need to define our commands that we want which in our demo is called RefreshFeedItems then we need to add in public mechanism so that we can invoke the command from the view so that it can be wired up to a button.

using StandardViewModel.SLExtensions.Input;

public class Commands
{
      private static readonly Command refreshFeeds = new Command(RefreshFeedItems);

      public static Command RefreshFeedItems

      { get { return refreshFeeds; } } }

Now that we have defined the command that we want to fire we need to do the second part which is to wire up the command in the Xaml of the view.

     Input:CommandService.Command=RefreshFeedItems

     <Button Content=Refresh
                    Grid.Column=2
                    Margin="3,3,3,3"
                    IsEnabled="{Binding IsRefreshEnabled}"
                    Input:CommandService.Command="RefreshFeedItems" />

We can now remove the click handler code behind of the view.

The finally part is to implement the CanExecute and Executed code in the ViewModel, so move into the Constructor of the ViewModel and here wire up the commands.

       Commands.RefreshFeedItems.CanExecute += (sender, args) args.CanExecute = true;
       Commands.RefreshFeedItems.Executed += delegate(object sender, ExecutedEventArgs args)
         {
                        Refresh();
         };

And we are done. Enjoy. One thing to note is that there are other types of commands, RelayCommand and DelegateCommand which are also very cool black belt ninja moves for dealing with separation when building your MVVM apps

What we are going to cover here is the journey which i went on when adding support for design time data to my project, I really like it as the refactoring from the standard inbuilt mechanism in Blend to the final output is a nice series of steps that feel good.

The screen shot on the right shows the simple looking UI displaying contextual data in Blend allowing the designer to see how the control will look. I think providing the ability for your application to look exactly the same at design time as at run time is going to mean that you can produce better looking applications quicker as the designer is design the screens in the context of the data.

When first adding the design time data to your project Blend takes over control and this means that you need to use Blend to shape your design time data classes to match your data types used in the system. So if we were building a throw away prototype then I would agree this is the best way forwards, but when you are moving from prototype to production this does not really work. On of the reasons behind the research for this post is around the transition from prototype to production and even from sketch to prototype, once we have sign off from the client on a number of ideas and we want to start to build these out then there is a high potential one will become production quality and because of this its good to have the right architecture in place, so reshaping to MVVM early on will almost certainly cost your client less.

The Xaml below is what i put together to represent the shape of data that was in the mock classes. Blend then hooks this data up to the design time data context for you.

Xaml data for shopping cart

<local:ShoppingCartViewModel xmlns:local="clr-namespace:DesignDataSample;assembly=DesignDataSample">
    <local:ShoppingCartViewModel.ShoppingCart xmlns:local="clr-namespace:DesignDataSample;assembly=DesignDataSample">
        <local:ShoppingCart>
            <local:ShoppingCart.Items>
                <local:ShoppingCartItem ItemName="Book Name 1"
                                        ItemDescription="A very nice book!"
                                        ItemImage="MySampleDataImages/Tree.jpg" />
                <local:ShoppingCartItem ItemName="Book Name 2"
                                        ItemDescription="A very nice book!"
                                        ItemImage="MySampleDataImages/Tree.jpg" />
                <local:ShoppingCartItem ItemName="Book Name 3"
                                        ItemDescription="A very nice book!"
                                        ItemImage="MySampleDataImages/Tree.jpg" />
                <local:ShoppingCartItem ItemName="Book Name 4"
                                        ItemDescription="A very nice book!"
                                        ItemImage="MySampleDataImages/Tree.jpg" />
            </local:ShoppingCart.Items>
        </local:ShoppingCart>
    </local:ShoppingCartViewModel.ShoppingCart>
</local:ShoppingCartViewModel>

When the design time data shape matches your real data shape you can then go ahead and use the new d:DataContext Dependency Property and bind your design time data to this property.

Xaml Source code for the control

<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"
             mc:Ignorable="d"
             x:Class="DesignDataSample.ShoppingCartView"
             d:DataContext="{d:DesignData Source=ShoppingCartSampleData.xaml}"
             DataContext="{Binding Path=ShoppingCartViewModel, Source={StaticResource serviceLocator}}"
             Height="347"
             Width="494">

Nothing too tricky there, the new design time data context is the key to making all this happen, it also means that you can bind any sort of data you want to the design time data context to provide contextual data in Blend during design time. It was at this point that i started to think about how we can really bend the design time data features. My initial refactor was not a great result in that I ended up with 2 sets of mock data; one set of data would be used by the designers in Blend; and the second set of data would be used by the unit test, Not nice, management nightmare to ensure that both data sets are keep in sync.

So the goal was to provide design time data which was the same data used by the unit tests, meaning that we only have one data set to maintain and manage, allowing us to leverage the powerful features of design time data in Blend and also keeping our unit tests looking sweet, pleasing both the designers and the developers on the team.

In order to do this I needed to restructure the existing shape of my data classes that I use in my mock service layer classes, first I needed to change the OnCompleted method to be a virtual implementation and also the method which retrieves the data. This simple change means that we can now provide two mock services that can be injected in.

Refactored mock service class with new virtual methods

    using System;
    using System.Collections.ObjectModel;

    public class MockShoppingCartService : IShoppingCartService
    {
        public event GetShoppingCartCompletedHandler GetShoppingCartCompleted;

        public bool LoginToShoppingCart(string username, string password)
        {
            throw new System.NotImplementedException();
        }

        public virtual void RetrieveShoppingCart()
        {
            this.OnGetShoppingCartCompleted(null, MockShoppingCartData.CreateShoppingCartRuntime());
        }

        protected virtual void OnGetShoppingCartCompleted(Exception error, ShoppingCart result)
        {
            if (this.GetShoppingCartCompleted != null)
            {
                this.GetShoppingCartCompleted(new GetShoppingCartCompletedEventArgs(error, result));
            }
        }
    }

The new mock service class which is used specifically for working with Blend

namespace DesignDataSample.Mocks
{
    public class MockShoppingCartServiceDesignData : MockShoppingCartService
    {
        public override void RetrieveShoppingCart()
        {
            this.OnGetShoppingCartCompleted(null, MockShoppingCartData.CreateShoppingCartDesigntime());
        }
    }
}

How we can use ninject to inject the service we want to use, design time data, mock or real.

this.Bind<IShoppingCartService>().To<MockShoppingCartService>().OnlyIf(c => isBrowser);
this.Bind<IShoppingCartService>().To<MockShoppingCartServiceDesignData>().OnlyIf(c => isBlend);
this.Bind<IShoppingCartService>().To<ShoppingCartService>().OnlyIf(c => isBrowser);
this.Bind<ShoppingCartViewModel>().ToSelf();

Xaml code for how we leverage the data context and the new design time data context for providing contextual data.

<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"
             mc:Ignorable="d"
             x:Class="DesignDataSample.ShoppingCartView"
             d:DataContext="{Binding Path=ShoppingCartViewModel, Source={StaticResource serviceLocator}}"
             DataContext="{Binding Path=ShoppingCartViewModel, Source={StaticResource serviceLocator}}" Height="347" Width="494">
<!--d:DataContext="{d:DesignData Source=ShoppingCartSampleData.xaml}"-->
    <UserControl.Resources>
        <DataTemplate x:Key="ShoppingCartItemTemplate">
            <Grid Height="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Image Source="{Binding ItemImage}"
                       Grid.RowSpan="2" />
                <TextBlock Text="{Binding ItemName}"
                           Grid.Column="1"
                           Margin="4,0,0,0" />
                <TextBlock Text="{Binding ItemDescription}"
                           Grid.Column="1"
                           Grid.Row="1"
                           Margin="4,0,0,0" />
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          Background="#FFB2B2B2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="129" />
            <ColumnDefinition Width="121" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <ListBox Margin="8,8,8,26"
                 Grid.ColumnSpan="3"
                 ItemsSource="{Binding Mode=OneWay, Path=ShoppingCart.Items}"
                 ItemTemplate="{StaticResource ShoppingCartItemTemplate}" />
        <TextBlock Grid.Row="1"
                   Text="Total Items:"
                   TextWrapping="Wrap"
                   Grid.Column="1" />
        <TextBlock Grid.Column="2"
                   Grid.Row="1"
                   Text="{Binding ShoppingCart.Items.Count}"
                   TextWrapping="Wrap" />
    </Grid>
</UserControl>

So I hope that this article has opened your eyes to how useful design time data can be to enhance the Blendability of the controls which you produce both lookless and user. In the majority of cases designers that you are working with really like that they can view the control at deign time how it will appear when running in your application and populated with data.  When implementing the MVVM pattern in you application incorporating support for design time data is also possible and provides you with the ultimate Xaml Ninja experience.

You can download the source from my Skydrive.