如何自定义列表视图水平滚动条的外观？

Question

我正在横向使用 wpf listview。当我固定列表视图的宽度时，水平滚动条会自动显示。

我想改变它的外观。

就像我的列表视图显示在中间，两个角都有左右滚动按钮。

我怎样才能做到这一点，请让我知道它的紧迫性......

Answer 1

如果我正确理解了您的要求：

1. 您不实际上想要使 ListView 将您的数据滚动到中心
2. 您确实想让 ListView 上的滚动条以不同的方式显示

例如，如果您使用的是 GridView，并且希望将水平滚动条转换为视图左侧和右侧的按钮，则可以这样设置样式：

<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="{x:Type ScrollViewer}">
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ScrollViewer}">
        <DockPanel Background="{TemplateBinding Background}" SnapsToDevicePixels="true">

          <RepeatButton DockPanel.Dock="Left"
                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                        Command="{x:Static ScrollBar.LineLeftCommand}"
                        Content="{StaticResource ScrollLeftArrow}"/>

          <RepeatButton DockPanel.Dock="Right"
                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                        Command="{x:Static ScrollBar.LineRightCommand}"
                        Content="{StaticResource ScrollRightArrow}"/>

          <ScrollBar DockPanel.Dock="Right"
                     Name="PART_VerticalScrollBar"
                     Orientation="Vertical"
                     Minimum="0.0"
                     Maximum="{TemplateBinding ScrollableHeight}"
                     ViewportSize="{TemplateBinding ViewportHeight}"
                     Value="{Binding Path=VerticalOffset,RelativeSource={RelativeSource TemplatedParent},Mode=OneWay}"
                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                     Cursor="Arrow"/>

          <ScrollBar DockPanel.Dock="Bottom"
                     Name="PART_HorizontalScrollBar"
                     Visibility="Hidden"
                     Orientation="Horizontal" />

          <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"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    CanContentScroll="{TemplateBinding CanContentScroll}"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
          </DockPanel>

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

这样做是修改 GridView 中使用的 ScrollViewer 模板，使其包含：

• 两个重复按钮，停靠在左右两侧，用于左右滚动
• 垂直滚动条以防需要垂直滚动
• 一个隐藏的水平滚动条来满足 ScrollViewer（它取决于实际存在的滚动条），并且
• 由表头和数据组成的普通 GridView 内容

类似的技术适用于 ListBox 等，只是 ScrollViewer 模板更简单，因为它不需要处理标题行。

如果您在启用滚动时解释您想要的确切布局（图片会很好），我可能会给您更好的答案。查看现有的 XAML 也可能会有所帮助。