More fun with DataGrid

Here’s another DataGrid sample using the WPF Toolkit.  It includes

  • Creating templates for DataGridTemplateColumn
  • Binding to DataGridComboBoxColumn
  • Alternating row colors

Here’s an image of what the code looks like running:


To create the Date Published column, I used the DataGridTemplateColumn and bound the CellTemplate to a custom DataTemplate. 

<!–DataTemplate for Published Date column defined in Grid.Resources –> 



<DataTemplate x:Key="DateTemplate" >

  <StackPanel Width="20" Height="30">

   <Border Background="LightBlue" BorderBrush="Black" BorderThickness="1">

    <TextBlock Text="{Binding PublishDate, StringFormat={}{0:MMM}}" FontSize="8" HorizontalAlignment="Center" />


   <Border Background="White" BorderBrush="Black" BorderThickness="1">

    <TextBlock Text="{Binding PublishDate,StringFormat={}{0:yyyy}}" FontSize="8" HorizontalAlignment="Center" />






<!–Define the custom column that shows the published date–>

<toolkit:DataGrid …>

<toolkit:DataGridTemplateColumn Header="Date Published" CellTemplate="{StaticResource DateTemplate}" />

<toolkit:DataGrid …>

It took me a while to figure out how to get binding to the enumeration correct on the CombBoxColumn, but eventually with the help of blog posts from Bea Stollnitz and Vincent Sibal, I was able to put it all together.

<!–Get the values of the MusicCategory enum to populate the ComboBox–>


<ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type core:Enum}" x:Key="myEnum">


      <x:Type TypeName="local:MusicCategory" />





<!–Define the DataGridComboBoxColumn and bind the ItemsSource and SelectedItem –>

<toolkit:DataGrid …>

   <toolkit:DataGridComboBoxColumn Header="Category" SelectedItemBinding="{Binding Category}" ItemsSource="{Binding Source={StaticResource myEnum}}" />

</toolkit:DataGrid …>


Finally the alternating row colors is pretty straight forward but I wanted to show using an AlternationCount of 3.  If you want to get fancy with more colors, check out this blog post from Jaime Rodriguez.  He shows how to use a style with triggers to set the row background based on AlternationIndex in addition to a lot of other useful info on styling DataGrid.

<toolkit:DataGrid Name="DG1" ItemsSource="{Binding}" AutoGenerateColumns="False" AlternationCount="3" AlternatingRowBackground="LightBlue" RowBackground="SkyBlue">

You can get the full code samples (VB and C#) from here.


Comments (1)

  1. Thank you for submitting this cool story – Trackback from DotNetShoutout