Created
October 25, 2010 23:35
-
-
Save andersonimes/646021 to your computer and use it in GitHub Desktop.
Styling the Thumb in a Silverlight Slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Grid> | |
<Grid.Resources> | |
<Style x:Key="ThumbStyle1" TargetType="Thumb"> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="Thumb"> | |
<Grid > | |
<Path Data="M13.832941,48.001114 L-0.00066526519,15.584446 L-0.1685528,3.1627214 L46.375076,3.1882343 L46.59383,15.594595 L33.375225,48.063122 z" Fill="#FF6D6D74" Margin="-0.668,2.662,0.906,-0.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False"/> | |
</Grid> | |
</ControlTemplate> | |
</Setter.Value> | |
</Setter> | |
</Style> | |
<Style x:Key="SliderStyle1" TargetType="Slider"> | |
<Setter Property="BorderThickness" Value="1"/> | |
<Setter Property="Maximum" Value="10"/> | |
<Setter Property="Minimum" Value="0"/> | |
<Setter Property="Value" Value="0"/> | |
<Setter Property="BorderBrush"> | |
<Setter.Value> | |
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> | |
<GradientStop Color="#FFA3AEB9" Offset="0"/> | |
<GradientStop Color="#FF8399A9" Offset="0.375"/> | |
<GradientStop Color="#FF718597" Offset="0.375"/> | |
<GradientStop Color="#FF617584" Offset="1"/> | |
</LinearGradientBrush> | |
</Setter.Value> | |
</Setter> | |
<Setter Property="IsTabStop" Value="False"/> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="Slider"> | |
<Grid x:Name="Root"> | |
<Grid.Resources> | |
<ControlTemplate x:Key="RepeatButtonTemplate"> | |
<Grid x:Name="Root" Background="Transparent" Opacity="0"/> | |
</ControlTemplate> | |
</Grid.Resources> | |
<VisualStateManager.VisualStateGroups> | |
<VisualStateGroup x:Name="CommonStates"> | |
<VisualState x:Name="Normal"/> | |
<VisualState x:Name="MouseOver"/> | |
<VisualState x:Name="Disabled"> | |
<Storyboard> | |
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay"> | |
<DiscreteObjectKeyFrame KeyTime="0"> | |
<DiscreteObjectKeyFrame.Value> | |
<Visibility>Visible</Visibility> | |
</DiscreteObjectKeyFrame.Value> | |
</DiscreteObjectKeyFrame> | |
</ObjectAnimationUsingKeyFrames> | |
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ThumbDisabledOverlay"> | |
<DiscreteObjectKeyFrame KeyTime="0"> | |
<DiscreteObjectKeyFrame.Value> | |
<Visibility>Visible</Visibility> | |
</DiscreteObjectKeyFrame.Value> | |
</DiscreteObjectKeyFrame> | |
</ObjectAnimationUsingKeyFrames> | |
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay"> | |
<DiscreteObjectKeyFrame KeyTime="0"> | |
<DiscreteObjectKeyFrame.Value> | |
<Visibility>Visible</Visibility> | |
</DiscreteObjectKeyFrame.Value> | |
</DiscreteObjectKeyFrame> | |
</ObjectAnimationUsingKeyFrames> | |
</Storyboard> | |
</VisualState> | |
</VisualStateGroup> | |
<VisualStateGroup x:Name="FocusStates"> | |
<VisualState x:Name="Focused"/> | |
<VisualState x:Name="Unfocused"/> | |
</VisualStateGroup> | |
</VisualStateManager.VisualStateGroups> | |
<Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}"> | |
<Grid.ColumnDefinitions> | |
<ColumnDefinition Width="Auto"/> | |
<ColumnDefinition Width="Auto"/> | |
<ColumnDefinition Width="*"/> | |
</Grid.ColumnDefinitions> | |
<Rectangle x:Name="TrackRectangle" Grid.ColumnSpan="3" Grid.Column="0" Fill="#FFE6EFF7" Height="3" Margin="5,0,5,0" RadiusY="1" RadiusX="1" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}"/> | |
<Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Grid.ColumnSpan="3" Grid.Column="0" Fill="White" Height="3" Margin="5,0,5,0" Opacity=".55" RadiusY="1" RadiusX="1" Visibility="Collapsed"/> | |
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/> | |
<Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="18" IsTabStop="True" Width="11"/> | |
<Rectangle x:Name="ThumbDisabledOverlay" Grid.Column="1" Fill="White" Opacity=".55" RadiusY="2" RadiusX="2" Visibility="Collapsed" Width="11"/> | |
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/> | |
</Grid> | |
<Grid x:Name="VerticalTemplate" Background="{TemplateBinding Background}" Visibility="Collapsed"> | |
<Grid.RowDefinitions> | |
<RowDefinition Height="*"/> | |
<RowDefinition Height="Auto"/> | |
<RowDefinition Height="Auto"/> | |
</Grid.RowDefinitions> | |
<Rectangle Fill="#FFE6EFF7" Margin="0,5,0,5" RadiusY="1" Grid.Row="0" RadiusX="1" Grid.RowSpan="3" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Width="3"/> | |
<Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Fill="White" Margin="0,5,0,5" Opacity=".55" RadiusY="1" Grid.Row="0" RadiusX="1" Grid.RowSpan="3" Visibility="Collapsed" Width="3"/> | |
<RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource RepeatButtonTemplate}"/> | |
<Thumb x:Name="VerticalThumb" Height="11" IsTabStop="True" Grid.Row="1" Width="18" Style="{StaticResource ThumbStyle1}"/> | |
<RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource RepeatButtonTemplate}"/> | |
</Grid> | |
</Grid> | |
</ControlTemplate> | |
</Setter.Value> | |
</Setter> | |
</Style> | |
</Grid.Resources> | |
<Slider Style="{StaticResource SliderStyle1}" Orientation="Vertical" HorizontalAlignment="Left" /> | |
</Grid> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment