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