This is a migrated thread and some comments may be shown as answers.

Custom thumbs that show selection start/end

2 Answers 80 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Dieter
Top achievements
Rank 1
Dieter asked on 18 Apr 2011, 09:48 AM
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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Stanoev
Telerik team
answered on 18 Apr 2011, 03:30 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Dieter
Top achievements
Rank 1
answered on 18 Apr 2011, 03:51 PM
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

Tags
Slider
Asked by
Dieter
Top achievements
Rank 1
Answers by
Kiril Stanoev
Telerik team
Dieter
Top achievements
Rank 1
Share this question
or