Compartir a través de

Ejemplo de ControlTemplate de ScrollBar

Actualización: noviembre 2007

Los controles de Windows Presentation Foundation (WPF) tienen un objeto ControlTemplate que contiene el árbol visual de ese control. Puede modificar el aspecto de la estructura y la apariencia de un control modificando el objeto ControlTemplate de ese control. No existe ningún modo de reemplazar únicamente una parte del árbol visual de un control; para modificar el árbol visual de un control, debe establecer la propiedad Template del control en su nuevo y completo objeto ControlTemplate.

En este tema se muestra el objeto ControlTemplate del control ScrollBar de WPF.

Este tema contiene las secciones siguientes.

  • Requisitos previos
  • Ejemplo de ControlTemplate de ScrollBar
  • Temas relacionados

Requisitos previos

Para ejecutar los ejemplos de este tema, debe saber cómo escribir aplicaciones de WPF. Para obtener más información, consulte Información general sobre Windows Presentation Foundation. También debe saber cómo se utilizan los estilos en WPF. Para obtener más información, consulte Aplicar estilos y plantillas.

Ejemplo de ControlTemplate de ScrollBar

Aunque este ejemplo contiene todos los elementos definidos en el objeto ControlTemplate de un objeto ScrollBar de manera predeterminada, los valores específicos deben tomarse como ejemplos.

<Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type RepeatButton}">
        <Border 
          Name="Border"
          Margin="1" 
          CornerRadius="2" 
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}"
          BorderThickness="1">
          <Path 
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Fill="{StaticResource GlyphBrush}"
            Data="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" />
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="IsTabStop" Value="false"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type RepeatButton}">
        <Border Background="Transparent" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="IsTabStop" Value="false"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Thumb}">
        <Border 
          CornerRadius="2" 
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="1" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
  <Grid >
    <Grid.RowDefinitions>
      <RowDefinition MaxHeight="18"/>
      <RowDefinition Height="0.00001*"/>
      <RowDefinition MaxHeight="18"/>
    </Grid.RowDefinitions>
    <Border
      Grid.RowSpan="3"
      CornerRadius="2" 
      Background="#F0F0F0" />
    <RepeatButton 
      Grid.Row="0"                           
      Style="{StaticResource ScrollBarLineButton}"
      Height="18"
      Command="ScrollBar.LineUpCommand"
      Content="M 0 4 L 8 4 L 4 0 Z" />
    <Track 
      Name="PART_Track"
      Grid.Row="1"
      IsDirectionReversed="true">
      <Track.DecreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageUpCommand" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb 
          Style="{StaticResource ScrollBarThumb}" 
          Margin="1,0,1,0"  
          Background="{StaticResource HorizontalNormalBrush}"
          BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageDownCommand" />
      </Track.IncreaseRepeatButton>
    </Track>
    <RepeatButton 
      Grid.Row="3" 
      Style="{StaticResource ScrollBarLineButton}"
      Height="18"
      Command="ScrollBar.LineDownCommand"
      Content="M 0 0 L 4 4 L 8 0 Z"/>
  </Grid>
</ControlTemplate>

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
  <Grid >
    <Grid.ColumnDefinitions>
      <ColumnDefinition MaxWidth="18"/>
      <ColumnDefinition Width="0.00001*"/>
      <ColumnDefinition MaxWidth="18"/>
    </Grid.ColumnDefinitions>
    <Border
      Grid.ColumnSpan="3"
      CornerRadius="2" 
      Background="#F0F0F0" />
    <RepeatButton 
      Grid.Column="0"                           
      Style="{StaticResource ScrollBarLineButton}"
      Width="18"
      Command="ScrollBar.LineLeftCommand"
      Content="M 4 0 L 4 8 L 0 4 Z" />
    <Track 
      Name="PART_Track"
      Grid.Column="1"
      IsDirectionReversed="False">
      <Track.DecreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageLeftCommand" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb 
          Style="{StaticResource ScrollBarThumb}" 
          Margin="0,1,0,1"  
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageRightCommand" />
      </Track.IncreaseRepeatButton>
    </Track>
    <RepeatButton 
      Grid.Column="3" 
      Style="{StaticResource ScrollBarLineButton}"
      Width="18"
      Command="ScrollBar.LineRightCommand"
      Content="M 0 0 L 4 4 L 0 8 Z"/>
  </Grid>
</ControlTemplate>

<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Style.Triggers>
    <Trigger Property="Orientation" Value="Horizontal">
      <Setter Property="Width" Value="Auto"/>
      <Setter Property="Height" Value="18" />
      <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
    </Trigger>
    <Trigger Property="Orientation" Value="Vertical">
      <Setter Property="Width" Value="18"/>
      <Setter Property="Height" Value="Auto" />
      <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
    </Trigger>
  </Style.Triggers>
</Style>

En el ejemplo anterior se utiliza uno o más de los siguientes recursos.

<!-- Fill Brushes -->

<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#AAA" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#BBB" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="0.1"/>
      <GradientStop Color="#EEE" Offset="0.9"/>
      <GradientStop Color="#FFF" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />

<!-- Border Brushes -->

<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#777" Offset="0.0"/>
      <GradientStop Color="#000" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#444" Offset="0.0"/>
      <GradientStop Color="#888" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />

<!-- Miscellaneous Brushes -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />

Para obtener el ejemplo completo, vea Ejemplo Styling with ControlTemplates.

Vea también

Conceptos

Instrucciones para el diseño de controles con estilos

Otros recursos

Ejemplos de ControlTemplate

  • Last updated on