Design-Time Data

It can be difficult and time consuming constructing a page or control without knowing how the content will appear at runtime. The dimensions of images can disturb the layout, as can the length of text and text wrapping settings. The d:DataContext markup extension, which exists in the http://schemas.microsoft.com/expression/blend/2008 namespace, allows you to simulate the runtime DataContext of a control with a design-time object (see Figure 3.13).

FIGURE 3.13 The d:DataContext markup extension provides for design-time sample data.

Here a design-time instance of the ProductDetailsViewModel class presents some sample data to improve the design-time experience of the developer or designer.

The content StackPanel includes a d:DataContext attribute, which causes a ProductDetailsViewModel instance to be loaded from a sample data file, as shown in the following excerpt:

Click here to view code image

<StackPanel Grid.Row="1"
    Style="{StaticResource PageContentPanelStyle}"
    d:DataContext="{d:DesignData Source=ProductDetailsViewSampleData.xaml}">
    ...
</StackPanel>

You can see that the d:DesignData markup extension has its Source property set to the location of a sample data file, ProductDetailsViewSampleData.xaml. The sample data file defines the property values of the viewmodel (see Listing 3.13). The design-time environment of Visual Studio or Expression Blend instantiates the sample viewmodel at design-time.

LISTING 3.13. ProductDetailsViewSampleData.xaml

Click here to view code image

<local:ProductDetailsViewModel
        xmlns:local="clr-namespace:DanielVaughan.WPUnleashed
            .Examples.Navigation"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:BookshopServiceReference="clr-namespace:DanielVaughan
            .WPUnleashed.Examples.BookshopServiceReference">
    <local:ProductDetailsViewModel.Product>
        <BookshopServiceReference:Product
            Id="1"
            Title="Windows Phone 8 Unleashed"
            Author="Daniel Vaughan"
            Description="The complete guide to programming..."
            Price="37.79"
            Isbn10="0672336898"
            Isbn13="978-0672336898"
            SmallImageUri="/DanielVaughan.WPUnleashed
                .Examples;component/Navigation/Images/Product01Small.jpg"
            LargeImageUri="/DanielVaughan.WPUnleashed
                .Examples;component/Navigation/Images/Product01Large.jpg"
            ExternalUrl="
                http://www.amazon.com/Windows-Phone-Unleashed-Daniel-Vaughan/dp/0672333481/"
        />
    </local:ProductDetailsViewModel.Product>
</local:ProductDetailsViewModel>

Notice the relative component URIs of the images. The design-time environment will fail to resolve the image location unless relative component URIs are used and the build action of the image is set to Resource.