Edit this page

How to customize the look of the tick marks using TickTemplateSelector

The TickTemplateSelector property gives you the ability to display ticks with different templates. This tutorial will walk you through the common task of creating and applying TickTemplateSelector.

Having the following Slider declaration, every fourth tick will be displayed:

XAML

<telerik:RadSlider x:Name="MySlider" 
                   HandlesVisibility="Visible"
                   IsSnapToTickEnabled="True"
                   Maximum="30"
                   SmallChange="1"
                   TickFrequency="1"
                   TickPlacement="TopLeft" />

First, you have to create two DataTemplates in the resources of your application. In the first one the tick marks will be displayed as Ellipses and the second one will be empty.

XAML

<DataTemplate x:Key="EllipseTemplate">
    <Grid>
        <Ellipse Width="5" 
                 Height="5"
                 Fill="Black" />
    </Grid>
</DataTemplate>

<DataTemplate x:Key="EmptyTemplate">
    <Grid />
</DataTemplate>

The next step is to create the TickTemplateSelector and choose the appropriate template depending on the numeric value of the tick:

When you create a TickTemplateSelector, you must derive from the DataTemplateSelector class.

C#

public class TickTemplateSelector : DataTemplateSelector
{
}

VB.NET

Public Class TickTemplateSelector
    Inherits DataTemplateSelector
End Class

Override, the Sele ctTemplate method and implement your custom logic in it. The method accepts as arguments:

  • object -the actual object being bound

  • DependancyObject -the container for the object argument.

C#

public class TickTemplateSelector : DataTemplateSelector
{
    public DataTemplate EllipseTemplate { get; set; }
    public DataTemplate EmptyTemplate { get; set; }
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        double tick = Convert.ToDouble(item);
        if (tick % 4 == 0.0)
        {
            return EllipseTemplate;
        }
        else
        {
            return EmptyTemplate;
        }
    }
}

VB.NET

Public Class TickTemplateSelector
    Inherits DataTemplateSelector
    Public EllipseTempl As DataTemplate
    Public Property EllipseTemplate() As DataTemplate
        Get
            Return EllipseTempl
        End Get
        Set(ByVal value As DataTemplate)
            EllipseTempl = value
        End Set
    End Property
    Public EmptyTempl As DataTemplate
    Public Property EmptyTemplate() As DataTemplate
        Get
            Return EmptyTempl
        End Get
        Set(ByVal value As DataTemplate)
            EmptyTempl = value
        End Set
    End Property
    Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
        Dim tick As Double = Convert.ToDouble(item)
        If tick Mod 4 = 0 Then
            Return EllipseTempl
        Else
            Return EmptyTempl
        End If
    End Function
End Class

Define the created selector as a resource in the XAML and set it to the TickTemplateSelector property.

XAML

<local:TickTemplateSelector x:Key="TickTemplateSelector" 
                            EllipseTemplate="{StaticResource EllipseTemplate}"
                            EmptyTemplate="{StaticResource EmptyTemplate}" />

XAML

<telerik:RadSlider HandlesVisibility="Visible"
                   IsSnapToTickEnabled="True"
                   Maximum="30"
                   SmallChange="1"
                   TickFrequency="1"
                   TickPlacement="TopLeft"
                   TickTemplate="{x:Null}"
                   TickTemplateSelector="{StaticResource TickTemplateSelector}" />