How to set Button Height dynamically in RowDetails RowHeaderTemplate - wpf

Question

I have a datagrid with a Deails-View which shows another datagrid. This second grid is normally not shown. In the row header there is a button with a left arrow, when this is clicked, the details-grid is shown and the arrow changes to a down-arrow. This all works perfectly, but there is only a "small area" in the rowheader which accepts clicks. This is the code of my RowHeader-Template:
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<Button Click="DataGridRowHeader_Button_Click" Cursor="Hand" HorizontalAlignment="Center" Width="40" >
<Button.Style>
<Style TargetType="Button">
<Style.Setters>
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid >
<Border Background="Chartreuse" BorderBrush="Black" BorderThickness="5"></Border>
<Path Fill="Blue" Data="M 0,0 14,7 0,14 Z" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGridRow}},Path=DetailsVisibility}" Value="Visible">
<Setter Property="Background" Value="Salmon" />
<Setter Property="Height" Value="125" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" >
<Grid >
<Border Background="LightCoral" BorderBrush="Black" BorderThickness="1" />
<Path Fill="Blue" Data="M 0,0 14,0 7,14 Z" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
The line with
Setter Property = "Height" Value="125"
expands the button
but the button does not fit into the row header. With A small value, the button shrinks, and with a high button, the row header expands unnecessarily.
I tried to bind the Heigth-value to some parameters, e. g.
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridRowDetailsEventArgs}}, Path=DetailsElement.ActualHeight}" />
(DataGridRowDetailsEventArgs captures the correct height-value when I look in code-behind:
private void dg_RowDetailsVisibilityChanged(object sender, DataGridRowDetailsEventArgs e)
{
Trace.WriteLine(e.DetailsElement.ActualHeight);
}
). Using
<Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridRowDetails}}, Path=ActualHeight}" />
does not work either, the RowHeader is always expanded to a value which seems to be the height of the whole Master-Datagrid.
Any ideas how I can size the button correctly?
(Sorry for the colors, they are used only to see the different parts of the UI).
Hucky

Answer 1

I think your problem lies within the ControlTemplate of the DataGridRowHeader where you can't properly align content (in your case your Button)
Instead of overriding the ContentTemplate every single time with full Xaml I tried another approach by using a MarkupExtension(AlignmentControlTemplateExtension), which does the necessary steps for me (clone and adjust the default ControlTemplate), so that I only have to do something like this
<Setter Property="Template" Value="{AlignmentControlTemplate Type={x:Type WhatEverType}}" />
To solve your problem you have to do only some few steps
Set the DataGridRowHeader ControlTemplate
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="Template" Value="{stackoverflow:AlignmentControlTemplate Type={x:Type DataGridRowHeader}}"></Setter>
</Style>
</DataGrid.RowHeaderStyle>
Set VerticalContentAlignment and/or HorizontalContentAlignment however you like it (in your case VerticalContentAlignment=Stretch)
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Template" Value="{stackoverflow:AlignmentControlTemplate Type={x:Type DataGridRowHeader}}"></Setter>
</Style>
</DataGrid.RowHeaderStyle>
Some adjustments in your Style.Triggers
Replace
<Setter Property="Height" Value="125" />
with
<Setter Property="VerticalAlignment" Value="Stretch" />
Edit Final Result
<DataGrid>
<!-- Step 1 -->
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter> <!-- Step 2 -->
<Setter Property="Template" Value="{stackoverflow:AlignmentControlTemplate Type={x:Type DataGridRowHeader}}"></Setter>
</Style>
</DataGrid.RowHeaderStyle>
<!-- /Step 1 -->
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<Button Click="DataGridRowHeader_Button_Click" Cursor="Hand" HorizontalAlignment="Center" Width="40" >
<Button.Style>
<Style TargetType="Button">
<Style.Setters>
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid >
<Border Background="Chartreuse" BorderBrush="Black" BorderThickness="5"></Border>
<Path Fill="Blue" Data="M 0,0 14,7 0,14 Z" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGridRow}},Path=DetailsVisibility}" Value="Visible">
<Setter Property="Background" Value="Salmon" />
<Setter Property="VerticalAlignment" Value="Stretch" /> <!-- Step 3 -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" >
<Grid >
<Border Background="LightCoral" BorderBrush="Black" BorderThickness="1" />
<Path Fill="Blue" Data="M 0,0 14,0 7,14 Z" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
...
</DataGrid>