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.
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.
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
Next select ViewModel as the object to create the data source for
This will create a XAML file populated with sample data, which has been modified to be the colors of the rainbow.
When it comes to designing applications it’s definitely a lot easier when you can visualize what you’re creating without actually running the solution.
So why should it be any different for Silverlight and WPF?
If you just want to know how you can populate controls during design time the links below show three (of the many) ways you can populate your pages, windows, user controls, grids etc with sample data in Expression Blend or Visual Studio.
If we run this application this is what is shown to the user.
As you can see there is a problem with the ListBoxItem not stretching to the width of the grid.
If you had used deign time data this is what you would have seen in Expression Blend.
Still not convinced design time data will help you?
Well in that case have fun implementing a fix, running the application, implementing another fix, running the application again until you’ve resolved the issue or ran out of time.
Jag Reehal’s Final Thought on ‘How design time data will save you time designing Silverlight and WPF applications’
Designing is so much easier when you’re able to see controls populated with sample data because you will be able to find and resolve design issues and problems quicker using design time data.
In this post I’ll be showing how you can use the DesignerProperties.IsInDesignTool property to populate controls when you’re designing Silverlight applications in Expression Blend.
This solution does not work in Visual Studio 2010. To find out about what options do work in Visual Studio check out the following posts:
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.
As you can see it’s difficult if not impossible to imagine what we are actually designing here.
Creating a ViewModelProvider a.k.a ViewModel ServiceLocator
Essentially what we want is to use a ViewModel populated with sample data during design time and the actual ViewModel when the application is running.
To do this we can use the ViewModel and DesignTimeViewModel classes 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 DesignTimeViewModel : ViewModel
{
public DesignTimeViewModel()
{
Name = "Roy G Biv";
RainbowColors = new ObservableCollection<RainbowColor>()
{
new RainbowColor() {Description = "Red", Color = "#FFFF0000"},
new RainbowColor() {Description = "Orange", Color = "#FFFFA500"},
new RainbowColor() {Description = "Yellow", Color = "#FFFFFF00"},
new RainbowColor() {Description = "Green", Color = "#FF008000"},
new RainbowColor() {Description = "Blue", Color = "#FF0000FF"},
new RainbowColor() {Description = "Indigo", Color = "#FF4B0082"},
new RainbowColor() {Description = "Violet", Color = "#FFEE82EE"}
};
}
}
public class RainbowColor
{
public string Description { get; set; }
public string Color { get; set; }
}
A provider/service locater class allows Expression Blend to determine which ViewModel to use.
public class ViewModelProvider
{
public ViewModel ViewModel
{
get
{
if (DesignerProperties.IsInDesignTool)
{
return new DesignTimeViewModel();
}
return new ViewModel();
}
}
}
Setting the DataContext to use the ViewModelProvider in XAML
In order to bind the sample data to the user control during design time we need to add a line in the opening tag, create a resource and set the data context to use the ViewModel returned by the provider/service locator.
The lines to do this are highlighted in the XAML for the user control below.
