DataGridColumnHeader中的用戶控件不伸展

Question

我正在嘗試爲我的DataGrid創建自定義標題以便能夠以強大的方式進行過濾。一切工作就像我想除了用戶控件不與列擴展的事實。我將UserControl紅色的背景着色爲能夠更清晰地在圖像中顯示。

我一直在尋找這裏和其他地方的答案，但我已經找到建議我不應該明確設置寬度在用戶控件，我已經檢查了。

我試着在標題中添加一個網格，然後把用戶控件放在標題中，但是這沒有幫助。

下面是我如何用戶控件添加到一個標題：

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

這是用戶控件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

如果您設置的控制，以Stretch的HorizontalAlignment財產，你告訴控制，試圖佔據儘可能多的可用水平空間的越好。這裏的問題在於容納你的控件的容器（在這種情況下它是一個DataGridColumnHeader控件）試圖將其內容保留在左側並佔用儘可能小的水平空間 - 這是因爲它的屬性默認設置爲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，電話：2。然後使用樣式：

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