帶有附加屬性和自定義模板的 ListView GridViewColumnHeader

Question

我正在嘗試逐列自定義ListView的GridViewColumnHeader 。 我已經能夠通過手動將每列的GridViewColumnHeader設置為內聯 XAML 來做到這一點（請參閱“Thing 2”列），這沒關系，但超級重復，但我真的更願意使用帶有控制模板的可重用樣式一些附加屬性（嘗試在“事物 1”列中）。

基本上，我需要設置度量單位文本塊以及頁腳標記文本塊的樣式。

附加的屬性似乎已設置，但我無法弄清楚如何在模板中提取它們的值。

我意識到GridColumnHeader不是可視化樹的一部分，這可能是這里的主要問題，但它似乎如此接近！

“事物 1”列的樣式設置為內聯 XAML，直到我弄清楚如何獲取附加的屬性值。 理想情況下，它將設置在像ExampleListViewHeader這樣的控件模板中。

我已經刪除了所有不相關的代碼：

主窗口.xaml

<Window.Resources>
        <x:Array x:Key="ExampleItems" Type="{x:Type local:ExampleItems}">
            <local:ExampleItems Cell1="Item 1-1" Cell2="Item 1-2" Cell3="Item 1-3" />
            <local:ExampleItems Cell1="Item 2-1" Cell2="Item 2-2" Cell3="Item 2-3" />
            <local:ExampleItems Cell1="Item 3-1" Cell2="Item 3-2" Cell3="Item 3-3" />
            <local:ExampleItems Cell1="Item 4-1" Cell2="Item 4-2" Cell3="Item 4-3" />
        </x:Array>

        <Style x:Key="ExampleListView" TargetType="{x:Type ListView}">
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="Margin" Value="0, 0, 0, 5" />
        </Style>

        <Style x:Key="ExampleListViewHeader" TargetType="{x:Type GridViewColumnHeader}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <TextBlock Text="{TemplateBinding Content}" Width="{TemplateBinding Width}" Padding="2, 0" TextWrapping="Wrap" VerticalAlignment="Bottom"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontFamily" Value="{DynamicResource PLC_Font}" />
            <Setter Property="FontSize" Value="{DynamicResource PLC_FontSize_Sub_1}" />
            <Setter Property="FontStyle" Value="Italic" />
            <Setter Property="Foreground" Value="Black" />
        </Style>
    </Window.Resources>
    
    <Grid>
        <ListView ItemsSource="{StaticResource ExampleItems}" Style="{StaticResource ExampleListView}">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Width="100"
                                        local:HeaderAttachedProperties.Marker="1"
                                        local:HeaderAttachedProperties.UofM=" (ft) "
                                        DisplayMemberBinding="{Binding Cell1}">
                            <GridViewColumnHeader>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" Text="Thing 1" VerticalAlignment="Bottom"/>
                                    <TextBlock Grid.Column="1" Text=" (ft) " FontSize="10" VerticalAlignment="Center"/>

                                    <!--<TextBlock Grid.Column="2" Text="{TemplateBinding local:HeaderAttachedProperties.Marker}"/>-->

                                    <!--<TextBlock Grid.Column="2" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:HeaderAttachedProperties.Marker)}"/>-->
                                    
                                    <!--<TextBlock Grid.Column="2" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type GridViewColumn}}, Path=(local:HeaderAttachedProperties.Marker)}"/>-->
                                    <!--<TextBlock Grid.Column="2" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=GridViewColumn}, Path=(local:HeaderAttachedProperties.Marker)}"/>-->
                                    
                                </Grid>
                            </GridViewColumnHeader>
                        </GridViewColumn>

                        <GridViewColumn Width="100"
                                        DisplayMemberBinding="{Binding Cell2}">
                            <GridViewColumnHeader>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" Text="Thing 2" VerticalAlignment="Bottom"/>
                                    <TextBlock Grid.Column="1" Text=" (ft) " FontSize="10" VerticalAlignment="Center"/>

                                    <TextBlock Grid.Column="2" Text="*" FontSize="10" VerticalAlignment="Center"/>
                                </Grid>
                            </GridViewColumnHeader>
                        </GridViewColumn>
                        
                        <GridViewColumn Header="Thing 3" DisplayMemberBinding="{Binding Cell3}" HeaderContainerStyle="{StaticResource ExampleListViewHeader}" />
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>

示例項目

public class ExampleItems
{
    public string Cell1 { get; set; }
    public string Cell2 { get; set; }
    public string Cell3 { get; set; }
}

標頭附加屬性

public class HeaderAttachedProperties : DependencyObject
{
    public static readonly DependencyProperty MarkerProperty = DependencyProperty.RegisterAttached(
        name: "Marker",
        propertyType: typeof(string),
        ownerType: typeof(HeaderAttachedProperties),
        defaultMetadata: new PropertyMetadata(""));

    public static string GetMarker(DependencyObject pDependencyObject)
    {
        return (string)pDependencyObject.GetValue(MarkerProperty);
    }

    public static void SetMarker(DependencyObject pDependencyObject, string pValue)
    {
        pDependencyObject.SetValue(MarkerProperty, pValue);
    }

    public static readonly DependencyProperty UofMProperty = DependencyProperty.RegisterAttached(
        name: "UofM",
        propertyType: typeof(string),
        ownerType: typeof(HeaderAttachedProperties),
        defaultMetadata: new PropertyMetadata(""));

    public static string GetUofM(DependencyObject pDependencyObject)
    {
        return (string)pDependencyObject.GetValue(UofMProperty);
    }

    public static void SetUofM(DependencyObject pDependencyObject, string pValue)
    {
        pDependencyObject.SetValue(UofMProperty, pValue);
    }
}

Answer 1

您不一定需要ControlTemplate 。 您可以改用DataTemplate 。 為了綁定GridViewColumn上的附加屬性，您可以使用GridViewColumnHeader的Column屬性。

<Style x:Key="ListViewHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
   <Setter Property="FontFamily" Value="{DynamicResource PLC_Font}" />
   <Setter Property="FontSize" Value="{DynamicResource PLC_FontSize_Sub_1}" />
   <Setter Property="FontStyle" Value="Italic" />
   <Setter Property="Foreground" Value="Black" />
</Style>

<GridViewColumn Width="100"
                local:HeaderAttachedProperties.Marker="1"
                local:HeaderAttachedProperties.UofM=" (ft) "
                DisplayMemberBinding="{Binding Cell1}"
                HeaderContainerStyle="{StaticResource ListViewHeaderStyle}">
   <GridViewColumn.HeaderTemplate>
      <DataTemplate>
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto" />
               <ColumnDefinition Width="Auto" />
               <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="Thing 1" VerticalAlignment="Bottom"/>
            <TextBlock Grid.Column="1" Text="{Binding Column.(local:HeaderAttachedProperties.UofM), RelativeSource={RelativeSource AncestorType={x:Type GridViewColumnHeader}}}" FontSize="10" VerticalAlignment="Center"/>
            <TextBlock Grid.Column="2" Text="{Binding Column.(local:HeaderAttachedProperties.Marker), RelativeSource={RelativeSource AncestorType={x:Type GridViewColumnHeader}}}"/>
         </Grid>
      </DataTemplate>
   </GridViewColumn.HeaderTemplate>
</GridViewColumn>

如果您也參數化第一個TextBlock ，您可以提取並重用它。

<DataTemplate x:Key="ListViewHeaderTemplate">
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0" Text="{Binding Column.(local:HeaderAttachedProperties.Anything), RelativeSource={RelativeSource AncestorType={x:Type GridViewColumnHeader}}}" FontSize="10" VerticalAlignment="Center"/>
      <TextBlock Grid.Column="1" Text="{Binding Column.(local:HeaderAttachedProperties.UofM), RelativeSource={RelativeSource AncestorType={x:Type GridViewColumnHeader}}}" FontSize="10" VerticalAlignment="Center"/>
      <TextBlock Grid.Column="2" Text="{Binding Column.(local:HeaderAttachedProperties.Marker), RelativeSource={RelativeSource AncestorType={x:Type GridViewColumnHeader}}}"/>
   </Grid>
</DataTemplate>

<GridViewColumn Width="100"
                local:HeaderAttachedProperties.Marker="1"
                local:HeaderAttachedProperties.UofM=" (ft) "
                DisplayMemberBinding="{Binding Cell1}"
                HeaderTemplate="{StaticResource ListViewHeaderTemplate}"
                HeaderContainerStyle="{StaticResource ListViewHeaderStyle}">
</GridViewColumn>

您當然可以更改ControlTemplate ，但您應該小心，因為它定義了控件的視覺外觀和狀態。 在您當前的模板中，您會丟失大部分狀態。

<Style x:Key="ListViewHeader" TargetType="{x:Type GridViewColumnHeader}">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
            <Grid>
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <TextBlock Grid.Column="0" Text="{Binding Column.(local:HeaderAttachedProperties.Anything), RelativeSource={RelativeSource TemplatedParent}}" FontSize="10" VerticalAlignment="Center"/>
               <TextBlock Grid.Column="1" Text="{Binding Column.(local:HeaderAttachedProperties.UofM), RelativeSource={RelativeSource TemplatedParent}}" FontSize="10" VerticalAlignment="Center"/>
               <TextBlock Grid.Column="2" Text="{Binding Column.(local:HeaderAttachedProperties.Marker), RelativeSource={RelativeSource TemplatedParent}}"/>
            </Grid>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <Setter Property="FontFamily" Value="{DynamicResource PLC_Font}" />
   <Setter Property="FontSize" Value="{DynamicResource PLC_FontSize_Sub_1}" />
   <Setter Property="FontStyle" Value="Italic" />
   <Setter Property="Foreground" Value="Black" />
</Style>

<GridViewColumn Width="100"
                local:HeaderAttachedProperties.Marker="1"
                local:HeaderAttachedProperties.UofM=" (ft) "
                DisplayMemberBinding="{Binding Cell1}">
   <GridViewColumnHeader Style="{StaticResource ListViewHeader}"/>
</GridViewColumn>

我省略了TextWrapping和VerticalAlignment屬性，在需要的地方重新引入它們。