Tuesday, 17 July 2012

Metro style Slider

I was recently asked to include 3 combo boxes on a data entry screen, each with a fixed number of items.

The additional clicks to open the combo then scroll down to select the desired item seemed inefficient, when all the user wanted to do was answer the three questions then click the submit/next button.  Rapid and quick fire were the order of the day!

So I came up with a slider with text descriptions so that the user can click either the slider or the text to make their selection.  Obviously it takes up quite a bit more space but by coming up with a Metro style, which pays homage to the Telerik Slider style, it makes for quite a pleasant looking metro interface.

I’ve coded this up in Silverlight 4 but it also works in Silverlight 5.

The solution can be upgraded from fixed hardcoded values to a dynamic data driven items source, which would require auto resizing etc.  This would be the preferred solution but for now this quick solution does the trick!

Online Demo

Slider Style

For this example project the slider style is stored in the App.xaml file:

<Application x:Class="MetroSlider_SL4.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Application.Resources>
<Style x:Key="MetroThumbStyle" TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Background="#FF319FFD" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MetroSliderStyle" TargetType="Slider">
<Setter Property="Maximum" Value="10" />
<Setter Property="Minimum" Value="1" />
<Setter Property="Value" Value="1" />
<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>

<Grid x:Name="VerticalTemplate" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Rectangle Grid.Row="0"
Grid.RowSpan="3"
Width="6"
Margin="0,5,0,5"
Fill="#ffc8c6c6"
RadiusX="1"
RadiusY="1"
StrokeThickness="0" />
<RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton"
Grid.Row="2"
Width="18"
IsTabStop="False"
Template="{StaticResource RepeatButtonTemplate}" />
<Thumb x:Name="VerticalThumb"
Grid.Row="1"
Width="18"
Height="11"
IsTabStop="True"
Style="{StaticResource MetroThumbStyle}" />
<RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton"
Grid.Row="0"
Width="18"
IsTabStop="False"
Template="{StaticResource RepeatButtonTemplate}" />

</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>

Source


https://github.com/stevenh77/MetroSlider_SL4

2 comments:

  1. I am constantly amazed at your work and examples. May I make a suggestion? I miss an example of a scroll bar in the metro-style. I think others would also be delighted.

    Thank you for sharing your intentions with us.

    ReplyDelete
  2. Hi Peter, it's fantastic to hear your feedback I really appreciate it. Really pleased to hear my blog helps a few people out. I'll add a blog post for a metro styled scroll bar but in the meantime you can take a look at my metro style menu which contains an example of a metro styled scroll bar: http://stevenhollidge.blogspot.co.uk/2012/06/silverlight-metro-style-menu.html

    ReplyDelete