如何减小滚动条的大小？

Question

我试过了，但运气不好。

<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 留下的 space 仍然比我想要的多得多。如何减少 ScrollBar 的 space？

Answer 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 使此样式隐含，这样它将应用于范围内的所有 ScrollViewer，或者您可以创建自定义 ListBox 控件模板，你在哪里为内部 ScrollViewer 指定这个模板，以便只在那里应用它。

如何减小滚动条的大小？

How to reduce size of scrollbar?

wpf

xaml

controltemplate