Click here to Skip to main content
15,892,839 members
Articles / Desktop Programming / WPF

MVVM and the WPF DataGrid

Rate me:
Please Sign up or sign in to vote.
4.94/5 (62 votes)
23 Sep 2009CPOL24 min read 515K   31.8K   223  
Using MVVM, particularly with the WPF DataGrid
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
    xmlns:vc="clr-namespace:DataGridOpsDemo.ValueConverters" 
    x:Class="DataGridOpsDemo.MainWindow"
    Title="DataGrid Operations Demo" Height="500" Width="300" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        
        <!-- The WPF DataGrid (WPF Toolkit version) has a bug that throws a format exception
        when a WPF DataGrid is bound to a SelectedItem property, as we do here. The Ignore New
        Item Plave Holder Converter works around this bug. For more information on the bug and
        the converter, see Nigel Spencer's Blog (2009-04-30), which discusses the bug and provides 
        the fix. Link to blog post can be found in the remarks to the value converter.  -->
        
        <!-- Value Converters -->
        <vc:IgnoreNewItemPlaceHolderConverter x:Key="ignoreNewItemPlaceHolderConverter"/>

        <!-- DataGrid Background -->
        <LinearGradientBrush x:Key="BlueLightGradientBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#FFEAF3FF"/>
            <GradientStop Offset="0.654" Color="#FFC0DEFF"/>
            <GradientStop Offset="1" Color="#FFC0D9FB"/>
        </LinearGradientBrush>

        <!-- DatGrid style -->
        <Style TargetType="{x:Type toolkit:DataGrid}">
            <Setter Property="Margin" Value="5" />
            <Setter Property="Background" Value="{StaticResource BlueLightGradientBrush}" />
            <Setter Property="BorderBrush" Value="#FFA6CCF2" />
            <Setter Property="RowBackground" Value="White" />
            <Setter Property="AlternatingRowBackground" Value="#FDFFD0" />
            <Setter Property="HorizontalGridLinesBrush" Value="Transparent" />
            <Setter Property="VerticalGridLinesBrush" Value="#FFD3D0" />
            <Setter Property="RowHeaderWidth" Value="0" />
        </Style>
        
        <!-- Enable rows as drop targets -->
        <Style TargetType="{x:Type toolkit:DataGridRow}">
            <Setter Property="AllowDrop" Value="True" />
        </Style>

    </Window.Resources>
    <DockPanel>

        <DockPanel LastChildFill="False" DockPanel.Dock="Top" Margin="5,0,5,0">
        	<TextBlock Text="Grocery List" TextWrapping="Wrap" VerticalAlignment="Bottom" FontFamily="Cambria" FontSize="21.333">
        		<TextBlock.Foreground>
        			<SolidColorBrush Color="#FF437CA6"/>
        		</TextBlock.Foreground>
        	</TextBlock>
        	<Button Command="{Binding DeleteItem}" DockPanel.Dock="Right" ToolTip="Delete selected item from the grocery list">
        		<Image Source="..\Images\delete_item.png" Height="16" Width="16" />
        	</Button>
        </DockPanel>
        <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal">
        	<TextBlock Text="Number of items: " TextWrapping="NoWrap"/>
        	<TextBlock Text="{Binding ItemCount}" TextWrapping="Wrap"/>
        </StackPanel>

        <toolkit:DataGrid x:Name="MainGrid" 
                          ItemsSource="{Binding GroceryList}" 
                          SelectedItem="{Binding SelectedItem,Converter={StaticResource ignoreNewItemPlaceHolderConverter}}" 
                          AutoGenerateColumns="False" 
                          DockPanel.Dock="Top"
                          MouseMove="OnMainGridMouseMove"
                          DragEnter="OnMainGridCheckDropTarget"
                          DragLeave="OnMainGridCheckDropTarget"
                          DragOver="OnMainGridCheckDropTarget"
                          Drop="OnMainGridDrop" DataContextChanged="OnMainGridDataContextChanged" >
            <toolkit:DataGrid.Columns>
                <toolkit:DataGridTextColumn Header="Sequence" Width="63" Binding="{Binding SequenceNumber}" IsReadOnly="false" />
                <toolkit:DataGridTextColumn Header="Item" Width="*" Binding="{Binding Name}" IsReadOnly="false" />
            </toolkit:DataGrid.Columns>
        </toolkit:DataGrid>

    </DockPanel>
</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 (Senior) Foresight Systems
United States United States
David Veeneman is a financial planner and software developer. He is the author of "The Fortune in Your Future" (McGraw-Hill 1998). His company, Foresight Systems, develops planning and financial software.

Comments and Discussions