WPF Toolkit DataGrid is an uggo

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:

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:

 

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>