Preview xaml layout with specific sample data

Question

I'm developing a WP7 application, and I'm generating a listbox with a few items. I was wondering if there is a way to preview how the layout would look. So far, since the elements don't exist, I can't "preview" them. Is there some way to feed some dummy data or other methods that would help in previewing xaml layouts ?

Answer 1

First - it helps if you use MVVM, or at least ItemsSource binding + ItemTemplate to display your items. Once you are there - Expression Blend has some great tools for sample data.

You go to Data tab, click Create Sample Data/New Sample Data. It will create a sample data as XAML and bind your page to it like that:

d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"

Then you can add new properties, model collections with different data types and it will automatically generate some data you can use in your XAML.

Answer 2

You should provide a designer data.

There are several ways to do it.

One of the simplest, is to provide a DataContext in your XAML declaration for designer to use when rendering your page display.

In Xaml page declaration:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d:DataContext="{d:DesignInstance local:DesignerSampleData, IsDesignTimeCreatable=True}"

The sample data class should have the data that your visual elements bind to:

public class DesignerSampleData: INotifyPropertyChanged
    {
        public DesignerSampleData()
        {
            _sampleData = "My test string that will display in VS designer for preview";
        }

        private String _sampleData;
        public String SampleData
        {
            get { return _sampleData; }
            set
            {
                if (value != _sampleData)
                {
                    _sampleData = value;
                    NotifyPropertyChanged("SampleData");
                }
            }
        }

In xaml bind to SampleData:

<TextBlock Text="{Binding SampleData}" />