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 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.
