如何减小滚动条的大小？答案

【问题标题】：How to reduce size of scrollbar?如何减小滚动条的大小？
【发布时间】：2021-07-22 07:19:04
【问题描述】：

我没有运气尝试过。

<ListBox ItemsSource="{Binding Path=Items}" ScrollViewer.CanContentScroll="False">
    <ListBox.Resources>
        <Style TargetType="ScrollBar">
            <Setter Property="Width" Value="4"/>
            <Setter Property="Template" Value="{DynamicResource MyScrollBar}"/>
        </Style>
    </ListBox.Resources>
</ListBox>

滚动条模板：

<ControlTemplate x:Key="MyScrollBar" TargetType="{x:Type ScrollBar}">
    <Track x:Name="PART_Track" Width="4" IsDirectionReversed="True" IsEnabled="{TemplateBinding IsMouseOver}">
        <Track.Thumb>
            <Thumb>
                <Thumb.Style>
                    <Style TargetType="{x:Type Thumb}">
                        <Setter Property="OverridesDefaultStyle" Value="True"/>
                        <Setter Property="IsTabStop" Value="False"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Thumb}">
                                    <Grid>
                                        <Border x:Name="thumb" BorderThickness="0" Background="Gray" Height="{TemplateBinding Height}" Width="4"/>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Thumb.Style>
            </Thumb>
        </Track.Thumb>
    </Track>
</ControlTemplate>

拇指改变了它的宽度。但是ListBox 仍然为ScrollBar 留下了比我想要的更多的空间。如何减少ScrollBar 的空间？

【问题讨论】：

标签： wpf xaml controltemplate

【解决方案1】：

ListBox 在其控制模板内部使用ScrollViewer。默认的ScrollViewer 模板将使用SystemParameters 中定义的滚动条宽度。调整它的一种简单方法是覆盖 ListBox 资源中的键。请注意，水平和垂直滚动条有不同的键。从长远来看，您可能希望同时适应两者。

<ListBox ItemsSource="{Binding Path=Items}" ScrollViewer.CanContentScroll="False">
    <ListBox.Resources>
        <system:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">4</system:Double>
        <Style TargetType="ScrollBar">
            <Setter Property="Width" Value="4"/>
            <Setter Property="Template" Value="{DynamicResource MyScrollBar}"/>
        </Style>
    </ListBox.Resources>
</ListBox>

另一种方法是为ScrollViewer 创建自定义控件模板。您可以参考ScrollViewer 的官方样式和模板documentation，以了解如何构建此模板。已经有一个示例，您可以在其中调整滚动条的宽度。

<Style x:Key="MyScrollViewer"
       TargetType="{x:Type ScrollViewer}">
  <Setter Property="OverridesDefaultStyle" Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ScrollViewer}">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <Border Grid.Column="1"
                  BorderThickness="0,1,1,1">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" />
          </Border>
          <ScrollBar x:Name="PART_VerticalScrollBar"
                     Value="{TemplateBinding VerticalOffset}"
                     Maximum="{TemplateBinding ScrollableHeight}"
                     ViewportSize="{TemplateBinding ViewportHeight}"
                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                     Width="4"/>
          <ScrollBar x:Name="PART_HorizontalScrollBar"
                     Orientation="Horizontal"
                     Grid.Row="1"
                     Grid.Column="1"
                     Value="{TemplateBinding HorizontalOffset}"
                     Maximum="{TemplateBinding ScrollableWidth}"
                     ViewportSize="{TemplateBinding ViewportWidth}"
                     Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

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

您可以通过省略x:Key 使这种样式隐式化，因此它将应用于范围内的所有ScrollViewers，或者您可以创建自定义ListBox 控件模板，您可以在其中将此模板用于内部ScrollViewer 以便仅在此处应用它。

【讨论】：