Remove Selection Thumbs

[Joel]

I would like to use the selection window to indicate the current time.  This requires the background to be opaque, the selection window to be very narrow and disabling the selection thumbs.  Between the forum post about changing the background and some tinkering, I think I have the first two.

Using Blend, I pulled the style of the telerik:SelectionThumb control, but I'm unsure of how to hide the LeftHandle and RightHandle.  I would prefer to be able to click on the selection window and drag it around, I just don't want to be able to resize it.

How do I hide the selection thumbs?

In certain special situations, I might need to re-enable sizing the selection window.  Can I unhide and then rehide the selection thumbs at runtime?

Here's the default SelectionThumb style:

<Style x:Key="SelectionThumbStyle1" TargetType="telerik:SelectionThumb">
            <Setter Property="Margin" Value="{StaticResource TimeBar_SelectionThumb_Margin}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:SelectionThumb">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <Grid>
                                <Thumb x:Name="PART_CenterHandle" Style="{StaticResource SelectionRangeStyle}"/>
                                <Thumb x:Name="PART_LeftHandle" HorizontalAlignment="Left" Style="{StaticResource SelectionThumbHandleStyle_Flipped}"/>
                                <Thumb x:Name="PART_RightHandle" HorizontalAlignment="Right" Style="{StaticResource SelectionThumbHandleStyle}"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

[Missing User]

Hi Joel,

Currently there is no direct way to hide the left and the right handle of the SelectionThumb. However you may use the following approach: retemplating the default style of the SelectionThumb element and set Visibility.Collapsed for the Thumb elements. When you need to hide the thumbs you can set this style to the SelectionThumb in code-behind. You can get the SelectionThumb by the extension method ChildrenOfType<SelectionThumb>(), part of the UIElementExtensions Class. In order to use it, you need to include namespace reference to Telerik.Windows.Controls. For example:

SelectionThumb selectionThumb = radTimeBar1.ChildrenOfType<SelectionThumb>().FirstOrDefault();
if (selectionThumb != null)
{
    selectionThumb.Style = this.Resources["SelectionThumbStyle1"] as Style;
}

You can remove this style by setting SelectionThumb.Style to null.

Another approach for restrict the size of the SelectionThumb is to set the minimum and maximum selection range of the RadTimeBar control. You can achieve this by RadTimeBar.MinSelectionRange and RadTimeBar.MaxSelectionRange properties. They are of type TimeSpan and restricts the thumb selection according to the preset TimeSpan value. For example, you can restrict the SelectionThumb to show 20 days:

radTimeBar1.MinSelectionRange = new TimeSpan(20, 0, 0, 0);
radTimeBar1.MaxSelectionRange = new TimeSpan(20, 0, 0, 0);

You can see our online demo which demonstrates these properties here.

I hope this helps.

Kind regards,

Polina

the Telerik team

[Joel]

Hi Polina,

Thanks, that works really well.  Here's what I ended up doing:

Turns out I needed a few dependencies for the style:

<UserControl.Resources>
    <Thickness x:Key="TimeBar_SelectionThumb_Margin">-4,0,-5,0</Thickness>
    <LinearGradientBrush x:Key="TimeBar_SelectionThumb_Range_OuterBorder" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF595959" Offset="0"/>
        <GradientStop Color="#FF595959" Offset="1"/>
        <GradientStop Color="#FF161616" Offset="0.5"/>
    </LinearGradientBrush>
    <Thickness x:Key="TimeBar_SelectionThumb_Range_OuterBorder_BorderThickness">3</Thickness>
    <Thickness x:Key="TimeBar_SelectionThumb_Range_Margin">4,0</Thickness>
    <SolidColorBrush x:Key="TimeBar_SelectionThumb_Range_Border" Color="Transparent"/>
    <Thickness x:Key="TimeBar_SelectionThumb_Range_Border_BorderThickness">0</Thickness>
    <SolidColorBrush x:Key="TimeBar_SelectionThumb_Range_InnerBorder" Color="Transparent"/>
    <Thickness x:Key="TimeBar_SelectionThumb_Range_InnerBorder_BorderThickness">0</Thickness>
    <SolidColorBrush x:Key="TimeBar_SelectionThumb_Range_Background_MouseOver" Color="#FF000000"/> <!-- Mouseover background (Original: #26FFC64B) -->
    <Style x:Key="SelectionRangeStyle" TargetType="Thumb">
        <Setter Property="BorderBrush" Value="{StaticResource TimeBar_SelectionThumb_Range_OuterBorder}"/>
        <Setter Property="BorderThickness" Value="{StaticResource TimeBar_SelectionThumb_Range_OuterBorder_BorderThickness}"/>
        <Setter Property="Background" Value="#FF000000"/> <!-- Change background here (Original: #01FFFFFF) -->
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Margin" Value="{StaticResource TimeBar_SelectionThumb_Range_Margin}"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundAnimation">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Range_Background_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Border BorderBrush="{StaticResource TimeBar_SelectionThumb_Range_Border}" BorderThickness="{StaticResource TimeBar_SelectionThumb_Range_Border_BorderThickness}">
                                <Border x:Name="BackgroundAnimation" BorderBrush="{StaticResource TimeBar_SelectionThumb_Range_InnerBorder}" BorderThickness="{StaticResource TimeBar_SelectionThumb_Range_InnerBorder_BorderThickness}" Background="{TemplateBinding Background}"/>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_OuterBorder" Color="#FF000000"/>
    <LinearGradientBrush x:Key="TimeBar_SelectionThumb_Thumbs_Background" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="#FFEBEBEB" Offset="1"/>
        <GradientStop Color="#FFD1D1D1" Offset="0.5"/>
        <GradientStop Color="#FFE5E5E5" Offset="0.49"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_Foreground" Color="#FF000000"/>
    <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_OuterBackground" Color="Transparent"/>
    <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_InnerBorder" Color="#FFFFC64B"/>
    <Thickness x:Key="TimeBar_SelectionThumb_Thumbs_InnerBorder_BorderThickness">1</Thickness>
    <LinearGradientBrush x:Key="TimeBar_SelectionThumb_Thumbs_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFE9CB" Offset="0"/>
        <GradientStop Color="#FFFFCC87" Offset="0.49"/>
        <GradientStop Color="#FFFFAE00" Offset="0.5"/>
        <GradientStop Color="#FFFFD24B" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TimeBar_SelectionThumb_Thumbs_InnerBorder_MouseOver" Color="#FFFFEAA1"/>
    <Style x:Key="SelectionThumbHandleStyle" TargetType="Thumb">
        <Setter Property="BorderBrush" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_OuterBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Background" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_Background}"/>
        <Setter Property="Foreground" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_Foreground}"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Cursor" Value="SizeWE"/>
        <Setter Property="Width" Value="9"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundAnimation">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_Background_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BackgroundAnimation">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource TimeBar_SelectionThumb_Thumbs_OuterBackground}">
                            <Border x:Name="BackgroundAnimation" BorderBrush="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder}" BorderThickness="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder_BorderThickness}" Background="{TemplateBinding Background}"/>
                        </Border>
                        <Path Data="M303.16666,176.83339 L307.16632,179.60629 L303.17068,182.37486 L303.17087,180.79317 L304.96475,179.61093 L303.16638,178.40005 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Margin="3,6" Stretch="Fill"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="SelectionThumbHandleStyle_Flipped" BasedOn="{StaticResource SelectionThumbHandleStyle}" TargetType="Thumb">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundAnimation">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_Background_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BackgroundAnimation">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder_MouseOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource TimeBar_SelectionThumb_Thumbs_OuterBackground}">
                            <Border x:Name="BackgroundAnimation" BorderBrush="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder}" BorderThickness="{StaticResource TimeBar_SelectionThumb_Thumbs_InnerBorder_BorderThickness}" Background="{TemplateBinding Background}"/>
                        </Border>
                        <Path Data="M303.16666,176.83339 L307.16632,179.60629 L303.17068,182.37486 L303.17087,180.79317 L304.96475,179.61093 L303.16638,178.40005 z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Margin="3,6" RenderTransformOrigin="0.5,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <ScaleTransform ScaleX="-1"/>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="hiddenSelectionThumbStyle" TargetType="telerik:SelectionThumb">
        <Setter Property="Margin" Value="{StaticResource TimeBar_SelectionThumb_Margin}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:SelectionThumb">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <Grid>
                            <Thumb x:Name="PART_CenterHandle" Style="{StaticResource SelectionRangeStyle}"/>
                            <Thumb x:Name="PART_LeftHandle" HorizontalAlignment="Left" Style="{StaticResource SelectionThumbHandleStyle_Flipped}" Visibility="Collapsed"/>
                            <Thumb x:Name="PART_RightHandle" HorizontalAlignment="Right" Style="{StaticResource SelectionThumbHandleStyle}" Visibility="Collapsed"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

And then I couldn't grab the SelectionThumb from the constructor, so I just called this function from the loaded event:

private void DisplaySelectionThumbs(bool display)
{
    Style thumbStyle = null;
    SelectionThumb selectionThumb = this.tbChart.ChildrenOfType<SelectionThumb>().FirstOrDefault();
    if (!display)
    {
        thumbStyle = (Style)this.Resources["hiddenSelectionThumbStyle"];
    }

    if (selectionThumb != null)
        selectionThumb.Style = thumbStyle;
}

But thanks again, I've been trying to figure that out for a while.