Design data in wpf

Question

I have a usercontrol and viewmodel that exsposes a property Reports. The datacontext of usercontrol is bound to the viewmodel.

In the control i have a listbox the listbox is bound to property Reports

<ListBox x:Name="ReportListBox" ItemsSource="{Binding Reports}"

                 ItemTemplate="{StaticResource reportItemTemplate}"
                 IsSynchronizedWithCurrentItem="True"
                 Visibility="Visible" SelectionMode="Single">
</ListBox>

What i want is to have some design data so i created a xaml file like this.

<m:Reports xmlns:m="clr-namespace:MYAPP.Modules.ReportList.Models">
    <m:Report ReportName="Reportname 1" Id="AAAA-BBB-CCC" ></m:Report>
    <m:Report ReportName="Reportname 2" Id="AAAA-BBB-CCC" ></m:Report>
</m:Reports>

If i do like this nothing is shown in VS design. If i change the binding of the listbox to

 <ListBox x:Name="ReportListBox" ItemsSource="{Binding}"

I can see the values in design. I realize why this is the case as the usercontrol is bound to the viewmodel at runtime. What i think i need for the designdata is something like this

<mc:ReportListViewModel  xmlns:mc="clr-namespace:MYAPP.Modules.ReportList.ViewModels">
    <m:Reports xmlns:m="clr-namespace:MYAPP.Modules.ReportList.Models">
        <m:Report ReportName="Reportname 1" Id="AAAA-BBB-CCC" ></m:Report>
        <m:Report ReportName="Reportname 2" Id="AAAA-BBB-CCC" ></m:Report>
    </m:Reports>
</mc:ReportListViewModel>
</m:Reports>

But im getting the error. "The type 'ReportListViewModel' does not support direct content". Anyone has a solution

score 3 · Accepted Answer · answered Jan 24 '12 at 14:43

One way of getting design time data would be to create 2 view models in your code. One would be your normal runtime view model. The second you could stub out with dummy data. Then in your xaml you can selectively set your data context while in the designer by setting Datacontext prefixed with the blend namespace

<Page
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    d:DataContext="{StaticResource DummyViewModel}">

Then create an instance of your object in your resources

<Page.Resources>
    <local:DummyViewModelClass x:Key="DummyViewModel">
</Page.Resources>

It's an easy solution for quick prototyping but may not necessarily scale well.

An alternative is to in code recognize that you are in design mode and change the way your view model gets populated by using some helper methods added to your class. Here is an example of that method.

http://blogs.msdn.com/b/delay/archive/2009/02/26/designerproperties-getisindesignmode-forrealz-how-to-reliably-detect-silverlight-design-mode-in-blend-and-visual-studio.aspx

Thanks for answer i tried your first solution, but only way i can get it to work is if i put d:DataContext inside Listbox. If i put it Page, or in my case UserContrl then it says "Resource cant be resolved" — klashagelqvist, Jan 24 '12 at 15:32

Design data in wpf

1 Answers1