Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

MVVM and the WPF DataGrid

, 23 Sep 2009 CPOL
Using MVVM, particularly with the WPF DataGrid
datagridopsdemo.zip
DataGridOpsDemo
DataGridOpsDemo
bin
Debug
DataGridOpsDemo.exe
DataGridOpsDemo.vshost.exe
DataGridOpsDemo.vshost.exe.manifest
WPFToolkit.dll
Domain
Images
delete_item.png
Properties
Settings.settings
UtilityClasses
View
delete_item.png
new_item.png
ViewModel
Commands
Services
ValueConverters
Library
WPFToolkit.dll
<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)

Share

About the Author

David Veeneman
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.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 23 Sep 2009
Article Copyright 2009 by David Veeneman
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid