Center column header in datagrid in UWP

Question

I'm trying to center the Column header in DataGrid. To add DataGrid in UWP UI i'm using nuget package "Microsoft.Toolkit.Uwp.UI.Controls.DataGrid" as mentioned in microsoft documentation link enter link description here . I tried searching here but there is solution for WPF only it's in this link enter link description here.

In this code i can't use TargetType="DataGridColumnHeader".

<controls:DataGrid.Columns>
 <controls:DataGridTextColumn Header="Area Name" Binding="{Binding Height_m}" Width="*">
  <controls:DataGridTextColumn.HeaderStyle>
   <Style TargetType="DataGridColumnHeader">
     <Setter Property="HorizontalContentAlignment" Value="Center" />
   </Style>
  </controls:DataGridTextColumn.HeaderStyle>
 </controls:DataGridTextColumn>
</controls:DataGrid.Columns>

It Shows Exception : The name "DataGridColumnHeader" does not exist in the namespace "using:Microsoft.Toolkit.Uwp.UI.Controls".

Richard Zhang - MSFT Richard Zhang - MSFT · Accepted Answer · 2020-04-20T05:59:25

DataGridColumnHeader is not under the Microsoft.Toolkit.Uwp.UI.Controls namespace, but under the Microsoft.Toolkit.Uwp.UI.Controls.Primitives namespace.

So you need to add the corresponding namespace reference:

xmlns:prim="using:Microsoft.Toolkit.Uwp.UI.Controls.Primitives"

...

<controls:DataGrid.ColumnHeaderStyle>
    <Style TargetType="prim:DataGridColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="MinWidth" Value="200" />
    </Style>
</controls:DataGrid.ColumnHeaderStyle>

The MinWidth is set to better view the centering effect, if you don't need it, you can delete it.

However, because the width of the column is affected by the content of the column, you may observe that the header is not centered, then you can consider setting a MinWidth.

Thanks

Center column header in datagrid in UWP

1 Answers