A better Slider for Windows Phone 7

Article
10/04/2010

The Slider control as shipped with the Windows Phone Developer Tools has some problems, both due to how it was templated, and also because it was originally designed for the desktop, where mice are very good at hitting small targets.

The visible Thumb was removed, and the invisible Thumb, even when you know where it is, is quite difficult to touch and drag. This means that most often, you end up pressing one of the RepeatButtons that will slowly increment or decrement the Slider’s value. That may be what you intended, but the Slider on the phone shouldn’t be used for precision adjustments. That will just frustrate the user.

It is quite difficult to manipulate a horizontal Slider to get the maximum value, and if you somehow do manage to do that, you will find that you have moved the invisible Thumb off of the Slider, where it will be clipped, and you have to press the decrement button a while to get it back.

I have re-templated the Slider, and added a small tick mark in the thumb for some sort of a visual cue, as when the Slider is on its minimum value, the darkened track is sometimes hard to see. It is easy to remove the tick if your application provides enough context to make it clear that there is a Slider and how to use it. I made the touchable area much wider—in fact, the Thumb has been expanded to cover the entire Slider area, so that the user can drag anywhere on the Slider without having to hit a small, invisible target.

Note that the Slider should be used judiciously. Controls that are manipulated by dragging should not be placed in situations where they are on a parent that uses drags of the same orientation. So, for example, you should not put a horizontal Slider inside of a Panorama or Pivot control, and you should not put a vertical Slider inside of a ListBox (I have a hard time imagining why you’d want to do the latter.)

Here is the new Slider template. I started with the template that I found in

%ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Design\System.Windows.xaml

although I could have used Blend, added a Slider, and then right-clicked on it and selected “Edit Template…” and then “Edit a Copy…”. I put my template in App.xaml:

Code Snippet

<Application
x:Class="SliderApp.App"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:local="clr-namespace:SliderApp">
<Application.Resources>
<ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
<Rectangle/>
</ControlTemplate>
<ControlTemplate x:Key="PhoneSimpleThumbHorizontal" TargetType="Thumb">
<Border Background="Transparent" Margin="-480,-18">
<Rectangle Width="2" Height="6" Fill="{StaticResource PhoneForegroundBrush}"/>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="PhoneSimpleThumbVertical" TargetType="Thumb">
<Border Background="Transparent" Margin="-6,-800">
<Rectangle Width="6" Height="2" Margin="24,0,0,0" Fill="{StaticResource PhoneForegroundBrush}"/>
</Border>
</ControlTemplate>
<Style x:Key="sliderStyle" TargetType="local:PhoneSlider">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Maximum" Value="10"/>
<Setter Property="Minimum" Value="0"/>
<Setter Property="Value" Value="0"/>
<Setter Property="Margin" Value="{StaticResource PhoneHorizontalMargin}"/>
<Setter Property="Background" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:PhoneSlider">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="HorizontalTrack" Storyboard.TargetProperty="Opacity" To="0.1" />
<DoubleAnimation Duration="0" Storyboard.TargetName="VerticalTrack" Storyboard.TargetProperty="Opacity" To="0.1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalFill" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalFill" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HorizontalTemplate">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="HorizontalTrack" IsHitTestVisible="False" Fill="{TemplateBinding Background}" Opacity="0.2" Grid.ColumnSpan="3" Height="12" Margin="0,22,0,50"/>
<Rectangle x:Name="HorizontalFill" IsHitTestVisible="False" Fill="{TemplateBinding Foreground}" Grid.Column="0" Height="12" Margin="0,22,0,50"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Grid.Column="0" />
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Grid.Column="2" />
<Thumb x:Name="HorizontalThumb" Width="1" Margin="-1,0,0,0" Grid.Column="1" Template="{StaticResource PhoneSimpleThumbHorizontal}" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache"/>
</Grid>
<Grid x:Name="VerticalTemplate">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="0"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle x:Name="VerticalTrack" IsHitTestVisible="False" Fill="{TemplateBinding Background}" Opacity="0.2" Grid.RowSpan="3" Width="12" Margin="24,0"/>
<Rectangle x:Name="VerticalFill" IsHitTestVisible="False" Fill="{TemplateBinding Foreground}" Grid.Row="2" Width="12" Margin="24,0"/>
<RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Grid.Row="0"/>
<RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Grid.Row="2"/>
<Thumb x:Name="VerticalThumb" Height="1" Margin="0,-1,0,0" Grid.Row="1" Template="{StaticResource PhoneSimpleThumbVertical}" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
<Application.ApplicationLifetimeObjects>
<shell:PhoneApplicationService
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
</Application.ApplicationLifetimeObjects>
</Application>

This could also be placed in your page’s resources or in generic.xaml. You will note that in lines 28 and 39, I have am not using TargetType=”Slider”, but I have used the name of my subclassed type. This is because I had to use some code-behind to handle the Clip area. Since I am using negative margins to make the Thumbs cover the entire Slider, and I had to make the Thumbs large enough to cover the entire Slider, no matter where it is positioned, I need code to handle the clipping, otherwise the Thumbs would extend way beyond the Slider’s bounds, and cover up other controls. This is particularly a problem for vertical Sliders.

Fortunately, the code-behind isn’t much:

Code Snippet

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace SliderApp
{
public class PhoneSlider : Slider
{
public PhoneSlider()
{
SizeChanged += new SizeChangedEventHandler(PhoneSlider_SizeChanged);
}
void PhoneSlider_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Width > 0 && e.NewSize.Height > 0)
{
Rect clipRect = new Rect(0, 0, e.NewSize.Width, e.NewSize.Height);
if (Orientation == Orientation.Horizontal)
{
clipRect.X -= 12;
clipRect.Width += 24;
object margin = Resources["PhoneHorizontalMargin"];
if (margin != null)
{
Margin = (Thickness)margin;
}
}
else
{
clipRect.Y -= 12;
clipRect.Height += 24;
object margin = Resources["PhoneVerticalMargin"];
if (margin != null)
{
Margin = (Thickness)margin;
}
}
this.Clip = new RectangleGeometry() { Rect = clipRect };
}
}
}
}

It just has to set the margins and clip correctly, but the values depend on the value of Slider.Orientation. If your application was going to use Sliders with only one orientation, you could simplify the code-behind and the template, but you’d still need the code-behind for the clip.

You can download a sample project that contains both horizontal and vertical Sliders, with the default and modified templates. Here’s what it looks like:

You really have to try this on an actual Phone to appreciate how hard it can be to use the default Slider. The emulator makes it easy—we have all been trained to use a relatively high-precision mouse to hit small targets on the screen, and the invisible Thumb is quite easy to hit when using the emulator and mouse.

SliderApp.zip

A better Slider for Windows Phone 7

Additional resources