ScrollBar Styles and Templates
Microsoft Silverlight will reach end of support after October 2021. Learn more.
This topic describes the styles and templates for the ScrollBar 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.
ScrollBar Parts
The following table lists the named parts for the ScrollBar control.
ScrollBar Part |
Type |
Description |
|---|---|---|
HorizontalRoot |
The root of the ScrollBar if its orientation is horizontal. |
|
HorizontalLargeIncrease |
The RepeatButton that increases the ScrollBar’s value by the large change amount if its orientation is horizontal. |
|
HorizontalLargeDecrease |
The RepeatButton that decreases the ScrollBar’s value by the large change amount if its orientation is horizontal. |
|
HorizontalSmallIncrease |
The RepeatButton that increases the ScrollBar’s value by the small change amount if its orientation is horizontal. |
|
HorizontalSmallDecrease |
The RepeatButton that decreases the ScrollBar’s value by the small change amount if its orientation is horizontal. |
|
HorizontalThumb |
The Thumb that can be dragged to change the ScrollBar’s value if its orientation is horizontal. |
|
VerticalRoot |
The root of the ScrollBar if its orientation is vertical. |
|
VerticalLargeIncrease |
The RepeatButton that increases the ScrollBar’s value by the large change amount if its orientation is vertical. |
|
VerticalLargeDecrease |
The RepeatButton that decreases the ScrollBar’s value by the large change amount if its orientation is vertical. |
|
VerticalSmallIncrease |
The RepeatButton that increases the ScrollBar’s value by the small change amount if its orientation is vertical. |
|
VerticalSmallDecrease |
The RepeatButton that decreases the ScrollBar’s value by the small change amount if its orientation is vertical. |
|
VerticalThumb |
The Thumb that can be dragged to change the ScrollBar’s value if its orientation is vertical. |
ScrollBar States
The following table lists the visual states for the ScrollBar 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. |
Default Style and Template
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"
.gif "Note") 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 shows the default style and template for the ScrollBar control.
<Style TargetType="ScrollBar">
<Setter Property="MinWidth" Value="17"/>
<Setter Property="MinHeight" Value="17"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Root">
<Grid.Resources>
<!-- RepeatButton Templates -->
<ControlTemplate x:Key="RepeatButtonTemplate" TargetType="RepeatButton">
<Grid x:Name="Root" Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
<!-- Horizontal Inc/Dec Templates -->
<ControlTemplate x:Key="HorizontalIncrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#7FFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#CCFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#F2FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#6BFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#C6FFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#EAFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="0" To="#F4FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="DisabledElement" Storyboard.TargetProperty="Opacity" To=".7" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="Background" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF1F3B53" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
<GradientStop Color="#FF647480" Offset="1"/>
<GradientStop Color="#FFAEB7BF" Offset="0"/>
<GradientStop Color="#FF919EA7" Offset="0.35"/>
<GradientStop Color="#FF7A8A99" Offset="0.35"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BackgroundAnimation" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundGradient" Opacity="0" RadiusX="1" RadiusY="1" StrokeThickness="1" Margin="1" Stroke="#FFFFFFFF">
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0.013" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.603" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="Highlight" Opacity="0" RadiusX="1" RadiusY="1" IsHitTestVisible="false" Stroke="#FF6DBDD1" StrokeThickness="1" Margin="1" />
<Path Stretch="Uniform" Height="8" Width="4" Data="F1 M 511.047,352.682L 511.047,342.252L 517.145,347.467L 511.047,352.682 Z ">
<Path.Fill>
<SolidColorBrush x:Name="ButtonColor" Color="#FF333333" />
</Path.Fill>
</Path>
<Rectangle x:Name="DisabledElement" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FFFFFFFF"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="HorizontalDecrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundMouseOver" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#7FFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#CCFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#F2FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundPressed" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#6BFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#C6FFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#EAFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="0" To="#F4FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="DisabledElement" Storyboard.TargetProperty="Opacity" To=".7" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="Background" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF1F3B53" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
<GradientStop Color="#FF647480" Offset="1"/>
<GradientStop Color="#FFAEB7BF" Offset="0"/>
<GradientStop Color="#FF919EA7" Offset="0.35"/>
<GradientStop Color="#FF7A8A99" Offset="0.35"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BackgroundMouseOver" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundPressed" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundGradient" Opacity="0" RadiusX="1" RadiusY="1" StrokeThickness="1" Margin="1" Stroke="#FFFFFFFF">
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0.013" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.603" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="Highlight" Opacity="0" RadiusX="1" RadiusY="1" IsHitTestVisible="false" Stroke="#FF6DBDD1" StrokeThickness="1" Margin="1" />
<Path Stretch="Uniform" Height="8" Width="4" Data="F1 M 110.692,342.252L 110.692,352.682L 104.594,347.467L 110.692,342.252 Z ">
<Path.Fill>
<SolidColorBrush x:Name="ButtonColor" Color="#FF333333" />
</Path.Fill>
</Path>
<Rectangle x:Name="DisabledElement" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FFFFFFFF"/>
</Grid>
</ControlTemplate>
<!-- Vertical Inc/Dec Templates -->
<ControlTemplate x:Key="VerticalIncrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundMouseOver" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#7FFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#CCFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#F2FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundPressed" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#6BFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#C6FFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#EAFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="0" To="#F4FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="DisabledElement" Storyboard.TargetProperty="Opacity" To=".7" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="Background" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF1F3B53" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="1,.5" StartPoint="0,.5">
<GradientStop Color="#FF647480" Offset="1"/>
<GradientStop Color="#FFAEB7BF" Offset="0"/>
<GradientStop Color="#FF919EA7" Offset="0.35"/>
<GradientStop Color="#FF7A8A99" Offset="0.35"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BackgroundMouseOver" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundPressed" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundGradient" Opacity="0" RadiusX="1" RadiusY="1" StrokeThickness="1" Margin="1" Stroke="#FFFFFFFF">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,.7" EndPoint="1,.7">
<GradientStop Color="#FFFFFFFF" Offset="0.013" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.603" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="Highlight" Opacity="0" RadiusX="1" RadiusY="1" IsHitTestVisible="false" Stroke="#FF6DBDD1" StrokeThickness="1" Margin="1" />
<Path Stretch="Uniform" Height="4" Width="8" Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z ">
<Path.Fill>
<SolidColorBrush x:Name="ButtonColor" Color="#FF333333" />
</Path.Fill>
</Path>
<Rectangle x:Name="DisabledElement" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FFFFFFFF"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="VerticalDecrementTemplate" TargetType="RepeatButton">
<Grid x:Name="Root">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundMouseOver" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#7FFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#CCFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#F2FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundPressed" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#6BFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#C6FFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#EAFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="0" To="#F4FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="DisabledElement" Storyboard.TargetProperty="Opacity" To=".7" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="Background" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF1F3B53" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="1,.5" StartPoint="0,.5">
<GradientStop Color="#FF647480" Offset="1"/>
<GradientStop Color="#FFAEB7BF" Offset="0"/>
<GradientStop Color="#FF919EA7" Offset="0.35"/>
<GradientStop Color="#FF7A8A99" Offset="0.35"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BackgroundMouseOver" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundPressed" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundGradient" Opacity="0" RadiusX="1" RadiusY="1" StrokeThickness="1" Margin="1" Stroke="#FFFFFFFF">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,.7" EndPoint="1,.7">
<GradientStop Color="#FFFFFFFF" Offset="0.013" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.603" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="Highlight" Opacity="0" RadiusX="1" RadiusY="1" IsHitTestVisible="false" Stroke="#FF6DBDD1" StrokeThickness="1" Margin="1" />
<Path Stretch="Uniform" Height="4" Width="8" Data="F1 M 541.537,173.589L 531.107,173.589L 536.322,167.49L 541.537,173.589 Z ">
<Path.Fill>
<SolidColorBrush x:Name="ButtonColor" Color="#FF333333" />
</Path.Fill>
</Path>
<Rectangle x:Name="DisabledElement" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FFFFFFFF"/>
</Grid>
</ControlTemplate>
<!-- Thumb Templates -->
<ControlTemplate x:Key="VerticalThumbTemplate" 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:0:0" Storyboard.TargetName="BackgroundMouseOver" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#7FFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#CCFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#F2FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundPressed" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#6BFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#C6FFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#EAFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="0" To="#F4FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="ThumbVisual" Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid x:Name="ThumbVisual" Margin="1,0,1,0">
<Rectangle x:Name="Background" RadiusX="2" RadiusY="2" Fill="#FF1F3B53" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="1,.5" StartPoint="0,.5">
<GradientStop Color="#FF818F99" Offset="1"/>
<GradientStop Color="#FFC2C9CE" Offset="0"/>
<GradientStop Color="#FFB3BBC1" Offset="0.35"/>
<GradientStop Color="#FF96A4B1" Offset="0.35"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BackgroundMouseOver" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundPressed" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundGradient" RadiusX="1" RadiusY="1" StrokeThickness="1" Margin="1" Stroke="#FFFFFFFF">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,.7" EndPoint="1,.7">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.6" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="Highlight" RadiusX="1" RadiusY="1" Opacity="0" IsHitTestVisible="false" Stroke="#FF6DBDD1" StrokeThickness="1" Margin="1" />
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="HorizontalThumbTemplate" 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:0:0" Storyboard.TargetName="BackgroundMouseOver" Storyboard.TargetProperty="Opacity" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#7FFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#CCFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#F2FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="BackgroundPressed" Storyboard.TargetProperty="Opacity" To="1"/>
<DoubleAnimation Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#6BFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#C6FFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#EAFFFFFF"/>
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="0" To="#F4FFFFFF"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="ThumbVisual" Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid x:Name="ThumbVisual" Margin="0,1,0,1">
<Rectangle x:Name="Background" RadiusX="2" RadiusY="2" Fill="#FF1F3B53" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
<GradientStop Color="#FF818F99" Offset="1"/>
<GradientStop Color="#FFC2C9CE" Offset="0"/>
<GradientStop Color="#FFB3BBC1" Offset="0.35"/>
<GradientStop Color="#FF96A4B1" Offset="0.35"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BackgroundMouseOver" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundPressed" Opacity="0" RadiusX="2" RadiusY="2" Fill="#FF448DCA" StrokeThickness="1" Stroke="#00000000"/>
<Rectangle x:Name="BackgroundGradient" RadiusX="1" RadiusY="1" StrokeThickness="1" Margin="1" Stroke="#FFFFFFFF">
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0.013" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.603" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="Highlight" RadiusX="1" RadiusY="1" Opacity="0" IsHitTestVisible="false" Stroke="#FF6DBDD1" StrokeThickness="1" Margin="1" />
</Grid>
</Grid>
</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>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!-- Horizontal Template -->
<Grid x:Name="HorizontalRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Track Layer -->
<Rectangle Grid.ColumnSpan="5" RadiusX="1" RadiusY="1" StrokeThickness="1" Stroke="#00000000">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
<GradientStop Color="#FFF4F6F7" Offset="0"/>
<GradientStop Color="#FFF0F4F7" Offset="0.344"/>
<GradientStop Color="#FFDFE3E6" Offset="1"/>
<GradientStop Color="#FFE9EEF4" Offset="0.527"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.ColumnSpan="5" RadiusX="1" RadiusY="1" StrokeThickness="1" Stroke="#00000000" Fill="{TemplateBinding Background}"/>
<Rectangle Grid.ColumnSpan="5" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity=".375">
<Rectangle.Stroke>
<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>
</Rectangle.Stroke>
</Rectangle>
<Rectangle Grid.ColumnSpan="5" RadiusX="1" RadiusY="1" Margin="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,.125" StartPoint=".5,.875">
<GradientStop Color="#33FFFFFF"/>
<GradientStop Color="#99FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<!-- Repeat Buttons + Thumb -->
<RepeatButton x:Name="HorizontalSmallDecrease" Grid.Column="0" Width="16" IsTabStop="False" Interval="50" Template="{StaticResource HorizontalDecrementTemplate}" Margin="1" />
<RepeatButton x:Name="HorizontalLargeDecrease" Grid.Column="1" Width="0" Template="{StaticResource RepeatButtonTemplate}" Interval="50" IsTabStop="False" />
<Thumb x:Name="HorizontalThumb" Background="{TemplateBinding Background}" MinWidth="18" Width="18" Grid.Column="2" Template="{StaticResource HorizontalThumbTemplate}" />
<RepeatButton x:Name="HorizontalLargeIncrease" Grid.Column="3" Template="{StaticResource RepeatButtonTemplate}" Interval="50" IsTabStop="False" />
<RepeatButton x:Name="HorizontalSmallIncrease" Grid.Column="4" Width="16" IsTabStop="False" Interval="50" Template="{StaticResource HorizontalIncrementTemplate}" Margin="1" />
</Grid>
<!-- Vertical Template -->
<Grid x:Name="VerticalRoot" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Track Layer -->
<Rectangle Grid.RowSpan="5" RadiusX="1" RadiusY="1" StrokeThickness="1" Stroke="#00000000">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="1,0.5" EndPoint="0,0.5">
<GradientStop Color="#FFF4F6F7" Offset="0"/>
<GradientStop Color="#FFF0F4F7" Offset="0.344"/>
<GradientStop Color="#FFDFE3E6" Offset="1"/>
<GradientStop Color="#FFE9EEF4" Offset="0.527"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.RowSpan="5" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity=".375">
<Rectangle.Stroke>
<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>
</Rectangle.Stroke>
</Rectangle>
<Rectangle Grid.RowSpan="5" RadiusX="1" RadiusY="1" Margin="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.125,0.5" StartPoint="0.875,0.5">
<GradientStop Color="#33FFFFFF"/>
<GradientStop Color="#99FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<!-- Repeat Buttons + Thumb -->
<RepeatButton x:Name="VerticalSmallDecrease" Grid.Row="0" Height="16" IsTabStop="False" Interval="50" Template="{StaticResource VerticalDecrementTemplate}" Margin="1" />
<RepeatButton x:Name="VerticalLargeDecrease" Grid.Row="1" Height="0" Template="{StaticResource RepeatButtonTemplate}" Interval="50" IsTabStop="False" />
<Thumb x:Name="VerticalThumb" MinHeight="18" Height="18" Grid.Row="2" Template="{StaticResource VerticalThumbTemplate}" />
<RepeatButton x:Name="VerticalLargeIncrease" Grid.Row="3" Template="{StaticResource RepeatButtonTemplate}" Interval="50" IsTabStop="False" />
<RepeatButton x:Name="VerticalSmallIncrease" Grid.Row="4" Height="16" IsTabStop="False" Interval="50" Template="{StaticResource VerticalIncrementTemplate}" Margin="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
See Also