A Style for the Silverlight CoverFlow Control Slider

I’ve been working with the Silverlight CoverFlow Control lately and think the default Silverlight Slider at the bottom of the screen sticks out like a sore thumb:
SilverlightCoverFlowControl
So, I’ve create a new Style for the Slider, resembling the original Cover Flow slider.
CoverFlowSlider
This is a Style for a Silverlight slider control, meant to be used on a black or dark background. It has rounded sides for the Track as well as the Thumb. The Track looks like it is lower because of the inner shadow at the top. The Thumb also has a shadow, but its surface is flat. This is only the Horizontal Template, so nothing will show when it is used vertically.
The Project File is on my SkyDrive, but the Style is simple enough to reproduce it here…
De XAML is a regular Slider with a Style:
[sourcecode language=”XML”]<Slider Style="{StaticResource CoverFlowSliderControl}" Maximum="100" LargeChange="10" SmallChange="1" Value="50"/>[/sourcecode]

The Track has its own style, used in the ControlTemplate later on:
[sourcecode language=”XML”]<Style x:Key="CoverFlowSliderTrackStyle" TargetType="Rectangle">
<Setter Property="RadiusY" Value="12" />
<Setter Property="RadiusX" Value="12" />
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="Stroke">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF202020" Offset="0"/>
<GradientStop Color="#FF404040" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF202020" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>[/sourcecode]

The Thumb is no more than two rectangles, but both have their own Style:

[sourcecode language=”XML”]<Style x:Key="CoverFlowSliderThumb" TargetType="Rectangle">
<Setter Property="RadiusY" Value="10" />
<Setter Property="RadiusX" Value="10" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="Stroke" Value="#FF4B4B4B"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.43,-0.02">
<GradientStop Color="#FF252525" Offset="1"/>
<GradientStop Color="#FF787878" Offset="0"/>
<GradientStop Color="#FF424242" Offset="0.622"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CoverFlowSliderThumbCover" TargetType="Rectangle">
<Setter Property="RadiusY" Value="8" />
<Setter Property="RadiusX" Value="8" />
<Setter Property="StrokeThickness" Value="0" />
<Setter Property="Fill" Value="#FF404040" />
<Setter Property="Margin" Value="3" />
</Style>
<Style x:Key="ThumbStyle" TargetType="Thumb">
<Setter Property="Margin" Value="0,2" />
<Setter Property="Width" Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Margin="2,0">
<Rectangle x:Name="Thumb" Style="{StaticResource CoverFlowSliderThumb}"/>
<Rectangle x:Name="ThumbCover" Style="{StaticResource CoverFlowSliderThumbCover}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Direction="360" Opacity="0.5" ShadowDepth="3"/>
</Setter.Value>
</Setter>
</Style>[/sourcecode]

There are two Repeatbuttons to the left and to the right of the Thumb. They are invisible and use the same Style:
[sourcecode language=”XML”]<Style x:Key="RepeatButtonStyle" TargetType="RepeatButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid>
<Rectangle RadiusY="6" RadiusX="6" StrokeThickness="2" Fill="Transparent"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>[/sourcecode]

Finally, here is the Style for the Slider Control with the ControlTemplate that uses all Styles above…

[sourcecode language=”XML”]<Style x:Key="CoverFlowSliderControl" TargetType="Slider">
<Setter Property="Height" Value="24" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid x:Name="HorizontalTemplate">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="Track" Grid.ColumnSpan="3" Style="{StaticResource CoverFlowSliderTrackStyle}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Style="{StaticResource RepeatButtonStyle}"/>
<Thumb x:Name="HorizontalThumb" Grid.Column="1" Style="{StaticResource ThumbStyle}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Style="{StaticResource RepeatButtonStyle}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>[/sourcecode]

The result is a Cover Flow Slider that nicely fits in with the rest of the Cover Flow Control:
CoverFlowResult
Njoy!
Check out the Comments below about why this picture is up here…
Slide the Slider
Download the source for this Slider

2 gedachten over “A Style for the Silverlight CoverFlow Control Slider”

  1. Hi Antoni,

    Looks very nice.

    I’ve been thinking about a concept where instead of sliding the thumb, you slide the slider. And the thumb stays in place (like now the slider stays in place).

    Do you know an approach on how to achieve this?

    –
    Mark Monster

  2. Hi Mark,

    I’ve created what you asked, but have my doubts about the usability of it :).

    It actually uses a wide thumb on a more than two times wider track.
    In the middle a fake thumb shows the value for this specific slider using Element Binding in the ControlTemplate. I’ll post a picture of it above and put the files with the other Slider op my SkyDrive…

Reacties zijn gesloten.