WPF 自定义 ListView 控件模板答案

【问题标题】：WPF Customizing ListView ControlTemplateWPF 自定义 ListView 控件模板
【发布时间】：2017-10-13 14:10:20
【问题描述】：

我正在尝试制作自己的 ListView 图形样式，但我不明白源代码。任何人都可以向我解释下面代码的各个部分吗？

<!-- =========================================================== ListView ============================================================ -->
<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollViewer">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <DockPanel Margin="{TemplateBinding Padding}">
                        <ScrollViewer DockPanel.Dock="Top"
                                      HorizontalScrollBarVisibility="Hidden"
                                      VerticalScrollBarVisibility="Hidden"
                                      Focusable="false">
                            <GridViewHeaderRowPresenter Margin="2,0,2,0"
                                                        Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"
                                                        ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}"
                                                        ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                                                        ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"
                                                        AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"
                                                        ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"
                                                        ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"
                                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>

                        <ScrollContentPresenter Name="PART_ScrollContentPresenter"
                                                KeyboardNavigation.DirectionalNavigation="Local"
                                                CanContentScroll="True" CanHorizontallyScroll="False" 
                                                CanVerticallyScroll="False"/>
                    </DockPanel>

                    <ScrollBar Name="PART_HorizontalScrollBar"
                               Orientation="Horizontal"
                               Grid.Row="1"
                               Maximum="{TemplateBinding ScrollableWidth}"
                               ViewportSize="{TemplateBinding ViewportWidth}"
                               Value="{TemplateBinding HorizontalOffset}"
                               Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                    <ScrollBar Name="PART_VerticalScrollBar"
                               Grid.Column="1"
                               Maximum="{TemplateBinding ScrollableHeight}"
                               ViewportSize="{TemplateBinding ViewportHeight}"
                               Value="{TemplateBinding VerticalOffset}"
                               Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
    <Setter Property="Width" Value="18"/>
    <Setter Property="Background" Value="{DynamicResource NormalBorderBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border Padding="{TemplateBinding Padding}"
                        Background="Transparent">
                    <Rectangle HorizontalAlignment="Center"
                               Width="1"
                               Fill="{TemplateBinding Background}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewColumnHeader">
                <Grid>
                    <Border Name="HeaderBorder"
                            BorderThickness="0,1,0,1"
                            BorderBrush="{DynamicResource NormalBorderBrush}"
                            Background="{DynamicResource LightBrush}"
                            Padding="2,0,2,0">
                        <ContentPresenter Name="HeaderContent"
                                          Margin="0,0,0,1"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <Thumb x:Name="PART_HeaderGripper"
                           HorizontalAlignment="Right"
                           Margin="0,0,-9,0"
                           Style="{StaticResource GridViewColumnHeaderGripper}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource NormalBrush}"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="HeaderBorder" Property="Background" Value="{DynamicResource PressedBrush}"/>
                        <Setter TargetName="HeaderContent" Property="Margin" Value="1,1,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Role" Value="Floating">
            <Setter Property="Opacity" Value="0.7"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Canvas Name="PART_FloatingHeaderCanvas">
                            <Rectangle Fill="#60000000"
                                       Width="{TemplateBinding ActualWidth}"
                                       Height="{TemplateBinding ActualHeight}"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="Role" Value="Padding">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Border Name="HeaderBorder"
                                BorderThickness="0,1,0,1"
                                BorderBrush="{DynamicResource NormalBorderBrush}"
                                Background="{DynamicResource LightBrush}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

<Style TargetType="{x:Type local:VsListView}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:VsListView}">
                <Border Name="Border"
                        BorderThickness="1"
                        CornerRadius="{DynamicResource MainCornerRadius}"
                        BorderBrush="{DynamicResource SolidBorderBrush}"
                        Background="Red">
                    <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource DisabledBorderBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如何更改页眉部分的视觉样式？代码的哪一部分处理了这个问题？我附上了截图。我对白色矩形很感兴趣：

【问题讨论】：

GridViewHeaderRowPresenter - 你读过这段代码吗？
我当然读过这段代码，但我所做的任何更改都不会反映。即使我删除了这部分代码。白色矩形仍然存在。
嗯，可能是因为它是ScrollViewer 的样式，而不是ListView... 再说一次，你读过这段代码吗？它就在那里，在第一行TargetType="ScrollViewer"
再一次，是的，我读过这段代码！但我认为你没有读到最后。您必须向下滚动。该代码来自该网站msdn.microsoft.com/fr-fr/library/ms788747(v=vs.85).aspx
我知道这个网站。他们没有在那里发布控件的默认代码。它是定制的，以显示它是如何完成的。我已经发布了一个可以帮助你的答案。创建空白项目并自己获取默认模板会更容易。原始代码非常简单，因此您不应该像您引用的网站中的那样迷失方向（您甚至不必像他们显示的那样对其进行编辑）。

标签： wpf xaml listview wpf-controls controltemplate

【解决方案1】：

我建议您使用 Blend 来获取默认样式和 ContentTemplate，然后根据您的需要对其进行编辑（请记住，用作模板的控件名称可能对给定逻辑背后的逻辑具有重要意义控制，所以要小心你正在编辑的内容）。

如果您不知道如何使用 Blend 来获取控件的模板，这里有一个在 documentation of Telerik controls 中描述的简单教程（不用担心，它对所有控件都适用）。您只需创建ListView.ContentTemplate 的副本，将其粘贴到您的应用程序中，您就可以开始（编辑）了。

【讨论】：

提示：在“对象和时间轴”面板上，当您为控件创建模板时，可能会显示一个新的层次结构。它只是更深入地跳转到控件的可视化树中。如果可以从中生成新模板，请检查新列表的每个位置。控件通常是由具有自己样式的控件构建的。