How to center the text in an Avalonia DataGrid column header?

Question

How can I cause the DataGrid column headers to be centered instead of left-aligned? In particular, I want to center just the 3rd column.

Answer 1

(I used to use DNOA!). Anyway ... here you go.

If memory serves this is more or less the default style, I think I've pulled out any of my specifics so should just drop in to your application. Remember to pull in the Default DataGrid styles first.

<FluentTheme Mode="Dark" />
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>

Style code

<Style Selector="DataGridColumnHeader">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Focusable" Value="False" />
    <Setter Property="SeparatorBrush" Value="{DynamicResource DataGridGridLinesBrush}" />
    <Setter Property="Padding" Value="12,0,0,0" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="MinHeight" Value="30" />
    <Setter Property="Template">
      <ControlTemplate>
        <Grid Name="PART_ColumnHeaderRoot"
              ColumnDefinitions="*,Auto"
              Background="{TemplateBinding Background}">

          <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                Margin="{TemplateBinding Padding}">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition MinWidth="32"
                                Width="Auto" />
            </Grid.ColumnDefinitions>

            <ContentPresenter Content="{TemplateBinding Content}" 
                              ContentTemplate="{TemplateBinding ContentTemplate}" />

            <Path Name="SortIcon"
                  Grid.Column="1"
                  Fill="{DynamicResource SampleSortOrange}"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  Stretch="Uniform"
                  Height="12" />
          </Grid>

          <Rectangle Name="VerticalSeparator"
                     Grid.Column="1"
                     Width="1"
                     VerticalAlignment="Stretch"
                     Fill="{TemplateBinding SeparatorBrush}"
                     IsVisible="{TemplateBinding AreSeparatorsVisible}" />

          <Grid x:Name="FocusVisual"
                IsHitTestVisible="False">
            <Rectangle x:Name="FocusVisualPrimary"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       Fill="Transparent"
                       IsHitTestVisible="False"
                       Stroke="{DynamicResource DataGridCellFocusVisualPrimaryBrush}"
                       StrokeThickness="2" />
            <Rectangle x:Name="FocusVisualSecondary"
                       Margin="2"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       Fill="Transparent"
                       IsHitTestVisible="False"
                       Stroke="{DynamicResource DataGridCellFocusVisualSecondaryBrush}"
                       StrokeThickness="1" />
          </Grid>
        </Grid>
      </ControlTemplate>
    </Setter>
  </Style>

  <!-- Selected Row Background -->
  <Style Selector="DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
    <Setter Property="Fill" Value="{DynamicResource SampleSortOrange}" />
    <Setter Property="Opacity" Value="0.3" />
  </Style>
  
  <!-- <Style Selector="DataGridRow:selected /template/ ContentPresenter"> -->
  <!--   <Setter Property="TextBlock.Foreground" Value="Black" /> -->
  <!-- </Style> -->

  <Style Selector="DataGridColumnHeader /template/ Grid#FocusVisual">
    <Setter Property="IsVisible" Value="False" />
  </Style>
  <Style Selector="DataGridColumnHeader:focus-visible /template/ Grid#FocusVisual">
    <Setter Property="IsVisible" Value="True" />
  </Style>

  <Style Selector="DataGridColumnHeader:pointerover /template/ Grid#PART_ColumnHeaderRoot">
    <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderHoveredBackgroundColor}" />
  </Style>
  <Style Selector="DataGridColumnHeader:pressed /template/ Grid#PART_ColumnHeaderRoot">
    <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderPressedBackgroundColor}" />
  </Style>

  <Style Selector="DataGridColumnHeader:dragIndicator">
    <Setter Property="Opacity" Value="0.5" />
  </Style>

  <Style Selector="DataGridColumnHeader /template/ Path#SortIcon">
    <Setter Property="IsVisible" Value="False" />
  </Style>

  <Style Selector="DataGridColumnHeader:sortascending /template/ Path#SortIcon">
    <Setter Property="IsVisible" Value="True" />
    <Setter Property="Data" Value="{StaticResource DataGridSortIconAscendingPath}" />
  </Style>

  <Style Selector="DataGridColumnHeader:sortdescending /template/ Path#SortIcon">
    <Setter Property="IsVisible" Value="True" />
    <Setter Property="Data" Value="{StaticResource DataGridSortIconDescendingPath}" />
  </Style>

The key line relative to this question is:

<Setter Property="HorizontalContentAlignment" Value="Center" />

To only do one column, things would get a little more involved as above is a globally applied style through the Selector=Type (same as WPF {Type:xxx} style convention). So you could look at making that one column "targetable" somehow so a Selector= would only hit that column.

Off the top of my head, you'd have to turn off auto column generation on your DataGrid instance, manually generate the columns and give that one column a name, such as "immagonnabecentered", then selectors should just target this single column.

So create columns like:

<controls:DataGrid.Columns>
    <DataGridTextColumn Header="File Name" Binding="{Binding FileName}" SortMemberPath="FileName"/>
    <DataGridTextColumn x:Name="immagonnabecentered" Header="File Name" Binding="{Binding FileName}" SortMemberPath="FileName"/>
    ...
</controls:DataGrid.Columns>

Then update the style selector on the Style to hit this one column.

<Style Selector="#immagonnabecentered">
<Style Selector="DataGridColumnHeader#immagonnabecentered">