Windows 10 UWP

Adding Design-Time data for UWP and Caliburn Micro

I’ll demonstrate how you can do this in UWP and Caliburn Micro. It’s easy to do and makes life so much easier when trying to design content in something like a ListView,

This blog post assumes you understand the basics of Caliburn Micro.

View Model

Let’s assume we have a View Model like this. The key thing to point out is the statement with if(Execute.InDesignMode). Within here we are creating some sample data.

public class TeamSetupViewModel : Screen
    public TeamSetupViewModel()
            Teams = new BindableCollection<Team>()
                new Team() {TeamName= "All Blacks", Country= "New Zealand"},
                new Team() {TeamName= "Springboks", Country= "South Africa"},
                new Team() {TeamName= "Wallabies", Country= "Australia"}

    private BindableCollection<Team> _teams;
    public BindableCollection<Team> Teams
        get { return _teams; }
            _teams = value;
            NotifyOfPropertyChange(() => Teams);


In the View we will have a ListView called Teams. Since we’re using Caliburn Micro this will automatically set the ItemSource for me.

The only changes we’re making here is in the page definition.

  • We define the data context, in the design¬†instance, as being our View Model
  • Tell Caliburn Micro to bind at design time
<Page x:Class="MyApp.Views.TeamSetupView" xmlns="" xmlns:x="" xmlns:d="" xmlns:mc="" xmlns:micro="using:Caliburn.Micro" xmlns:vm="using:MyApp.ViewModels" mc:Ignorable="d" d:DataContext="{d:DesignInstance Type=vm:BlockSetupViewModel, IsDesignTimeCreatable=True}" micro:Bind.AtDesignTime="True">

    <ListView x:Name="Teams">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text={Binding TeamName} />
                    <TextBlock Text={Binding Country} />


Do this and your design time data will spring to life in Visual Studio!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: