How to set the height of the header to the max height?

Question

I have a datagrid that uses 2 styles, so some headers use of them and others another style. The main purpose is to align one of the to the left and another to the right.

The styles are these:

<Style x:Key="DataGridColumnHeaderLeftAlignement" TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="FontWeight" Value="Black"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Height" Value="25"/>
                <!--Lo interesante sería tener un poco de margen entre la cabecera y la primera
                línea, pero al poner un margin tipo 0,0,0,10 aparece un background que no se sabe
                cómo quitar, por lo que mejor no se pone margen.
                @#REVISAR-05: ver cómo se puede dejar ese espacio.-->
                <Setter Property="Margin" Value="0,0,0,0"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                            <Grid>
                                <Themes:DataGridHeaderBorder BorderBrush="Black" BorderThickness="0,0,0,2" Background="LightGray" Padding="10, 0, 0, 2" SeparatorBrush="Transparent" SeparatorVisibility="Collapsed">
                                    <ContentPresenter HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Themes:DataGridHeaderBorder>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="DataGridColumnHeaderRightAlignement" TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="FontWeight" Value="Black"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Height" Value="AUTO"/>
                <Setter Property="Margin" Value="0,0,0,0"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                            <Grid>
                                <Themes:DataGridHeaderBorder BorderBrush="Black" BorderThickness="0,0,0,2" Background="LightGray" Padding="3, 0, 10, 2" SeparatorBrush="Transparent" SeparatorVisibility="Collapsed">
                                    <ContentPresenter HorizontalAlignment="Right" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Themes:DataGridHeaderBorder>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

In the style that aligns to the right, I set the height to AUTO, because it can have two lines, so I would like to adjust to the content. However, the rest of the header keeps their height of 25 because the style that they use is set to 25. However I have tried setting AUTO and the result it is the same, each header have different height depending on the style that they use.

So my question is, is it possible adjust the height of all the headers to the max header size?

Also I have a property that if it is true I have to use 2 lines in the header and if it is false, I have to use 1 line, so another option it would be a conditional style that check this variable that is in a property of the view model.

Answer 1

Two changes are required in your styles

1) remove the line used to set the height of the Column.

<Setter Property="Height" Value="AUTO"/> //remove this

2) set VerticalAlignment to stretch so those small headers can set height equal to bigger one

<Setter Property="VerticalAlignment" Value="Stretch"/> //update from Center to Stretch