Materialdesigninxamltoolkit: How to change the FontSize of DataGrid Column Headers?

Created on 27 Dec 2018  路  2Comments  路  Source: MaterialDesignInXAML/MaterialDesignInXamlToolkit

Hi Guys,

I got a little problem with the FontSize of my DataGrid Column Headers.
For my requirements the normal Material Design Font Size of DataGrid Column Headers are a bit to small.
So I tried to change the FontSize by setting the Property like following example:

 <DataGrid x:Name="MyDataGrid1" AutoGenerateColumns="False" IsReadOnly="True">                                                                                                                    
           <DataGrid.Columns>
                     <DataGridTextColumn x:Name="Column1" Header="Column1" FontSize="18" />
                     <DataGridTextColumn x:Name="Column2" Header="Column2" FontSize="20" />
           </DataGrid.Columns>
 </DataGrid>

The problem here was that the FontSize Property didn't affect the size of the Headers Font, so it was basically like before.

Afterwards I tried to set the FontSize Property in the DataGrid itself like in the following code example:

<DataGrid Name="MyDataGrid1" AutoGenerateColumns="False" IsReadOnly="True" FontSize="18">

This only affected the FontSize of the Data in the DataGrid, but not of the Column Headers.

As a last try I tried to set the Font Size per DataGrid.Resources as you can see here:

  <DataGrid.Resources>
            <Style TargetType="{x:Type DataGridColumnHeader}">                                            
                 <Setter Property="FontSize" Value="18" />
            </Style>
  </DataGrid.Resources>

But that also didn't work as I wanted. After the implementation of the code abovetThe FontSize changed to the Value I set, but the Column Headers hadn't the Material Design font anymore and so on...it changed to the standard C# WPF Style, which I don't want as well.

So now I ask you guys, if there is an easy way to change the FontSize of DataGrid Column Headers?
Thanks for every help.

question

Most helpful comment

@DrKissko the Header property can take arbitrary content, so you can simply insert a TextBlock and set whatever properties you need on it.

<DataGridTextColumn>
    <DataGridTextColumn.Header>
        <TextBlock FontSize="20" Text="Foo" />
    </DataGridTextColumn.Header>
</DataGridTextColumn>

All 2 comments

@DrKissko the Header property can take arbitrary content, so you can simply insert a TextBlock and set whatever properties you need on it.

<DataGridTextColumn>
    <DataGridTextColumn.Header>
        <TextBlock FontSize="20" Text="Foo" />
    </DataGridTextColumn.Header>
</DataGridTextColumn>

@Keboo that works fine.

Thanks for your help and time. :)

Was this page helpful?
0 / 5 - 0 ratings