Custom thumbs that show selection start/end

3 posts, 1 answers
  1. Dieter
    Dieter avatar
    2 posts
    Member since:
    Apr 2011

    Posted 18 Apr 2011 Link to this post

    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. Answer
    Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 18 Apr 2011 Link to this post

    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
  3. DevCraft banner
  4. Dieter
    Dieter avatar
    2 posts
    Member since:
    Apr 2011

    Posted 18 Apr 2011 Link to this post

    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

Back to Top