Click here to Skip to main content
13,045,657 members (68,172 online)
Click here to Skip to main content


33 bookmarked
Posted 9 Mar 2010

WPF PropertyGrid - MVVM techniques

, 11 Mar 2010
How to build a multicolumn ListView that selects cell templates based on the row data type; and how to create a ViewModel on the fly for each cell template.
<Window x:Class="PropertyGridDemo.Window1"
        Title="PropertyGrid Sample" Height="200" Width="320">
    <ListView ItemsSource="{Binding}">
            <!-- The following are the data templates for the Value column of the ListView. -->
            <DataTemplate DataType="{x:Type clr:TextItem}">
                <TextBox Text="{Binding Text}"/>
            <DataTemplate DataType="{x:Type clr:ColorItem}">
                    <clr:ColorItemViewModel x:Name="Persona" Item="{Binding}"/>
                    <!-- Now bind our content to the viewmodel rather than to the original data. -->
                    <ComboBox DataContext="{Binding ElementName=Persona}"
                              ItemsSource="{Binding AvailableColors}"
                              SelectedItem="{Binding Color}">
                        <!-- The ComboBox will contain rectangles showing the color, and the name of the
                             color to the right of the rectangle. -->
                            <!-- Don't confuse the DataTemplate of the ComboBox with the DataTemplate that
                                 *contains* the ComboBox. -->
                                <StackPanel Orientation="Horizontal">
                                    <Rectangle Width="16" Margin="3">
                                            <SolidColorBrush Color="{Binding Color}"/>
                                    <TextBlock Text="{Binding Name}" Margin="3"/>
            <GridView> <!-- ListView is multicolumn. -->
                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
                <!-- The Value column needs to display different sorts of controls,
                     depending on the type of the data row.  For this we need a 
                     CellTemplate... -->
                <GridViewColumn Header="Value" Width="200">
                            <!-- The cell template contains a ContentPresenter, hence the *actual*
                                 data template used will be selected by the type of the data row. -->
                            <ContentPresenter Content="{Binding}"/>

        <!-- Stretch the content of the columns.  It's annoying that the default
             alignment is left. -->
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

David K Turner
Software Developer Cyest Corporation
South Africa South Africa
David is a software developer with an obsession for analysis and proper architecture.

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 11 Mar 2010
Article Copyright 2010 by David K Turner
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid