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

FrameworkElement

The root of the ScrollBar if its orientation is horizontal.

HorizontalLargeIncrease

RepeatButton

The RepeatButton that increases the ScrollBar’s value by the large change amount if its orientation is horizontal.

HorizontalLargeDecrease

RepeatButton

The RepeatButton that decreases the ScrollBar’s value by the large change amount if its orientation is horizontal.

HorizontalSmallIncrease

RepeatButton

The RepeatButton that increases the ScrollBar’s value by the small change amount if its orientation is horizontal.

HorizontalSmallDecrease

RepeatButton

The RepeatButton that decreases the ScrollBar’s value by the small change amount if its orientation is horizontal.

HorizontalThumb

Thumb

The Thumb that can be dragged to change the ScrollBar’s value if its orientation is horizontal.

VerticalRoot

FrameworkElement

The root of the ScrollBar if its orientation is vertical.

VerticalLargeIncrease

RepeatButton

The RepeatButton that increases the ScrollBar’s value by the large change amount if its orientation is vertical.

VerticalLargeDecrease

RepeatButton

The RepeatButton that decreases the ScrollBar’s value by the large change amount if its orientation is vertical.

VerticalSmallIncrease

RepeatButton

The RepeatButton that increases the ScrollBar’s value by the small change amount if its orientation is vertical.

VerticalSmallDecrease

RepeatButton

The RepeatButton that decreases the ScrollBar’s value by the small change amount if its orientation is vertical.

VerticalThumb

Thumb

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"
NoteNote:

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>