How to get mock data into listview during design time and real data at run time in WPF

Question

I am using Visual Studio 2008 writing a WPF application. I am new to WPF and would like to be able to see the contents of my listview at design time so that I can see what I am doing in the xaml, but bind to my real data at run time.

My data is an observable collection of a simple model type object that exposes a few properties like Id, Title, Description, etc

At runtime I need to be able to get at the data source collection from the code so I can change the contents dynamically

Currently I have:

<Window x:Class="EktronDataUI.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:EktronDataUI"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <ObjectDataProvider ObjectType="{x:Type local:SmartFormDefinitionProvider}" x:Key="formsProvider" MethodName="GetMockData" />
    </Window.Resources>
    <Grid>
        <DockPanel>
            <TextBlock DockPanel.Dock="Top">Hello WPF</TextBlock>
            <ListView Name="myListView" ItemsSource="{Binding Source={StaticResource formsProvider}}">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="Id" DisplayMemberBinding="{Binding Id}" />
                        <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Title}" />
                    </GridView>
                </ListView.View>
            </ListView>
        </DockPanel>
    </Grid>
</Window>

Which shows me my mock data at runtime, but not at design time. The listview is just a blank rectangle in the designer, though I do see the "Hello WPF" text

Whats the typical way of handling this?

Edit:

Should this show me my data at design time as it stands? I found that if I cut the listview from xaml and then paste it back in, I see my data, its not exactly displayed right, but its there. But the moment I build it disappears and doesnt come back

Answer 1

<Window x:Class="EktronDataUI.Window1" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:local="clr-namespace:EktronDataUI" 
xmlns:design_vm="clr-namespace:Company.Product.ViewModel.Design"
mc:Ignorable="d" 
Title="Window1" Height="300" Width="300"> 
<Window.Resources> 
    <ObjectDataProvider ObjectType="{x:Type design_vm:MyListViewModel}" x:Key="DesignTime_DataSource" d:IsDataSource="True"/>
</Window.Resources> 
<Grid d:DataContext="{StaticResource DesignTime_DataSource}> 
    <DockPanel> 
        <TextBlock DockPanel.Dock="Top">Hello WPF</TextBlock> 
        <ListView Name="myListView" ItemsSource="{Binding Path=ListItems"> 
            <ListView.View> 
                <GridView> 
                    <GridViewColumn Header="Id" DisplayMemberBinding="{Binding Id}" /> 
                    <GridViewColumn Header="Title" DisplayMemberBinding="{Binding Title}" /> 
                </GridView> 
            </ListView.View> 
        </ListView> 
    </DockPanel> 
</Grid> 

Provide a subclass of the class you're using as datacontext and hook it up as a design time datacontext using the d namespace as in my example. I have MVVM project with a namespace for my viewmodels and each class has a subclass that I use for design. These subclasses have constructors that populate them with design time data. The datacontext for runtime can be set in codebehind or through datatemplating. The viewmodel has an observablecollection for the listview items, and in the design-viewmodel this is filled with sample data in the constructor.