Gewusst wie: Anpassen der Größe des Ziehpunkts auf einer Bildlaufleiste

In diesem Thema wird erläutert, wie der Thumb einer ScrollBar auf eine feste Größe festgelegt und eine minimale Größe für den Thumb einer ScrollBar angegeben wird.

Beispiel

Beschreibung

Im folgenden Beispiel wird eine ScrollBar erstellt, die einen Thumb mit einer festen Größe besitzt. Im Beispiel wird die ViewportSize-Eigenschaft für den Thumb auf NaN festgelegt, außerdem die Höhe für den Thumb. Um eine horizontale ScrollBar mit einem Thumb fester Breite zu erstellen, legen Sie die Breite für den Thumb fest.

Code

<Style TargetType="ScrollBar">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ScrollBar">
        <Grid Name="Bg"
              Background="{TemplateBinding Background}"
              SnapsToDevicePixels="true">
          <Grid.RowDefinitions>
            <RowDefinition MaxHeight="{DynamicResource 
            {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
            <RowDefinition Height="0.00001*"/>
            <RowDefinition MaxHeight="{DynamicResource 
            {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
          </Grid.RowDefinitions>
          <RepeatButton Style="{StaticResource ScrollBarButton}"
                        IsEnabled="{TemplateBinding IsMouseOver}"
                        Height="18"

                        Command="ScrollBar.LineUpCommand"
                        Content="M 0 4 L 8 4 L 4 0 Z" />
          <!-- Set the ViewporSize to NaN to disable autosizing of the Thumb. -->
          <Track Name="PART_Track" 
                 ViewportSize="NaN"
                 IsDirectionReversed="true"
                 Grid.Row="1"
                 Grid.ZIndex="-1">
            <Track.DecreaseRepeatButton>
              <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}"
                            Command="ScrollBar.PageUpCommand"/>
            </Track.DecreaseRepeatButton>
            <Track.IncreaseRepeatButton>
              <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}"
                            Command="ScrollBar.PageDownCommand"/>
            </Track.IncreaseRepeatButton>
            <Track.Thumb>
              <!-- Set the height of the Thumb.-->
              <Thumb Height="30"/>
            </Track.Thumb>
          </Track>
          <RepeatButton 
            Grid.Row="2" 
            Style="{StaticResource ScrollBarButton}"
            Height="18"
            Command="ScrollBar.LineDownCommand"
            Content="M 0 0 L 4 4 L 8 0 Z"/>

        </Grid>
        <ControlTemplate.Triggers>
          <Trigger SourceName="PART_Track" Property="IsEnabled" Value="false">
            <Setter TargetName="PART_Track" Property="Visibility" Value="Hidden"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Beschreibung

Im folgenden Beispiel wird eine ScrollBar erstellt, die einen Thumb mit einer minimalen Größe besitzt. Im Beispiel wird der VerticalScrollBarButtonHeightKey-Wert festgelegt. Um eine horizontale ScrollBar mit einem Thumb zu erstellen, der eine minimale Breite hat, legen Sie den HorizontalScrollBarButtonWidthKey fest.

Code

<Style TargetType="ScrollBar">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ScrollBar">
        <Grid Name="Bg"
              Background="{TemplateBinding Background}"
              SnapsToDevicePixels="true">
          <Grid.RowDefinitions>
            <RowDefinition MaxHeight="{DynamicResource 
            {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
            <RowDefinition Height="0.00001*"/>
            <RowDefinition MaxHeight="{DynamicResource 
            {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
          </Grid.RowDefinitions>
          <RepeatButton Style="{StaticResource ScrollBarButton}"
                        IsEnabled="{TemplateBinding IsMouseOver}"
                        Height="18"
                        Command="ScrollBar.LineUpCommand"
                        Content="M 0 4 L 8 4 L 4 0 Z" />
          <Track Name="PART_Track" 
               IsDirectionReversed="true"
               Grid.Row="1"
               Grid.ZIndex="-1">
            <Track.Resources>
              <!-- Set the Thumb's minimum height to 50.
            The Thumb's minimum height is half the
            value of VerticalScrollBarButtonHeightKey. -->
              <sys:Double 
                x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">
                100
              </sys:Double>
            </Track.Resources>
            <Track.DecreaseRepeatButton>
              <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}"
                            Command="ScrollBar.PageUpCommand"/>
            </Track.DecreaseRepeatButton>
            <Track.IncreaseRepeatButton>
              <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}"
                            Command="ScrollBar.PageDownCommand"/>
            </Track.IncreaseRepeatButton>
            <Track.Thumb>
              <Thumb/>
            </Track.Thumb>
          </Track>
          <RepeatButton 
            Grid.Row="2" 
            Style="{StaticResource ScrollBarButton}"
            Height="18"
            Command="ScrollBar.LineDownCommand"
            Content="M 0 0 L 4 4 L 8 0 Z"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger SourceName="PART_Track" 
                   Property="IsEnabled" Value="false">
            <Setter TargetName="PART_Track" 
                    Property="Visibility" Value="Hidden"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Siehe auch

Konzepte

ScrollBar-Stile und -Vorlagen