How to use DesignData to populate controls with design time data in Silverlight and WPF

In this post I’ll be showing how you can use DesignData to populate controls when you’re designing Silverlight or WPF applications in Expression Blend or Visual Studio.

The image below shows a user control in Expression Blend which allows users take part in a poll to find out what their favorite colors of the rainbow are.

Expression Blend Without Design Time Data

As you can see it’s difficult if not impossible to imagine what we are actually designing here.

The user control doesn’t look any better in Visual Studio 2010.

Visual Studio Without Design Time Data

Creating the ViewModel for the Object Data Source

The code for the ViewModel we want to create sample data for is shown below.

public class ViewModel : INotifyPropertyChanged
{
    private string _name;

    public event PropertyChangedEventHandler PropertyChanged;

    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged("Name");
        }
    }

    public ObservableCollection<RainbowColor> RainbowColors { get; set; }

    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this,
                new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class RainbowColor
{
    public string Description { get; set; }
    public string Color { get; set; }
}

The bit where Expression Blend flexes it muscles

If you’re using Expression Blend the good news is that creating sample data can be done in a couple of clicks.

In the Data tab click on the ‘Create data source’ button to see the following window

Expression Blend Without Design Time Data

Next select ViewModel as the object to create the data source for

Expression Blend Without Design Time Data

This will create a XAML file populated with sample data, which has been modified to be the colors of the rainbow.

<DeginTimeDataInSilverlightApplications:ViewModel 
    xmlns:DeginTimeDataInSilverlightApplications="clr-namespace:DeginTimeDataInSilverlightApplications" 
    Name="Roy G Biv">
	<DeginTimeDataInSilverlightApplications:ViewModel.RainbowColors>
        <DeginTimeDataInSilverlightApplications:RainbowColor Color="#FFFF0000" Description="Red"/>
        <DeginTimeDataInSilverlightApplications:RainbowColor Color="#FFFFA500" Description="Orange"/>
        <DeginTimeDataInSilverlightApplications:RainbowColor Color="#FFFFFF00" Description="Yellow"/>
        <DeginTimeDataInSilverlightApplications:RainbowColor Color="#FF008000" Description="Green"/>
        <DeginTimeDataInSilverlightApplications:RainbowColor Color="#FF0000FF" Description="Blue"/>
        <DeginTimeDataInSilverlightApplications:RainbowColor Color="#FF4B0082" Description="Indigo"/>
        <DeginTimeDataInSilverlightApplications:RainbowColor Color="#FFEE82EE" Description="Violet"/>
    </DeginTimeDataInSilverlightApplications:ViewModel.RainbowColors>
</DeginTimeDataInSilverlightApplications:ViewModel>

Creating DesignData in Visual Studio

In Visual Studio you have to create the XAML file manually and change the build action for it to DesignData as shown below.

Visual Studio BuildAction For DesignTimeData

My recommendation is to store the XAML files containing sample data in a SampleData sub folder (which Expression Blend does by default).

Setting the DataContext to use DesignData in XAML

In order to bind the sample data to the user control during design time we need to add a few more lines in the opening tag.

The lines that use DesignData to bind data in the designer are highlighted in the XAML for the user control below.

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="DeginTimeDataInSilverlightApplications.MainPage"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"        
	d:DataContext="{d:DesignData Source=./SampleData/ViewModelSampleData.xaml}"	
	d:DesignWidth="600">
    <UserControl.Resources>
        <DataTemplate x:Key="RainbowTemplate">
            <Border Background="{Binding Color}">
                <StackPanel Margin="10" Orientation="Horizontal">
                    <CheckBox/>
                    <TextBlock Text="{Binding Description}" 
                               Foreground="Black" 
                               FontWeight="Bold" />
                </StackPanel>
            </Border>
        </DataTemplate>
        <Style x:Key="ListBoxStretchStyle" TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <TextBlock Text="Choose your favorite colors!" 
                       Margin="5" 
                       TextAlignment="Center" 
FontWeight="Bold" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Name:" Margin="10" VerticalAlignment="Center" />
                <TextBox Text="{Binding Name}"  Grid.Column="1"  VerticalAlignment="Center"/>
                <Button Content="Submit" Grid.Column="2" Margin="10"  Width="100" Height="50"/>
            </Grid>
			<ListBox ItemsSource="{Binding RainbowColors}" 
					 ItemContainerStyle="{StaticResource ListBoxStretchStyle}" 
					 ItemTemplate="{StaticResource RainbowTemplate}"/>
        </StackPanel>
    </Grid>
</UserControl>

Pay attention to the line

mc:Ignorable="d"

If you don’t add this you will see the following error when you try to compile the solution

XAML Namespace http://schemas.microsoft.com/expression/blend/2008 is not resolved.

If you’re using Expression Blend the designer will now look like this

Expression Blend With Design Time Data

or like this if you’re using Visual Studio 2010

Visual Studio With Design Time Data

Does it matter if I’m using MVVM or not?

No. Even though I’m using a ViewModel in this example, all that matters is that you can bind your sample data to the data context of the control.

Comments

  • Andrew Ipson

    How did you know what the hex values to use?

  • http://www.arrangeactassert.com Jag Reehal

    Hi Andrew,

    I used the Brushes Class information on MSDN.

    Cheers,

    Jag

  • Timothy Lin

    Hey Jag,

    Great article, I’ve followed your steps however I am getting the error “The file ..xaml is not part of the project or its ‘Build Action’ project is not set to ‘Resource’ on the line… d:DataContext=”{d:DesignData Source=./DesignTimeData/SiteDesignTimeData.xaml}”

    Any ideas mate?

    Cheers,

    Tim.

  • http://www.arrangeactassert.com Jag Reehal

    Timothy,

    Have you checked what the build action is for the file in the properties box?

    Cheers,

    Jag

  • http://profiles.google.com/gav.aiken Gavin Aiken

    Use an absolute path rather than a relative one (Drop the leading ‘.’)

  • Simon

    Hi Jag,

    Worked a treat. Much more understandable than the MSDN version

  • VBigham

    Excellent post.  Thank you Jag!