Share via

Datagrid (part3): styling.

  • Article

In this third and final part of the datagrid series ( part1, part 2) we get into styling the datagrid a little bit. 

This part is not an all comprehensive tutorial on styling datagrids, I will just touch on what we did for my sample and share a few tips & tricks.

Here is the final look. 

datagridFinal

Here is the declaration for the whole data grid.

 <dg:DataGrid ItemsSource="{Binding Data}" Margin="20"                  
       AlternationCount="2" 
       RowStyle="{StaticResource RowStyle}" 
       AutoGenerateColumns="true"
       Grid.RowSpan="1" x:Name="BigKahuna">

If you see above, I templated the Header. All I wanted was a blue background with white foreground.

 <Style x:Key="ColumnHeaderStyle" TargetType="{x:Type dg:DataGridColumnHeader}" 
      BasedOn="{StaticResource {x:Type dg:DataGridColumnHeader}}">
  <Setter Property="Background" Value="{StaticResource DataGrid_Style0_Header}" />
  <Setter Property="Foreground" Value="White" />
  <Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>

I also wanted Alternating rows, so I set AlternateCount to 2 in the datagrid and then I created a trigger for the RowStyle.

 <Style x:Key="RowStyle" TargetType="dg:DataGridRow" >
    <Style.Triggers>
       <Trigger Property="AlternationIndex" Value="1" >
          <Setter Property="Background" Value="{StaticResource DataGrid_Style0_Alt1}" />
       </Trigger>
       <Trigger Property="AlternationIndex" Value="0" >
           <Setter Property="Background" Value="{StaticResource DataGrid_Style0_Alt0}" />
       </Trigger>
     </Style.Triggers>
 </Style>

One customization that I did not do in the demo, but is probably common is tweaking the selection. By default DataGrid does a blue highlight, imagine you want to change that color to a green; you would just need to override the Template for DataCell.

 <Style x:Key="CellStyle" TargetType="{x:Type dg:DataGridCell}">
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
           <Setter Property="Background" Value="#FF3FC642" />
        </Trigger>
      </Style.Triggers>
 </Style>

and of course apply this on the datagrid CellStyle='{StaticResource CellStyle}'
Voila! datagridhighlight In the usual WPF way, styles and templates allow incredible flexibility and leave the designer in control for a visually stunning look with no code.

 The rest is tips & tricks for designers.

If you look in the obvious place ( Edit Template) Blend does not have a lot of design-time support for all the pieces in the datagrid because the parts to customize are not quite parts of the ControlTemplate, but for the most part a few of these are DataTemplates, so you can workaround by creating any ContentControl, and editing the ContentTemplate there.

To edit the parts of the DataGrid's controlTemplate, you can actually drop and individual parts (like DataGridHeader) of the template in a regular window and edit their style there. 

Blend

The only 'tricky' one you might run into is DataGridHeaderBorder (because it does not expose a template). My advise there is to go ahead and select Edit Style -> Create Empty.  Treat it as you would a border.  
Window4.xaml in the sample code has a small example of editing the pieces. [it is not complete by any means. It is also not pretty].

That is it in terms of getting my little portfolio data styled and it closes the DataGrid series. I hope it is useful to some one reading it.  It was fun playing with the DataGrid. You don't realize how big this thing is until you play with it and see all the small, yet meaningful options it has.

For feedback, best place is the codeplex discussion . 
This build is a CTP, but it is quite functional and near completion. The control will ship out of band so don't wait too long; it will be shipping soon.

Comments

  • Anonymous
    August 13, 2008
    You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Anonymous
    August 14, 2008
    Jamie Rodriguez has this really nice series on getting started with the WPF DataGrid . Part1 is a brief

  • Anonymous
    August 14, 2008
    Well, their is a huge hype surrounding the release of .NET Framework 3.5 SP1 &amp; Visual Studio 2008

  • Anonymous
    August 18, 2008
    In addition to releasing the .NET Framework 3.5 SP1 last week, which included a number of improvements

  • Anonymous
    August 18, 2008
    In addition to releasing the .NET Framework 3.5 SP1 last week, which included a number of improvements

  • Anonymous
    August 18, 2008
    Finally WPF has its own Datagrid!