With the introduction of design time data support in Blend I thought that I would try and take advantage of using design time data and MVVM. For a while now I have been using Ninject, with a Service Locator Pattern to provide the ability to build WPF and Silverlight apps in an MVVM pattern where I prefer to use a View first mechanism. There are a number of benefits from using this approach, one of the ones that we are good to drill to in this post is around Blendability of the controls that developers create. Prior to me using Ninject I would have a heavy reliance on the DesignerProperties IsInDesignMode call to check to see if the control was being render in Blend, as i would normally have to do something to stop the control from crashing and allow myself and the designer to use Blend in order for us to Style and Template the controls we created.
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.
