ScrollBar Styles and Templates

ScrollBar Styles and Templates

Collapse All

Silverlight

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 definition that you have to specify when you work with styles and templates.

<!-- XML Name Space definitions. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

The following XAML shows the default style and template for the ScrollBar control.

XAML

<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>

Concepts

Customizing the Appearance of an Existing Control by Using a ControlTemplate

Other Resources

Control Styles and Templates

Control Customization