CODEWITHSUNDEEP
xamlwinui-3winuiwindows-community-toolkit
VMi
VMi

Reputation: 366

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

Upvotes: 0

Views: 573

Answers (1)

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13203

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.

Upvotes: 2

Related Questions