Question

我尝试为我的DataGrid创建自定义标头，以便能够以强大的方式进行过滤。一切都像我想要的那样，除了UserControl没有用列拉伸的事实。我已经为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添加到标题的任何示例，这是错误的方法吗？我所看到的只是使用的模板和样式。我已经将所有过滤逻辑添加到usercontrol及其viewmodel，因为我想重用它，所以我不知道模板如何帮助我。

谢谢！

/埃里克

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的其他属性来获得所需的结果 - 我注意到默认情况下它的内容已填充，并且均未设置{{1} } Padding属性也有帮助，但将Margin属性设置为Background（或任何其他属性）可以摆脱那种神秘的填充。

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

DataGridColumnHeader中的UserControl不会拉伸

2 个答案: