Post

WPF DataGrid using MahApps.Metro

MahApps.Metro ships two cool styles to beautify the DataGrid control that ships with .NET 4.0 by default. With this styling you can use filtering, grouping, sorting and other standard features that you would expect of a DataGrid. It also contains a DataGridCheckBoxColumn style as well as a custom DataGridNumericUpDownColumn style.

So for showing the differences, here is the default look:

default style for DataGrid

Now, if you use the MahApps.Metro style for the application, you get this result:

default style for DataGrid

Looks awesome!

There is another style called Azure which can be used by

1
<DataGrid Style="{DynamicResource AzureDataGrid}" />

default style for DataGrid

Removing the right gripper

There is an issue with the style, that can be very confused. The DataGrid has a right gripper at the column header without any functionality.

default style for DataGrid

So how can it be removed? It’s only possible to override the DataGridColumnHeadersPresenter globally.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- for ne metro style -->
<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DataGridColumnHeadersPresenter">
                <Grid>
                    <Border IsHitTestVisible="False"
                            BorderThickness="0 0 0 3"
                            Background="Transparent"
                            BorderBrush="{DynamicResource GrayBrush5}" />
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- for the azure style -->
<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DataGridColumnHeadersPresenter">
                <Grid>
                    <Border IsHitTestVisible="False"
                            Margin="0 0 0 10"
                            BorderThickness="0 0 0 3"
                            Background="Transparent"
                            BorderBrush="{DynamicResource GrayBrush5}" />
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

default style for DataGrid

A complete example can be found on GitHub.

This post is licensed under CC BY 4.0 by the author.