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:

<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.

<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.

public class TickTemplateSelector : DataTemplateSelector 
{ 
} 
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.

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; 
        } 
    } 
} 
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.

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

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

In this article
Not finding the help you need? Improve this article