WPF - DataGrid列标题对齐

Question

I'm using the WPFToolkit DataGrid control and I wanted to restyle some of the column headers so that the header text is displayed vertically instead of horizontally (the data in the column is all numeric and therefore, not very wide, but the header text is long). So I created a DataTemplate to and tried to get the DataGridColumn.HeaderTemplate to it. This is my template:

<DataTemplate x:Key="headerTemplate"> 
        <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="Aqua"> 
            <StackPanel.LayoutTransform> 
                <RotateTransform Angle="-90"/> 
            </StackPanel.LayoutTransform> 
            <TextBlock Text="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="Pink"> 
            </TextBlock> 
        </StackPanel> 
    </DataTemplate>

This works just fine, except the alignment of the header is always left and center. No combination of alignments for the StackPanel or the TextBlock seems to make any difference. I would like to have the text aligned at the bottom and middle. How can I make it do that?

Thanks,

AT

Answer 1

OK, found the answer.

The property I was looking for was VerticalContentAlignment .

I created a style and attached that using the HeaderStyle property, and it worked :)

<Style x:Key="VerticalGridHeaderStyle" TargetType="tk:DataGridColumnHeader">
    <Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>

Answer 2

This also works

<Style TargetType="{x:Type DataGridColumnHeader}">
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>

Add the x:Key="" if you don't want to target all DataGridColumnHeader's

Answer 3

If you don't want to mess up the style that you have already applied, use BasedOn:

<DataGrid.ColumnHeaderStyle>
                <Style BasedOn="{StaticResource MetroDataGridColumnHeader}" TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                </Style>
            </DataGrid.ColumnHeaderStyle>