Preview xaml layout with sample specific data

Question

I am developing a WP7 application and I am creating a list with several items. I was wondering if there is a way to see how the layout will look. So far, since the elements do not exist, I cannot "view" them. Is there a way to provide some dummy data or other methods that would help in previewing xaml layouts?

Answer 1

You must provide designer data.

There are several ways to do this.

One of the easiest is to provide a DataContext in the XAML ad for the designer to use when rendering your page.

In the Xaml page declaration:

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

The sample data class must contain the data that your visual elements are associated with:

 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, it binds to SampleData:

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

Answer 2

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

Go to the Data tab, click Create Sample Data / New Sample Data. It will create a sample data like XAML and bind your page to this:

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

Then you can add new properties, collections of models with different data types, and automatically generate some data that you can use in your XAML.