UserControl in DataGridColumnHeader不拉伸

Question

我正试图为我的DataGrid创建一个自定义头，以便能够以一种强大的方式进行过滤。除了UserControl没有延伸到列这一事实之外，一切都像我想要的那样工作。我已将UserControl的背景涂成红色，以便能够在图像中更清楚地看到它。

​

​

我一直在这里和其他地方寻找答案，但我所发现的一切都表明我不应该在UserControl中显式地设置宽度，我已经检查过了。

我尝试在标题中添加一个网格，然后将用户控件放在标头中，但这没有帮助。

下面是如何将UserControl添加到其中一个标头中：

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

这是完整的UserControl xaml：

 <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>

​

有什么想法吗？我从未见过有人将UserControls添加到标头中的例子，这是错误的方式吗？我所看到的只是使用的模板和样式。由于我想要重用它，所以我已经将过滤的所有逻辑添加到用户控件及其视图模型中，所以我看不出模板如何能帮助我。

谢谢!

/Erik

Answer 1

如果将控件的HorizontalAlignment属性设置为Stretch，则告诉该控件尽量占用可用的水平空间。这里的问题是承载您的控件的容器(它是一个DataGridColumnHeader )试图将它的内容保持在左边，并尽可能少地占用水平空间--这是因为它的HorizontalContentAlignment属性默认设置为Left。因此，为了允许控件自由拉伸，还需要将该属性设置为Stretch。最简单的方法是利用DataGridColumn.HeaderStyle属性：

<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>

您还可能需要使用DataGridColumnHeader的其他属性来获得所需的结果--我注意到默认情况下它的内容是填充的，设置Padding或Margin属性都没有帮助，但是将Background属性设置为Transparent (或其他属性)可以消除这种神秘的填充。

Answer 2

1.可以使用应用样式:更改所有列标题的样式

<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>

对“复制的模板”的重要修改是：

 <ContentPresenter HorizontalAlignment="Stretch" ... >

2.然后使用样式:

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