ScrollBar Styles and Templates
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.
The following table lists the named parts for the ScrollBar control.
|
ScrollBar Part |
Type |
Description |
|---|---|---|
|
HorizontalRoot |
The root of the ScrollBar if its orientation is horizontal. |
|
|
HorizontalLargeIncrease |
The RepeatButton that increases the ScrollBar’s value by the large change amount if its orientation is horizontal. |
|
|
HorizontalLargeDecrease |
The RepeatButton that decreases the ScrollBar’s value by the large change amount if its orientation is horizontal. |
|
|
HorizontalSmallIncrease |
The RepeatButton that increases the ScrollBar’s value by the small change amount if its orientation is horizontal. |
|
|
HorizontalSmallDecrease |
The RepeatButton that decreases the ScrollBar’s value by the small change amount if its orientation is horizontal. |
|
|
HorizontalThumb |
The Thumb that can be dragged to change the ScrollBar’s value if its orientation is horizontal. |
|
|
VerticalRoot |
The root of the ScrollBar if its orientation is vertical. |
|
|
VerticalLargeIncrease |
The RepeatButton that increases the ScrollBar’s value by the large change amount if its orientation is vertical. |
|
|
VerticalLargeDecrease |
The RepeatButton that decreases the ScrollBar’s value by the large change amount if its orientation is vertical. |
|
|
VerticalSmallIncrease |
The RepeatButton that increases the ScrollBar’s value by the small change amount if its orientation is vertical. |
|
|
VerticalSmallDecrease |
The RepeatButton that decreases the ScrollBar’s value by the small change amount if its orientation is vertical. |
|
|
VerticalThumb |
The Thumb that can be dragged to change the ScrollBar’s value if its orientation is vertical. |
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. |
The following shows the XML namespace mapping that you have to specify when you work with styles and templates.
<!-- XML Namespace mapping. --> xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
 Note: |
|---|
The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping. |
The following XAML 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>
