如何减小滚动条的大小？

如何解决如何减小滚动条的大小？

我没有运气就试过了。

<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 的空间？

解决方法

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">
            <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 来隐式此样式，以便将其应用于范围内的所有 ScrollViewer，或者您可以创建自定义 ListBox 控件模板，您可以在其中为内部 ScrollViewer 指定此模板，以便仅在此处应用。