WPF Toolkit DataGrid is an uggo

October 2nd, 2009 by Andy Leave a reply »

Update 6-Nov-09:  The style given here works fine for the WPF 4.0 DataGrid (beta 2).

This is the default look for the WPF Toolkit DataGrid:

datagrid1

Ugh.  The black gridlines, the white-on-blue highlight, the cramped text … it’s really not very good.   I’m no graphic designer, but I think the following simple tweaks are a significant improvement:

datagrid2 

The gridlines are trivial to change through the DataGrid’s HorizontalGridLinesBrush and VerticalGridLinesBrush properties.   The selection highlight can be modified by setting the CellStyle property to a style containing a trigger on the IsSelected property of the DataGridCell.  Finally, I added the padding by defining a control template for the cell that has a padded border around the ContentPresenter.   As a little extra I also highlight a row when the mouse passes over it, which I find pleasing to the eye.

Here’s the complete style:

<Style x:Key="PrettierDataGridStyle" TargetType="tk:DataGrid">
    
    <!-- Make the border and grid lines a little less imposing -->
    <Setter Property="BorderBrush" Value="#DDDDDD" />
    <Setter Property="HorizontalGridLinesBrush" Value="#DDDDDD" />
    <Setter Property="VerticalGridLinesBrush" Value="#DDDDDD" />

    <Setter Property="RowStyle">
        <Setter.Value>
            <Style TargetType="tk:DataGridRow">
                <Style.Triggers>
                    <!-- Highlight a grid row as the mouse passes over -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Lavender" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Setter.Value>
    </Setter>


    <Setter Property="CellStyle">
        <Setter.Value>
            <Style TargetType="tk:DataGridCell">
                <Style.Triggers>
                    <!-- Highlight selected rows -->
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Lavender" />
                        <Setter Property="BorderBrush" Value="Lavender" />
                        <Setter Property="Foreground" Value="Black" />
                    </Trigger>
                </Style.Triggers>

                <!-- Add some padding around the contents of a cell -->
                <Setter Property="Padding" Value="4,3,4,3" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="tk:DataGridCell">
                            <Border Padding="{TemplateBinding Padding}" 
                                Background="{TemplateBinding Background}">
                                <ContentPresenter />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>         
</Style>
Advertisement

2 comments

  1. Claes Wedin says:

    Great!! and when I use the mouse to select a row it is fine, but if I step down with the arrow-down-key, I get a cell with a dotted black border… How do I get rid of this?

  2. Andy McMullan says:

    The dotted black border is to show keyboard users which cell has the focus, so you probably don't want to get rid of it completely. But if you really want to, you can do it by setting the FocusVisualStyle property on the DataGridCell, e.g.:

    <Setter Property="FocusVisualStyle">
    <Setter.Value>
    <Style TargetType="Control">
    <Setter Property="BorderBrush" Value="Transparent" />
    </Style>
    </Setter.Value>
    </Setter>