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:

Example 1: Defining the RadSlider

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

Example 2: Creating a custom template for the ticks

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

Example 3: Defining the custom template selector

public class TickTemplateSelector : DataTemplateSelector 
{ 
} 
Public Class TickTemplateSelector 
    Inherits DataTemplateSelector 
End Class 

Override, the SelectTemplate method and implement your custom logic in it. The method accepts the following arguments:

  • object: The actual object being bound.

  • DependencyObject: The container for the object argument.

Example 4: Overriding the SelectTemplate method

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 Property EllipseTemplate() As DataTemplate 
    Public Property EmptyTemplate() As DataTemplate 
    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.0 Then 
            Return EllipseTemplate 
        Else 
            Return EmptyTemplate 
        End If 
    End Function 

End Class

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

Example 5: Defining the template selector in XAML

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

Example 6: Setting the TickTemplate and TickTemplateSelector properties

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

Please note that the TickTemplate property needs to be set to null for the TickTemplateSelector property to be respected.

The RadSlider with the custom TickTemplateSelector

See Also

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