Custom thumbs that show selection start/end

[Dieter]

I need to implement a slider control with range selection. I want to modify the design of the thumbs that indicate the start (end) of the selection so that they show the numerical value of where the selection starts (ends).

To do so, I tried changing the template of the thumbs:

<ControlTemplate x:Key="HorizontalRangeStartThumbTemplate" TargetType="Thumb">
...
      <TextBlock Text="{TemplateBinding SelectionStart}" />
...
</ControlTemplate>

However, this doesn't work because the binding tries to find the property SelectionStart in the Thumb object instead of the RadSlider object. (error message: "Property 'SelectionStart' was not found in type 'Thumb'").

Is there a way I can bind the value of the text block to SelectionStart property of the RadSlider? Or can you suggest other ways to solve my problem?

[Kiril Stanoev]

Hello Dieter,

WPF supports more advanced markup extensions therefore, if your scenario was WPF, you could do the following:

<ControlTemplate x:Key="HorizontalRangeStartThumbTemplate" TargetType="Thumb">
...
      <TextBlock Text="{Binding Path=SelectionStart, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadSlider}}}" />
...
</ControlTemplate>

Unfortunately Silverlight only supports two RelativeSource modes - Self and TemplatedParent. However, there a quick workaround which might work in your case.

1. Bind the Tag property of the Thumb to the SelectionStart of the Slider:

<Thumb x:Name="HorizontalRangeStartThumb" Grid.Column="1"
        Height="18" IsEnabled="{TemplateBinding IsEnabled}"
        Template="{StaticResource HorizontalThumbTemplate}"
        Visibility="{TemplateBinding ThumbVisibility}"
        VerticalAlignment="Center" Width="8"
        Tag="{TemplateBinding SelectionStart}" />

2. In the ControlTemplate of the Thumb, add a ContentPresenter and bind its Content to the Tag property of the Thumb.

<!-- Unnecessary code removed on purpose -->
<ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb">
    <Grid>
        <Border x:Name="Border">
            <Border x:Name="InnerBorder">
                <ContentPresenter Content="{TemplateBinding Tag}" />
            </Border>
        </Border>
    </Grid>
</ControlTemplate>

Give it a try and let me know if you need further assistance.

Kind regards,
Kiril Stanoev
the Telerik team

[Dieter]

Hi Kiril,

Thank you for your help, this helped me solve the problem! 

As I wanted to round the number shown in the tag, I needed an extra step and have used a value converter:

<ControlTemplatex:Key="HorizontalThumbTemplate"TargetType="Thumb">
     <Grid>
      ...
          <TextBlock Text="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource SliderValueConverter}}" />
     ...
    </Grid>
</ControlTemplate>

Thanks again for the workaround!

Regards,
Dieter