Partilhar via

Como: Personalizar o tamanho do polegar em uma barra de rolagem

  • Artigo

Este tópico explica como definir o Thumb de um ScrollBar para um tamanho fixo e como especificar um tamanho mínimo para o Thumb de um ScrollBar.

Criar uma barra de rolagem com um tamanho de polegar fixo

O exemplo a seguir cria um ScrollBar que tem um Thumb com um tamanho fixo. O exemplo define a propriedade ViewportSize do Thumb como NaN e define a altura do Thumb. Para criar uma ScrollBar horizontal com uma Thumb que tenha uma largura fixa, defina a largura do Thumb.

<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>

Criar uma barra de rolagem com um tamanho mínimo de polegar

O exemplo a seguir cria um ScrollBar que tem um Thumb com um tamanho mínimo. O exemplo define o valor de VerticalScrollBarButtonHeightKey. Para criar uma ScrollBar horizontal com um Thumb que tenha uma largura mínima, defina o HorizontalScrollBarButtonWidthKey.

<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>

Ver também