LanceMcCarthy
commented
2 years ago Hi Rob,
As I mentioned in my Twitter reply, this is expected because of the header's ControlTemplate layout. as you suspected, there is a StackPanel involved. This is easy to override to get the results you want.
Here's the default Style and ControlTemplate for the DataGridColumnHeader. If you update your Style to include the ControlTemplate, you can modify it to suit your needs.
Here's a screenshot to help clarify exactly where your custom header content gets rendered:
Important : Be careful not to remove anything that has a PART_ prefix. You can set the undesired part's
Visibility="Collapsed". If a PART is missing, you'll get a NRE because it is referenced in the control's code.
Example
To give you a head start, here's your Style, but I added the ControlTemplate to it. You can use this as a starting point (and a fresh start in case you need to start over 😁).
<Style x:Key="customHeaderStyle" TargetType="localPrimitives:DataGridColumnHeader">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
<Setter Property="Background" Value="Green" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="localPrimitives:DataGridColumnHeader">
<Grid x:Name="rootPanel" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Filtered">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FilteredHighlight" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectedStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerContent" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{ThemeResource TelerikGridServiceColumnActiveForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="rootPanel" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{ThemeResource TelerikGridServiceColumnActiveBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ResizeHandle" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{ThemeResource TelerikGridServiceColumnActiveForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter x:Name="headerContent" Content="{TemplateBinding Content}" Margin="8"/>
<TextBlock Text="{Binding SortDirection, Converter={StaticResource SortDirectionConverter}}"
FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="10" Margin="2,0,4,2" VerticalAlignment="Center"/>
</StackPanel>
<primitivesCommon:InlineButton Style="{StaticResource GridServiceButtonStyle}" x:Name="PART_FilterButton" HorizontalAlignment="Right" VerticalAlignment="Stretch"
Grid.Column="1" Padding="8,0,8,4" VerticalContentAlignment="Center"
Background="Transparent" PointerOverBackgroundBrush="Transparent" PressedBackgroundBrush="Transparent"
PointerOverForegroundBrush="{ThemeResource TelerikGridHeaderPointerOverForegroundBrush}"
Foreground="{TemplateBinding Foreground}" PressedForegroundBrush="{TemplateBinding Foreground}"
Visibility="{TemplateBinding FilterGlyphVisibility}">
<primitivesCommon:InlineButton.Content>
<TextBlock Text="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="12"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</primitivesCommon:InlineButton.Content>
</primitivesCommon:InlineButton>
<Thumb x:Name="PART_ResizeHandle" Style="{StaticResource ColumnHeaderResizeThumb}" Background="Transparent" Grid.Column="2" Visibility="{TemplateBinding ResizeHandleVisiblity}">
</Thumb>
</Grid>
<Rectangle x:Name="FilteredHighlight" Height="2" Fill="{ThemeResource TelerikGridServiceButtonBackgroundBrush}"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Margin="0,0,0,4" Visibility="Collapsed" Grid.ColumnSpan="3"/>
<Rectangle Fill="{ThemeResource TelerikGridInnerShadowBrush}" Height="1" VerticalAlignment="Bottom" Margin="0,1,0,3" Grid.ColumnSpan="3"/>
<Rectangle Fill="{ThemeResource TelerikGridShadowBrush}" Height="3" VerticalAlignment="Bottom" Margin="0,3,0,0" Grid.ColumnSpan="3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>Edited to improve spelling, explanation and add example.
RobbyRobbyRobby
Content Layout of header in the column header ignores properties.
Steps to Reproduce
Expected Behavior
Alignment, Padding, Margin, ContentAlignment should be respected.
Actual Behavior
Alignment, Padding, Content Alignment are not effective.
Basic Information
Screenshots
Code Example
I have coloured the different framework elements to better show what has, and what has not, worked. The output is as in image preceding.
Further Notes
I have tried customizing the underlying theme resources in the DataGrid, but have had no luck. I suspect there is a StackPannel or similar in the header fouling it up.