Design-time view models

Lots of developers are using designers such as the built-in designer in Visual Studio or Expression Blend to design their xaml based applications. Although you should use designers with lots of care, we strive to fully support all designers.

Since Catel 1.3, it is possible to create design-time versions of a view model. This way, you can preview the UserControl or DataWindow implementations using example data.

To create design-time support for a data window, use the following steps:

1. Create a design time view model. Normally, this can easily be achieved by deriving a new class from the actual view-model and inject the model. Below is an example of a design time version of a person view model:

/// <summary>
/// Design time version of the <see cref="PersonViewModel"/>.
/// </summary>
public class DesignPersonViewModel : PersonViewModel
    /// <summary>
    /// Initializes a new instance of the <see cref="DesignPersonViewModel"/> class.
    /// </summary>
    public DesignPersonViewModel()
        : base(new Person { FirstName = "Geert", MiddleName = "van", LastName = "Horrik", Gender = Gender.Male })

2. Define the type of the design time view model.

d:DataContext="{d:DesignInstance ViewModels:DesignPersonViewModel}"

If you want it to actually show demo data (instead of allowing to configure bindings), use IsDesignTimeCreatable:

d:DataContext="{d:DesignInstance ViewModels:DesignPersonViewModel, IsDesignTimeCreatable=True}"

Full DataWindow declaration:

<catel:DataWindow x:Class="Catel.Examples.PersonApplication.UI.Windows.PersonWindow"
                  d:DataContext="{d:DesignInstance ViewModels:DesignPersonViewModel, IsDesignTimeCreatable=True}">
  1. Example of design time data support:


We would like to thank the following contributors:

Want to contribute to the documentation? We have a guide for that!


Have a question about Catel? Use StackOverflow with the Catel tag!