Procedura: personalizzare le dimensioni del cursore in una barra di scorrimento

  • Articolo

In questo argomento viene illustrato come impostare l'oggetto Thumb di su ScrollBar una dimensione fissa e come specificare una dimensione minima per l'oggetto Thumb di un oggetto ScrollBar.

Creare una barra di scorrimento con dimensioni massime fisse

Nell'esempio seguente viene creato un ScrollBarThumb oggetto con una dimensione fissa. Nell'esempio viene impostata la ViewportSize proprietà di Thumb su NaN e viene impostata l'altezza dell'oggetto Thumb. Per creare un oggetto orizzontale ScrollBar con una Thumb larghezza fissa, impostare la larghezza dell'oggetto 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>

Creare una barra di scorrimento con dimensioni minime

Nell'esempio seguente viene creato un ScrollBar oggetto con Thumb una dimensione minima. Nell'esempio viene impostato il valore di VerticalScrollBarButtonHeightKey. Per creare un oggetto orizzontale ScrollBar con una Thumb larghezza minima, impostare .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>

Vedi anche