WPF Design-time Data Binding to Sample Data

Question

WPF, C#, .Net 4.52, Visual Studio 2015, MVVM, Prism/Unity, Telerik UI for WPF - so my listbox is actually a "RadListBox" control

Based on the following class pseudo-structure which gets populated from database calls at run-time:

<Process>
    <Steps>
        <Step>
            <Submodules>
                <Submodule>
                <Submodule>
                <Submodule>
            </Submodules>
        </Step>
        <Step>
            <Submodules>
                <Submodule>
            </Submodules>
        </Step>
    </Steps>
</Process>

I have a view model with a property called SelectedStep which represents the current step. It is of type Step .

I have a view with a listbox control whose ItemsSource property is bound to SelectedStep.SubModules . Works great at runtime and shows me the list of submodules for the selected step.

But I want to see a list of sub modules at design time so I can style the list. So I created some sample data in a file called Step.xaml whose structure looks exactly like this:

<Step>
    <Submodules>
        <Submodule>
        <Submodule>
        <Submodule>
    </Submodules>
</Step>

There is only one step defined because I'm only going to show a single step's sub modules at design time. There's no selecting steps as there would normally be at run-time.

To be able to bind to the sample data, I added the following attribute to the listbox: d:DataContext="{d:DesignData Source=Step.xaml}"

With the listbox's ItemsSource="{Binding SelectedStep.SubModules}" which is correct at run-time, I don't see anything at design time. I have to change it to ItemsSource="{Binding SubModules}" to see data at design-time. But that breaks the view at run-time.

How do I overcome this issue since SelectedStep is not being set at design time?

Thanks, Chris

Answer 1

You are assigning the d:DesignData to the DataContext property, so you have to pass your view model there. Step.xaml should look something like that:

<YourViewModel>
    <YourViewModel.SelectedStep>
        <Step>
            <Submodules>
                <Submodule>
                <Submodule>
                <Submodule>
            </Submodules>
        </Step>
    </YourViewModel.SelectedStep>
</YourViewModel>

Then your bindings should work like at runtime.