DataGridColumnHeader 中的 UserControl 不拉伸

Question

I'm trying to create a custom header for my DataGrid to be able to filter in a powerful way. Everything works like I want to except the fact that the UserControl does not stretch with the column. I've colored the background of the UserControl red to be able to se it more clearly in the image.

I've been looking for an answer here and elsewhere, but all I've found suggests that I should not set the width explicitly in the UserControl, and I've checked that.

I've tried adding a grid in the header and then put the usercontrol in the header, but that does not help.

Below is how I add the UserControl to one of the headers:

                <DataGridTextColumn Binding="{Binding Path=Description}">
                    <DataGridTextColumn.Header>
                            <views:FilterControl Header="Description"  FilterChangedEvent="Filtering_Changed" PropertyPath="Description"  /> 
                    </DataGridTextColumn.Header>
                </DataGridTextColumn>

This is the UserControl xaml in its entirety:

 <UserControl x:Class="White.Db.ContentOrderDb.Views.FilterControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:White.Db.ContentOrderDb.Views"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="120"   HorizontalAlignment="Stretch">
<UserControl.Resources>
    <Style TargetType="FrameworkElement" x:Key="IsEnabledStyle">
        <Setter Property="IsEnabled" Value="False"/>
        <Setter Property="OpacityMask" Value="Black"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=FilterActive}" Value="True" >
                <Setter Property="IsEnabled" Value="True"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<Grid Background="White">
    <TextBox Style="{StaticResource IsEnabledStyle}" TextChanged="SearchPatternText_Changed" Height="23" Margin="3,50,3,0" TextWrapping="Wrap" Text="{Binding Path=SearchPattern,UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top">
        <TextBox.BorderBrush>
            <LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
                <GradientStop Color="#FFABADB3" Offset="0.05"/>
                <GradientStop Color="#FFE2E3EA" Offset="0.07"/>
                <GradientStop Color="#FFB4B4B4" Offset="1"/>
            </LinearGradientBrush>
        </TextBox.BorderBrush>
    </TextBox>
    <Label Content="{Binding Path=Header}" VerticalAlignment="Top" Height="30" Background="gray"  Foreground="White" BorderBrush="#FFB6B6B6" BorderThickness="1"/>
    <CheckBox Unchecked="FilterDeActivated" Checked="FilterActivated" IsChecked="{Binding Path=FilterActive}" Content="Active" HorizontalAlignment="Left" Margin="3,32,0,0" VerticalAlignment="Top" BorderBrush="#FFB4B4B4"/>
    <ComboBox  SelectionChanged="ComboBox_SelectionChanged" Style="{StaticResource IsEnabledStyle}" Text="{Binding Path=ComboBoxText}" IsReadOnly="True" IsEditable="True" ItemsSource="{Binding Path=ComboBoxItems}" Margin="3,75,3,0" VerticalAlignment="Top">
        <ComboBox.BorderBrush>
            <LinearGradientBrush EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
                <GradientStop Color="#FFABADB3" Offset="0.05"/>
                <GradientStop Color="#FFE2E3EA" Offset="0.07"/>
                <GradientStop Color="#FFB4B4B4" Offset="1"/>
            </LinearGradientBrush>
        </ComboBox.BorderBrush>
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <CheckBox Content="{Binding Path=Content}" IsChecked="{Binding Path=IsChecked}" Checked="CheckBox_CheckedChanged" Unchecked="CheckBox_CheckedChanged" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
</Grid>

Any thoughts? I've not seen any examples where people add UserControls to headers, is this the wrong way? All I've seen is templates and styles being used. I've added all the logic for filtering to the usercontrol and its viewmodel since I want to reuse it, so I dont see how a template can help me.

Thanks!

/Erik

Answer 1

If you set the HorizontalAlignment property of your control to Stretch , you tell that control to try to take up as much of available horizontal space as possible. The problem here is that the container which hosts your control (it's a DataGridColumnHeader control in this case) tries to keep it's content to the left and take up as little horizontal space as possible - this is because it's HorizontalContentAlignment property is by default set to Left . So in order to allow your control to stretch freely you need to also set that property to Stretch . The easiest way of doing that is to utilize the DataGridColumn.HeaderStyle property:

<DataGridTextColumn Binding="{Binding Path=Description}">
    <DataGridTextColumn.Header>
        <views:FilterControl Header="Description" FilterChangedEvent="Filtering_Changed" PropertyPath="Description"  /> 
    </DataGridTextColumn.Header>
    <DataGridTextColumn.HeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>

You may also need to play around with other properties of DataGridColumnHeader to get the desired result - I've noticed that by default it's content is padded, and setting neither Padding nor Margin properties helps, but setting the Background property to Transparent (or any other for that matter) gets rid of that mysterious padding.

Answer 2

1. It is possible to change the style of all column header with applying style :

<Style x:Key="DataGridColumnHeaderStyle1" TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                <Grid>
                    <Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsClickable="{TemplateBinding CanUserSort}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}" Padding="{TemplateBinding Padding}" SortDirection="{TemplateBinding SortDirection}" SeparatorBrush="{TemplateBinding SeparatorBrush}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}">
                        <ContentPresenter HorizontalAlignment="Stretch" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Themes:DataGridHeaderBorder>
                    <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                    <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The important modification to the "copied template" is :

 <ContentPresenter HorizontalAlignment="Stretch" ... >

2. Then use the style :

<DataGrid HorizontalContentAlignment="Stretch" x:Name="datagrid1" 
          ColumnHeaderStyle="{DynamicResource DataGridColumnHeaderStyle1}">