Slider Styles and Templates
This topic describes the styles and templates for the Slider control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.
The following table lists the named parts for the Slider control.
|
Slider Part |
Type |
Description |
|---|---|---|
|
HorizontalTemplate |
The root of the horizontal slider template. |
|
|
HorizontalTrackLargeChangeIncreaseRepeatButton |
The large increase repeat button for the horizontal slider template. |
|
|
HorizontalTrackLargeChangeDecreaseRepeatButton |
The large decrease repeat button for the horizontal slider template. |
|
|
HorizontalThumb |
The Thumb for the dragging track of the horizontal slider template. |
|
|
VerticalTemplate |
The root of the vertical slider template. |
|
|
VerticalTrackLargeChangeIncreaseRepeatButton |
The large increase repeat button for the vertical slider template. |
|
|
VerticalTrackLargeChangeDecreaseRepeatButton |
The large decrease repeat button for the vertical slider template. |
|
|
VerticalThumb |
The Thumb for the dragging track of the vertical slider template. |
The following table lists the visual states for the Slider control.
|
VisualState Name |
VisualStateGroup Name |
Description |
|---|---|---|
|
Normal |
CommonStates |
The default state. |
|
MouseOver |
CommonStates |
The mouse pointer is positioned over the control. |
|
Disabled |
CommonStates |
The control is disabled. |
|
Focused |
FocusStates |
The control has focus. |
|
Unfocused |
FocusStates |
The control does not have focus. |
The Thumb control does not have any named parts.
The following table lists the visual states for the Thumb class.
|
VisualState Name |
VisualStateGroup Name |
Description |
|---|---|---|
|
Normal |
CommonStates |
The default state. |
|
MouseOver |
CommonStates |
The mouse pointer is positioned over the control. |
|
Pressed |
CommonStates |
The control is pressed. |
|
Disabled |
CommonStates |
The control is disabled. |
|
Focused |
FocusStates |
The control has focus. |
|
Unfocused |
FocusStates |
The control does not have focus. |
The following shows the XML namespace mapping that you have to specify when you work with styles and templates.
<!-- XML Namespace mapping. --> xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
Note The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.
The following XAML show the default styles and templates for the Slider control and the Thumb class.
<Style TargetType="Slider"> <Setter Property="BorderThickness" Value="1" /> <Setter Property="Maximum" Value="10" /> <Setter Property="Minimum" Value="0" /> <Setter Property="Value" Value="0" /> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Slider"> <Grid x:Name="Root"> <Grid.Resources> <ControlTemplate x:Key="RepeatButtonTemplate"> <Grid x:Name="Root" Opacity="0" Background="Transparent"/> </ControlTemplate> </Grid.Resources> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"/> <vsm:VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThumbDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <!-- Horizontal Template --> <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!-- Track Layer --> <Rectangle x:Name="TrackRectangle" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFE6EFF7" Grid.Column="0" Grid.ColumnSpan="3" Height="3" RadiusX="1" RadiusY="1" Margin="5,0,5,0" /> <Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Visibility="Collapsed" Fill="White" Opacity=".55" Grid.Column="0" Grid.ColumnSpan="3" Height="3" RadiusX="1" RadiusY="1" Margin="5,0,5,0" /> <!-- Repeat Buttons + Thumb --> <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="0"/> <Thumb Height="18" x:Name="HorizontalThumb" Width="11" Grid.Column="1" IsTabStop="True"/> <Rectangle x:Name="ThumbDisabledOverlay" RadiusX="2" RadiusY="2" Width="11" Grid.Column="1" Fill="White" Opacity=".55" Visibility="Collapsed"/> <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Column="2"/> </Grid> <!-- Vertical Template --> <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Background="{TemplateBinding Background}"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!-- Track Layer --> <Rectangle Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFE6EFF7" Grid.Row="0" Grid.RowSpan="3" Width="3" RadiusX="1" RadiusY="1" Margin="0,5,0,5" /> <Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Visibility="Collapsed" Fill="White" Opacity=".55" Grid.Row="0" Grid.RowSpan="3" Width="3" RadiusX="1" RadiusY="1" Margin="0,5,0,5" /> <!-- Repeat Buttons + Thumb --> <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="2"/> <Thumb Height="11" x:Name="VerticalThumb" Width="18" Grid.Row="1" IsTabStop="True"/> <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" Width="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" Grid.Row="0"/> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
<Style TargetType="Thumb"> <Setter Property="Background" Value="#FF1F3B53"/> <Setter Property="BorderThickness" Value="1" /> <Setter Property="IsTabStop" Value="False"/> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Thumb"> <Grid> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F2FFFFFF"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#CCFFFFFF"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#7FFFFFFF"/> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF6DBDD1"/> <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#D8FFFFFF"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#C6FFFFFF"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#8CFFFFFF"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#3FFFFFFF"/> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Unfocused"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Border x:Name="Background" CornerRadius="2" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> <Grid Background="{TemplateBinding Background}" Margin="1"> <Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" /> <Rectangle x:Name="BackgroundGradient" > <Rectangle.Fill> <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1"> <GradientStop Color="#FFFFFFFF" Offset="0" /> <GradientStop Color="#F9FFFFFF" Offset="0.375" /> <GradientStop Color="#E5FFFFFF" Offset="0.625" /> <GradientStop Color="#C6FFFFFF" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> </Border> <Rectangle x:Name="DisabledVisualElement" RadiusX="2" RadiusY="2" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" /> <Rectangle x:Name="FocusVisualElement" RadiusX="1" RadiusY="1" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
