RadSlider for Silverlight has a neat functionality that allows you to display tick marks along the track.
But what if you are not pleased with the current design of the ticks? Of course you can completely change the look of a tick mark. Let’s say that instead of bluish rectangles, you want your ticks to be ellipses, or triangles maybe. This is easily achieved by setting the TickTemplate property.
<telerik:RadSlider TickPlacement="BottomRight" TickFrequency="1" Maximum="10">
<telerik:RadSlider.TickTemplate>
<DataTemplate>
<Grid>
<Ellipse Width="5" Height="5" Fill="Black" />
</Grid>
</DataTemplate>
</telerik:RadSlider.TickTemplate>
</telerik:RadSlider>
Let’s take this a step further. Instead of shapes we might want to place some text underneath the track, displaying the months of the year for example. We could do that using a TemplateSelector and depending on the value of the tick to pick the right template, but this means that we have to have 12 different templates.
A more elegant way of achieving the desired outcome is by using a ValueConverter. Since the numeric representation of each tick is given to its DataContext, all we need is the appropriate converter.
Let’s start by setting some properties to our slider. Since we are going to display the name of the months, we need to set the Maximum to 12 and the Minimum to 1. Since the numeric representation of the months goes like 1, 2, 3…12 we have to set the TickFrequency to 1. Also we want the names of the months to appear bellow the track so TickPlacementhas to be BottomRight. The next property is optional but since it is a show off why not use it. Let’s set the IsSnapToTickEnabled property to True and we are now ready to proceed with our TickTemplate.
The TickTemplate consists of a StackPanel that has 2 children – an Ellipse and a TextBlock. The interesting stuff is that the Text property of the TextBlock is bound and has a specific ValueConverter in it called MonthNameConverter.
<telerik:RadSlider Maximum="12" Minimum="1"
TickFrequency="1" TickPlacement="BottomRight" IsSnapToTickEnabled="True">
<telerik:RadSlider.TickTemplate>
<DataTemplate>
<StackPanel>
<Ellipse Width="5" Height="5"
Fill="Black"
HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Converter={StaticResource MonthNameConverter}}"
FontSize="10"/>
</StackPanel>
</DataTemplate>
</telerik:RadSlider.TickTemplate>
</telerik:RadSlider>
One final step we should take is to actually implement this MonthNameConverter. Go to your code-behind file and create the following class:
public class MonthNameConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
// Get the numeric representation of the tick, cast it to int and
// based on this int value, get the corresponding month name
return CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName((int)(double)value);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Last but not least we have to reference MonthNameConverter in the XAML file. You can do this by creating a reference to your project:
xmlns:local="clr-namespace:UsingValueConverter"
Then in the UserControl.Resources attach a key to the converter.
<UserControl.Resources>
<local:MonthNameConverter x:Key="MonthNameConverter" />
</UserControl.Resources>
Run the project and you output should look something like the following:
Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.