Over the last week I have been playing around with Silverlight and the Model View View Model (MVVM) pattern that I have heard such great things about. So far it is a really nice way to separate the UI logic from the UI and make it easily testable.

One of the things I loved in Silverlight was the support for design time data. Design time data allowed you to specify dummy data that would appear in VS/Blend so that you could work with the UI with sample data. This saves so much time as now you don’t have to open the app, (possibly login), navigate to the area you are working on, and then see if you have it the way you want.

The challenge was now to combine MVVM and this dummy design time data. It is a lot simpler than I thought. I simply created a dummy View Model that inherited from my runtime VM and loaded it with sample data.

Runtime ViewModel:
public class SummaryViewModel : BaseViewModel
    {
        public int MoviesOwned { get; set; }
        public int MoviesCurrentlyRentedOut { get; set; }
        public ObservableCollection<Category> Categories { get; set; }

        private readonly MovieServiceClient _service;
        public SummaryViewModel()
        {
            _service = new MovieServiceClient();
            _service.GetAllCategoriesCompleted += GetAllCategoriesCompleted;
            if (!System.ComponentModel.DesignerProperties.IsInDesignTool)            
                _service.GetAllCategoriesAsync();
        }

        private void GetAllCategoriesCompleted(object sender, GetAllCategoriesCompletedEventArgs e)
        {
            Categories = e.Result;
            InvokePropertyChanged(“Categories”);
        }
    }

Design Time View Model:
  public class DesignTimeSummaryViewModelViewModel : SummaryViewModel
    {
        public DesignTimeSummaryViewModelViewModel()
        {
            Categories = new ObservableCollection<Category>();
            Categories.Add(new Category() { Name = “Design Time Test” }); ;
            Categories.Add(new Category() { Name = “Design Time Test 2″ }); ;
            Categories.Add(new Category() { Name = “Design Time Test 3″ }); ;
            MoviesOwned = 10;
            MoviesCurrentlyRentedOut = 5;
        }
    }

Summary.xaml view (designer info in orange, runtime in blue):
<UserControl x:Class=”MovieRental.UI.MainPage”
    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:local=”clr-namespace:MovieRental.UI.ViewModels”
    mc:Ignorable=”d”
    d:DesignHeight=”300″ d:DesignWidth=”400″
    d:DataContext=”{d:DesignInstance Type=local:DesignTimeSummaryViewModelViewModel,IsDesignTimeCreatable=True}”

    >
    <UserControl.Resources>

        <local:SummaryViewModel x:Key=”vm” />

    </UserControl.Resources>

    <UserControl.DataContext>

        <Binding Source=”{StaticResource vm}” />

    </UserControl.DataContext>

    <Grid x:Name=”LayoutRoot” Background=”White”>
        <StackPanel>
            <StackPanel Orientation=”Horizontal”>
                <TextBlock Text=”Movies Owned” />
                <TextBlock Text=”{Binding MoviesOwned}” Padding=”7,0,0,0″/>
        </StackPanel>
        <StackPanel Orientation=”Horizontal”>
                <TextBlock Text=”Movies Rented”/>
                <TextBlock Text=”{Binding MoviesCurrentlyRentedOut}” Padding=”7,0,0,0″ />
        </StackPanel>
            <ListBox ItemsSource=”{Binding Categories}” DisplayMemberPath=”Name”>
            </ListBox>
        </StackPanel>
    </Grid>
</UserControl>

So far this is working pretty good. The thing that surprised me is that the designer still runs the runtime ViewModels constructor so I had to put a check in around my WCF call to make sure it did not run in the designer via the      System.ComponentModel.DesignerProperties.IsInDesignTool line of code.