xamlwinui-3winuiwindows-community-toolkit

How to set Font properties like size in DataGrid in WinUI 3


I am trying to show a data in tabular format using DataGrid in WinUI 3, but with Header I am unable to affect the font size or any font effect.

I am trying to change it using

   <controls:DataGrid.Columns>
                        <controls:DataGridTextColumn Header="Name" Tag="Name" >
                            <controls:DataGridTextColumn.ElementStyle>                          
                                <Style TargetType="TextBlock">
                                    <Setter Property="FontSize" Value="5" />
                                </Style>
                            </controls:DataGridTextColumn.ElementStyle>
                        </controls:DataGridTextColumn>

But it just doesnt work. I need to know:

  1. Is it the right way to change controls:DataGridTextColumn font size ?
  2. The XAML does not recognize controls:DataGridTextColumn & its attributes outside the controls:DataGridTextColumn tag, so for each header I will have to set property manually like this ?

Also FYI, the Nuget Package Manager as show in WINUI3 APP from MS Store for DataGrid implementation is

Microsoft.Toolkit.UWP.UI.Controls.DataGrid

which is so wrong, for WinUI projects its

CommunityToolkit.WinUI.UI.Controls.DataGrid

Solution

  • This should work:

    <Page
        x:Class="DataGridTests.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:local="using:DataGridTests"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:primitives="using:CommunityToolkit.WinUI.UI.Controls.Primitives"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
        mc:Ignorable="d">
    
        <controls:DataGrid ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}">
            <controls:DataGrid.ColumnHeaderStyle>
                <Style TargetType="primitives:DataGridColumnHeader">
                    <Setter Property="FontSize" Value="50"/>
                </Style>
            </controls:DataGrid.ColumnHeaderStyle>
            <controls:DataGrid.Columns>
                <controls:DataGridTextColumn
                Header="Name"
                FontSize="50"
                Binding="{Binding Name}">
                </controls:DataGridTextColumn>
            </controls:DataGrid.Columns>
        </controls:DataGrid>
    
    </Page>
    

    Note that DataGrid and DataGridColumnHeader doesn't have the same namespaces.