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.
In this post I’ll be showing how you can use a DesignInstance 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 to bind the data context using DesignInstance
The code below shows the DesignTimeViewModel class to be used as the data context during design time. It inherits from the ViewModel class which will be used when the application is actually running.
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 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; }
}
Setting the DataContext to use DesignInstance in XAML
In order to bind the DesignTimeViewModel to the user control during design time we need to add a few more lines in the opening tag.
The lines that use a DesignInstance to bind data in the designer are highlighted in the XAML for the user control below.
