kinton
kinton

Reputation: 193

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>

Upvotes: 1

Views: 56

Answers (1)

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13666

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.

Upvotes: 1

Related Questions