Search code examples
c#datagridwinui-3winuiwindows-community-toolkit

WinUI 3 DataGrid: Changing Header Font Size


I’m working with the DataGrid from the Windows Community Toolkit in WinUI 3. There's very little information available, and I'm struggling with it. How can I change the font size of the headers? Also, is this DataGrid virtualized?

CommunityToolkit.WinUI.UI.Controls.

<?xml version="1.0" encoding="utf-8"?>
<UserControl
    x:Class="ntk.DetailsPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Sample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">

<controls:DataGrid DataContext="MainViewModel" ItemsSource="{x:Bind ResultDatasets}"
                      AutoGenerateColumns="False"
                      VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                      GridLinesVisibility="Horizontal"
                      IsReadOnly="False"
                      FrozenColumnCount="2"
                      IsTextScaleFactorEnabled="True"
                      SelectionMode="Single"
                      Background="White">

    <controls:DataGrid.Resources>
        <SolidColorBrush x:Key="GridLinesBrush" Color="LightGray" />
    </controls:DataGrid.Resources>

    <controls:DataGrid.Columns>
        <controls:DataGridTextColumn Header="ID" Binding="{Binding id}" Width="70"/>
        <controls:DataGridTextColumn Header="data1" Binding="{Binding id}" Width="80"/>
        <controls:DataGridTextColumn Header="data2" Binding="{Binding data2}" />
    </controls:DataGrid.Columns>
</controls:DataGrid>


Solution

  • You can style the headers:

    First of all, add the primitives namespace:

    xmlns:primitives="using:CommunityToolkit.WinUI.UI.Controls.Primitives"
    

    then for all headers:

    <controls:DataGrid ...>
        <controls:DataGrid.ColumnHeaderStyle>
            <Style TargetType="primitives:DataGridColumnHeader">
                <Setter Property="FontSize" Value="32" />
            </Style>
        </controls:DataGrid.ColumnHeaderStyle>
    </controls:DataGrid>
    

    or for each header:

    <controls:DataGridTextColumn
        Header="ID"
        Binding="{Binding id}">
        <controls:DataGridTextColumn.HeaderStyle>
            <Style TargetType="primitives:DataGridColumnHeader">
                <Setter Property="FontSize" Value="32" />
            </Style>
        </controls:DataGridTextColumn.HeaderStyle>
    </controls:DataGridTextColumn>
    

    Also, is this DataGrid virtualized?

    IIRC, no, it's not.