Estilos y plantillas de Slider

2011-08-10

En este tema, se describen los estilos y plantillas del control Slider. Puede modificar la plantilla ControlTemplate predeterminada para dar un aspecto único al control. Para obtener más información, vea Personalizar la apariencia de un control existente creando una clase ControlTemplate.

Elementos de Slider

En la siguiente tabla se muestran los elementos con nombre del control Slider.

Parte	Tipo	Descripción
PART_Track	Track	Contenedor del elemento que indica la posición de Slider.
PART_SelectionRange	FrameworkElement	Elemento que muestra un intervalo de selección a lo largo de Slider. El intervalo de selección está visible sólo si la propiedad IsSelectionRangeEnabled es true.

Estados de Slider

En la tabla siguiente se muestran los estados visuales del control Slider.

Nombre de VisualState	Nombre de VisualStateGroup	Descripción
Normal	CommonStates	Estado predeterminado.
MouseOver	CommonStates	El puntero del mouse está situado sobre el control.
Disabled	CommonStates	El control está deshabilitado.
Focused	FocusStates	El control tiene el foco.
Unfocused	FocusStates	El control no tiene el foco.
Valid	ValidationStates	El control utiliza la clase Validation y la propiedad adjunta Validation.HasError es false.
InvalidFocused	ValidationStates	La propiedad adjunta Validation.HasError es true, tiene el control y tiene el foco.
InvalidUnfocused	ValidationStates	La propiedad adjunta Validation.HasError es true, tiene el control pero no tiene el foco.

Ejemplo de ControlTemplate de Slider

En el ejemplo siguiente se muestra cómo definir ControlTemplate para el control Slider.

<Style x:Key="SliderButtonStyle"
       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="SliderThumbStyle"
       TargetType="{x:Type Thumb}">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Height"
          Value="14" />
  <Setter Property="Width"
          Value="14" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Thumb}">
        <Ellipse x:Name="Ellipse"
                 StrokeThickness="1">
          <Ellipse.Stroke>
            <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
              <LinearGradientBrush.GradientStops>
                <GradientStopCollection>
                  <GradientStop Color="{DynamicResource BorderLightColor}"
                                Offset="0.0" />
                  <GradientStop Color="{DynamicResource BorderDarkColor}"
                                Offset="1.0" />
                </GradientStopCollection>
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Ellipse.Stroke>
          <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1"
                                 StartPoint="0.5,0">
              <GradientStop Color="{DynamicResource ControlMediumColor}"
                            Offset="1" />
              <GradientStop Color="{DynamicResource ControlLightColor}" />
            </LinearGradientBrush>
          </Ellipse.Fill>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                Storyboard.TargetName="Ellipse">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlMouseOverColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                Storyboard.TargetName="Ellipse">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlPressedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
                    (GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                Storyboard.TargetName="Ellipse">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlDarkColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        </Ellipse>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<!--Template when the orientation of the Slider is Horizontal.-->
<ControlTemplate x:Key="HorizontalSlider"
                 TargetType="{x:Type Slider}">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto"
                     MinHeight="{TemplateBinding MinHeight}" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TickBar x:Name="TopTick"
             SnapsToDevicePixels="True"
             Placement="Top"
             Height="4"
             Visibility="Collapsed">
      <TickBar.Fill>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
      </TickBar.Fill>
    </TickBar>
    <Border x:Name="TrackBackground"
            Margin="0"
            CornerRadius="2"
            Height="4"
            Grid.Row="1"
            BorderThickness="1">
      <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,1">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="{DynamicResource BorderLightColor}"
                            Offset="0.0" />
              <GradientStop Color="{DynamicResource BorderDarkColor}"
                            Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Border.BorderBrush>
      <Border.Background>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,1">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="{DynamicResource ControlLightColor}"
                            Offset="0.0" />
              <GradientStop Color="{DynamicResource SliderTrackDarkColor}"
                            Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Border.Background>
    </Border>
    <Track Grid.Row="1"
           x:Name="PART_Track">
      <Track.DecreaseRepeatButton>
        <RepeatButton Style="{StaticResource SliderButtonStyle}"
                      Command="Slider.DecreaseLarge" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb Style="{StaticResource SliderThumbStyle}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton Style="{StaticResource SliderButtonStyle}"
                      Command="Slider.IncreaseLarge" />
      </Track.IncreaseRepeatButton>
    </Track>
    <TickBar x:Name="BottomTick"
             SnapsToDevicePixels="True"
             Grid.Row="2"
             Fill="{TemplateBinding Foreground}"
             Placement="Bottom"
             Height="4"
             Visibility="Collapsed" />
  </Grid>
  <ControlTemplate.Triggers>
    <Trigger Property="TickPlacement"
             Value="TopLeft">
      <Setter TargetName="TopTick"
              Property="Visibility"
              Value="Visible" />
    </Trigger>
    <Trigger Property="TickPlacement"
             Value="BottomRight">
      <Setter TargetName="BottomTick"
              Property="Visibility"
              Value="Visible" />
    </Trigger>
    <Trigger Property="TickPlacement"
             Value="Both">
      <Setter TargetName="TopTick"
              Property="Visibility"
              Value="Visible" />
      <Setter TargetName="BottomTick"
              Property="Visibility"
              Value="Visible" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<!--Template when the orientation of the Slider is Vertical.-->
<ControlTemplate x:Key="VerticalSlider"
                 TargetType="{x:Type Slider}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="Auto"
                        MinWidth="{TemplateBinding MinWidth}" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TickBar x:Name="TopTick"
             SnapsToDevicePixels="True"
             Placement="Left"
             Width="4"
             Visibility="Collapsed">
      <TickBar.Fill>
        <SolidColorBrush Color="{DynamicResource GlyphColor}" />
      </TickBar.Fill>
    </TickBar>

    <Border x:Name="TrackBackground"
            Margin="0"
            CornerRadius="2"
            Width="4"
            Grid.Column="1"
            BorderThickness="1">
      <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,0">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="{DynamicResource BorderLightColor}"
                            Offset="0.0" />
              <GradientStop Color="{DynamicResource BorderDarkColor}"
                            Offset="1.0" />
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>

      </Border.BorderBrush>
      <Border.Background>
        <LinearGradientBrush EndPoint="1,0"
                             StartPoint="0.25,0">
          <GradientStop Color="{DynamicResource ControlLightColor}"
                        Offset="0" />
          <GradientStop Color="{DynamicResource SliderTrackDarkColor}"
                        Offset="1" />
        </LinearGradientBrush>
      </Border.Background>
    </Border>
    <Track Grid.Column="1"
           x:Name="PART_Track">
      <Track.DecreaseRepeatButton>
        <RepeatButton Style="{StaticResource SliderButtonStyle}"
                      Command="Slider.DecreaseLarge" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb Style="{StaticResource SliderThumbStyle}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton Style="{StaticResource SliderButtonStyle}"
                      Command="Slider.IncreaseLarge" />
      </Track.IncreaseRepeatButton>
    </Track>
    <TickBar x:Name="BottomTick"
             SnapsToDevicePixels="True"
             Grid.Column="2"
             Fill="{TemplateBinding Foreground}"
             Placement="Right"
             Width="4"
             Visibility="Collapsed" />
  </Grid>
  <ControlTemplate.Triggers>
    <Trigger Property="TickPlacement"
             Value="TopLeft">
      <Setter TargetName="TopTick"
              Property="Visibility"
              Value="Visible" />
    </Trigger>
    <Trigger Property="TickPlacement"
             Value="BottomRight">
      <Setter TargetName="BottomTick"
              Property="Visibility"
              Value="Visible" />
    </Trigger>
    <Trigger Property="TickPlacement"
             Value="Both">
      <Setter TargetName="TopTick"
              Property="Visibility"
              Value="Visible" />
      <Setter TargetName="BottomTick"
              Property="Visibility"
              Value="Visible" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<Style TargetType="{x:Type Slider}">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Style.Triggers>
    <Trigger Property="Orientation"
             Value="Horizontal">
      <Setter Property="MinWidth"
              Value="104" />
      <Setter Property="MinHeight"
              Value="21" />
      <Setter Property="Template"
              Value="{StaticResource HorizontalSlider}" />
    </Trigger>
    <Trigger Property="Orientation"
             Value="Vertical">
      <Setter Property="MinWidth"
              Value="21" />
      <Setter Property="MinHeight"
              Value="104" />
      <Setter Property="Template"
              Value="{StaticResource VerticalSlider}" />
    </Trigger>
  </Style.Triggers>
</Style>

El ejemplo anterior utiliza uno o más de los siguientes recursos.

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

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

Vea también

Historial de cambios

Fecha	Historial	Motivo
Agosto de 2010	Se ha agregado un ejemplo de ControlTemplate.	Mejora de la información.

Agosto de 2010

Se ha agregado un ejemplo de ControlTemplate.

Mejora de la información.

Compartir a través de

Estilos y plantillas de Slider

Elementos de Slider

Estados de Slider

Ejemplo de ControlTemplate de Slider

Vea también

Referencia

Conceptos

Otros recursos

Historial de cambios

Recursos adicionales