Click here to Skip to main content
15,868,016 members
Articles / Desktop Programming / WPF

WPF PropertyGrid - MVVM techniques

Rate me:
Please Sign up or sign in to vote.
4.86/5 (11 votes)
11 Mar 2010CPOL5 min read 62.8K   1.8K   34  
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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:clr="clr-namespace:PropertyGridDemo"
        Title="PropertyGrid Sample" Height="200" Width="320">
    <ListView ItemsSource="{Binding}">
        <ListView.Resources>
            <!-- The following are the data templates for the Value column of the ListView. -->
            
            <DataTemplate DataType="{x:Type clr:TextItem}">
                <TextBox Text="{Binding Text}"/>
            </DataTemplate>
            
            <DataTemplate DataType="{x:Type clr:ColorItem}">
                <Grid>
                    <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. -->
                        <ComboBox.ItemTemplate>
                            <!-- Don't confuse the DataTemplate of the ComboBox with the DataTemplate that
                                 *contains* the ComboBox. -->
                            <DataTemplate> 
                                <StackPanel Orientation="Horizontal">
                                    <Rectangle Width="16" Margin="3">
                                        <Rectangle.Fill>
                                            <SolidColorBrush Color="{Binding Color}"/>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <TextBlock Text="{Binding Name}" Margin="3"/>
                                </StackPanel>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </Grid>
            </DataTemplate>
            
        </ListView.Resources>
        
        <ListView.View>
            <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">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <!-- 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}"/>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>

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

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.

License

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


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

Comments and Discussions