Middle Range thumb always visible

4 posts, 0 answers
  1. Yen-Sheng
    Yen-Sheng avatar
    13 posts
    Member since:
    Aug 2011

    Posted 20 Mar 2012 Link to this post

    I would like to have all three of my thumbs visible at any given time.
    I have 0 to 10 for my data set but I would like to move the slider across like a non-ranged slider by grabbing the middle thumb. So I've set a minimum size on the middle thumb to be 8. 
    However, this was back before the template structure changed to 2012. Now, after much shifting around, I've gotten it to look like what it used to look like with a always visible middle thumb. 

    When I drag the thumb around, it works just fine, except when I drag the thumb all the way to the end of the scale, it throws the following

    Error: Unhandled Error in Silverlight Application 
    Code: 4008    
    Category: RuntimeError       
    Message: Layout cycle detected.  Layout could not complete.     
    MethodName:      

    (note, there is no method name).
    It also does the same thing when I move the left thumb towards the right thumb such that range = 0.
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Mar 2012 Link to this post

    Hi Yen-Sheng,

    From your description it seems that you've defined custom style and logic for the control. Can you please send us a sample project where we can test your scenario as I can't reproduce it in a sample application using our latest official assemblies. Also can you tell us the RadControls version you're using? With previous versions of the RadSlider control there were similar scenarios where a Layout Cycle Detected exception was thrown but this issue is already fixed.

    Thank you in advance for your cooperation.

    Kind regards,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Yen-Sheng
    Yen-Sheng avatar
    13 posts
    Member since:
    Aug 2011

    Posted 26 Mar 2012 Link to this post

    Hummm... I tried it in a new application and it didn't throw the error. You're right that it may be something I'm doing.

    But there is the base problem of having the ability to use the middle range thumb for single drag. 
    Here's my code for enabling the middle range thumb to be shown on default.

    Internally, I believe that you're setting the "RangeMiddleThumb" width property to reflect the dragged size or something like that?

    <UserControl x:Class="Slider.MainPage"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
            <LinearGradientBrush x:Key="ControlBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                <GradientStop Color="#FFDCDCDC" Offset="0.50"/>
                <GradientStop Color="#FFADADAD" Offset="0.50"/>
                <GradientStop Color="#FFD4D4D4" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="SliderThumb_OuterBorder_Normal" Color="#FF6B7D91"/>
            <Style x:Key="MiddleThumbStyle" TargetType="Thumb">
                <Setter Property="Background" Value="#FF1F3B53"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFA3AEB9" Offset="0"/>
                            <GradientStop Color="#FF8399A9" Offset="0.375"/>
                            <GradientStop Color="#FF718597" Offset="0.375"/>
                            <GradientStop Color="#FF617584" Offset="1"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                                                <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
                                                <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <!--<Storyboard>
                                                <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                                            </Storyboard>-->
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <!--<Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                                            </Storyboard>-->
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Background="White" CornerRadius="2">
                                    <Grid Background="{TemplateBinding Background}" Margin="1">
                                        <Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
                                        <Rectangle x:Name="BackgroundGradient">
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                    <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                    <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                                    <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                    </Grid>
                                </Border>
                                <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="2" RadiusX="2"/>
                                <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="AlternateThumbStyle" TargetType="Thumb">
                <Setter Property="Background" Value="#FF1F3B53"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFA3AEB9" Offset="0"/>
                            <GradientStop Color="#FF8399A9" Offset="0.375"/>
                            <GradientStop Color="#FF718597" Offset="0.375"/>
                            <GradientStop Color="#FF617584" Offset="1"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Path x:Name="BackgroundGradient" Stroke="{TemplateBinding BorderBrush}"
                                      Data="M1,1 L8,8 L1,16 z"
                                      Cursor="Hand"
                                      Margin="0" Stretch="Fill"
                                      UseLayoutRounding="False">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                            <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                            <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="ThumbStyle" TargetType="Thumb">
                <Setter Property="Background" Value="#FF1F3B53"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFA3AEB9" Offset="0"/>
                            <GradientStop Color="#FF8399A9" Offset="0.375"/>
                            <GradientStop Color="#FF718597" Offset="0.375"/>
                            <GradientStop Color="#FF617584" Offset="1"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Thumb">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                                <ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Path x:Name="BackgroundGradient" Data="M8,1 L1,8 L8,16 z"
                                      Cursor="Hand"
                                      Margin="0" Stretch="Fill"
                                      Stroke="{TemplateBinding BorderBrush}"
                                      UseLayoutRounding="False">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                            <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                            <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
             
            <SolidColorBrush x:Key="SliderBackgroundTrack" Color="#FFF0F0F0"/>
            <SolidColorBrush x:Key="SliderOuterBorderTrack" Color="#FF848484"/>
            <SolidColorBrush x:Key="SliderBackground_Tick" Color="#FF000000"/>
            <DataTemplate x:Key="DefaultTicksTemplate">
                <Rectangle Fill="{StaticResource SliderBackground_Tick}" Height="5" ToolTipService.ToolTip="{Binding}" Width="1"/>
            </DataTemplate>
            <SolidColorBrush x:Key="SliderThumb_OuterBorder_Normal2" Color="#FF848484"/>
            <SolidColorBrush x:Key="ControlInnerBorder_Normal" Color="#FFFFFFFF"/>
            <CornerRadius x:Key="ControlInnerBorder_CornerRadius">0</CornerRadius>
            <CornerRadius x:Key="ControlOuterBorder_CornerRadius">1</CornerRadius>
            <LinearGradientBrush x:Key="SliderOuterBorder_Focused" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF282828"/>
                <GradientStop Color="#FF5F5F5F" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B"/>
            <SolidColorBrush x:Key="ControlInnerBorder_MouseOver" Color="#FFFFFFFF"/>
            <LinearGradientBrush x:Key="ControlBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFBDA" Offset="0"/>
                <GradientStop Color="#FFFEEBAE" Offset="0.50"/>
                <GradientStop Color="#FFFFD25A" Offset="0.50"/>
                <GradientStop Color="#FFFFFBA3" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ControlOuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF282828"/>
                <GradientStop Color="#FF5F5F5F" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ControlInnerBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB69A78"/>
                <GradientStop Color="#FFFFE17A" Offset="0.126"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="ControlBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFDCAB" Offset="0"/>
                <GradientStop Color="#FFFFD18F" Offset="0.5"/>
                <GradientStop Color="#FFFE9227" Offset="0.5"/>
                <GradientStop Color="#FFFFBA74" Offset="0"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898"/>
            <SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent"/>
            <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0"/>
            <Thickness x:Key="SliderRangeMiddleThumb_Margin">0</Thickness>
            <LinearGradientBrush x:Key="SliderRangeMiddleThumb_Background" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFBA3" Offset="1"/>
                <GradientStop Color="#FFFFFBDA" Offset="0"/>
                <GradientStop Color="#FFFFC92B" Offset="0.51"/>
                <GradientStop Color="#FFFEEBAE" Offset="0.5"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="SliderRangeMiddleThumb_Focused" Color="#FFFFC92B"/>
            <LinearGradientBrush x:Key="SliderRangeMiddleThumb_Background_State" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFD74E" Offset="0.996"/>
                <GradientStop Color="#FFFFDCAB"/>
                <GradientStop Color="#FFFE9227" Offset="0.51"/>
                <GradientStop Color="#FFFFD18F" Offset="0.5"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="SliderRangeMiddleThumb_Background_Disable" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFDADADA" Offset="1"/>
                <GradientStop Color="#FFFEFEFE"/>
                <GradientStop Color="#FF9F9D9D" Offset="0.51"/>
                <GradientStop Color="#FFCDCDCD" Offset="0.5"/>
            </LinearGradientBrush>
             
            <Style x:Key="RadTickBarStyle" TargetType="telerik:RadTickBar">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <telerik:TickBarPanel Background="Transparent"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Thickness x:Key="SliderOuterBorderTrack_BorderThickness">1 1 1 0</Thickness>
            <SolidColorBrush x:Key="SliderInnerBorderTrack" Color="#FFFFFFFF"/>
            <Thickness x:Key="SliderInnerBorderTrack_BorderThickness">1</Thickness>
            <CornerRadius x:Key="SliderInnerBorderTrack_CornerRadius">0</CornerRadius>
            <CornerRadius x:Key="SliderOuterBorderTrack_CornerRadius">0</CornerRadius>
            <Style x:Key="TrackStyle" TargetType="ContentControl">
                <Setter Property="Height" Value="6"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="BorderThickness" Value="{StaticResource SliderOuterBorderTrack_BorderThickness}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ContentControl">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{StaticResource SliderOuterBorderTrack_CornerRadius}">
                                <Border BorderBrush="{StaticResource SliderInnerBorderTrack}" BorderThickness="{StaticResource SliderInnerBorderTrack_BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource SliderInnerBorderTrack_CornerRadius}"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <SolidColorBrush x:Key="SliderHandOuterBorder_Normal" Color="#FF848484"/>
            <LinearGradientBrush x:Key="SliderHandBackground_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White"/>
                <GradientStop Color="#FFD4D4D4" Offset="1"/>
                <GradientStop Color="Gainsboro" Offset="0.42"/>
                <GradientStop Color="#FFADADAD" Offset="0.43"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="SliderHandInnerBorder_Normal" Color="#FFFFFFFF"/>
            <CornerRadius x:Key="SliderHandInnerBorder_CornerRadius">0</CornerRadius>
            <CornerRadius x:Key="SliderHandOuterBorder_CornerRadius">1</CornerRadius>
            <SolidColorBrush x:Key="ControlElement_Normal" Color="#FF000000"/>
            <SolidColorBrush x:Key="ControlElement_MouseOver" Color="#FF000000"/>
            <SolidColorBrush x:Key="ControlElement_Pressed" Color="#FF000000"/>
            <SolidColorBrush x:Key="ControlElement_Disabled" Color="#FF8D8D8D"/>
            <ControlTemplate x:Key="HandleRepeatButton" TargetType="RepeatButton">
                <Grid x:Name="Root">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_MouseOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_MouseOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_MouseOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Pressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_Pressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Pressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Path">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlBackground_Disabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlOuterBorder_Disabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlInnerBorder_Disabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource SliderHandOuterBorder_CornerRadius}">
                        <Border x:Name="InnerBorder" BorderBrush="{StaticResource SliderHandInnerBorder_Normal}" BorderThickness="1" CornerRadius="{StaticResource SliderHandInnerBorder_CornerRadius}"/>
                    </Border>
                    <Path x:Name="Path" Data="M3,0 L4,0 L4,1 L4,2 L4,3 L4,4 L4,5 L4,6 L4,7 L3,7 L3,6 L2,6 L2,5 L1,5 L1,4 L0,4 L0,3 L1,3 L1,2 L2,2 L2,1 L3,1 z" Fill="{StaticResource ControlElement_Normal}" HorizontalAlignment="Center" Height="7" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Center" Width="4"/>
                    <Border x:Name="FocusVisual" BorderBrush="{StaticResource SliderOuterBorder_Focused}" BorderThickness="1" CornerRadius="{StaticResource SliderHandOuterBorder_CornerRadius}" Visibility="Collapsed"/>
                </Grid>
            </ControlTemplate>
            <Style x:Key="IncreaseHandleStyle" TargetType="RepeatButton">
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="BorderBrush" Value="{StaticResource SliderHandOuterBorder_Normal}"/>
                <Setter Property="Background" Value="{StaticResource SliderHandBackground_Normal}"/>
                <Setter Property="Width" Value="18"/>
                <Setter Property="Height" Value="18"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="IsTabStop" Value="True"/>
                <Setter Property="Margin" Value="2 0 0 0"/>
                <Setter Property="Template" Value="{StaticResource HandleRepeatButton}"/>
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleY=" 1" ScaleX=" -1"/>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="DecreaseHandleStyle" TargetType="RepeatButton">
                <Setter Property="Width" Value="18"/>
                <Setter Property="Height" Value="18"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="IsTabStop" Value="True"/>
                <Setter Property="Margin" Value="0 0 2 0"/>
                <Setter Property="Template" Value="{StaticResource HandleRepeatButton}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="BorderBrush" Value="{StaticResource SliderHandOuterBorder_Normal}"/>
                <Setter Property="Background" Value="{StaticResource SliderHandBackground_Normal}"/>
            </Style>
            <Style x:Key="LargeHandleStyle" TargetType="RepeatButton">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="RepeatButton">
                            <Grid Background="Transparent"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="RadSliderStyle" TargetType="telerik:RadSlider">
                <Setter Property="Background" Value="{StaticResource SliderBackgroundTrack}"/>
                <Setter Property="BorderBrush" Value="{StaticResource SliderOuterBorderTrack}"/>
                <Setter Property="TickTemplate" Value="{StaticResource DefaultTicksTemplate}"/>
                <Setter Property="ThumbStyle" Value="{StaticResource ThumbStyle}"/>
                <Setter Property="AlternateThumbStyle" Value="{StaticResource AlternateThumbStyle}"/>
                <Setter Property="SelectionMiddleThumbStyle" Value="{StaticResource MiddleThumbStyle}"/>
                <Setter Property="TickBarStyle" Value="{StaticResource RadTickBarStyle}"/>
                <Setter Property="TrackStyle" Value="{StaticResource TrackStyle}"/>
                <Setter Property="IncreaseHandleStyle" Value="{StaticResource IncreaseHandleStyle}"/>
                <Setter Property="DecreaseHandleStyle" Value="{StaticResource DecreaseHandleStyle}"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:RadSlider">
                            <telerik:LayoutTransformControl x:Name="layoutControl" RenderTransformOrigin=".5 0">
                                <telerik:LayoutTransformControl.LayoutTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </telerik:LayoutTransformControl.LayoutTransform>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="OrientationStates">
                                        <VisualState x:Name="Horizontal">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="layoutControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <RotateTransform Angle="0"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Vertical">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="layoutControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <RotateTransform Angle="-90"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ReversedHorizontal">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="layoutControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScaleTransform ScaleX="-1"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="BottomTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScaleTransform ScaleX="-1"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="TopTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScaleTransform ScaleX="-1"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="ReversedVertical">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="layoutControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <TransformGroup>
                                                                <ScaleTransform ScaleY="-1"/>
                                                                <RotateTransform Angle="90"/>
                                                            </TransformGroup>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="BottomTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <TransformGroup>
                                                                <ScaleTransform ScaleY="-1"/>
                                                                <RotateTransform Angle="-180"/>
                                                            </TransformGroup>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="TopTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <TransformGroup>
                                                                <ScaleTransform ScaleY="-1"/>
                                                                <RotateTransform Angle="-180"/>
                                                            </TransformGroup>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="TickPlacementStates">
                                        <VisualState x:Name="NoneTicks">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TopTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="TopTicks">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TopTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="BottomTicks">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TopTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="BothTicks">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TopTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomTickBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="RangeStates">
                                        <VisualState x:Name="SingleThumb">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RangeThumbsPanel">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SingleThumbHost">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="RangeThumbs">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RangeThumbsPanel">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Visible</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="SingleThumbHost">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <Visibility>Collapsed</Visibility>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Grid UseLayoutRounding="True">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <telerik:RadTickBar x:Name="TopTickBar" Grid.ColumnSpan="3" Grid.Column="1" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" ItemTemplate="{TemplateBinding TickTemplate}" ItemsSource="{TemplateBinding ResultTicks}" ItemTemplateSelector="{TemplateBinding TickTemplateSelector}" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}" RenderTransformOrigin="0.5,0.5" Style="{TemplateBinding TickBarStyle}">
                                        <telerik:RadTickBar.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform/>
                                                <SkewTransform/>
                                                <RotateTransform/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </telerik:RadTickBar.RenderTransform>
                                    </telerik:RadTickBar>
                                    <ContentControl x:Name="Track" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" Grid.Column="1" Grid.Row="1" Style="{TemplateBinding TrackStyle}" VerticalAlignment="Center"
                                                    Margin="8,0"/>
                                    <RepeatButton x:Name="DecreaseButton" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" Style="{TemplateBinding DecreaseHandleStyle}" Visibility="{TemplateBinding HandlesVisibility}"/>
                                    <RepeatButton x:Name="LargeDecreaseButton" Grid.Column="1" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" Style="{StaticResource LargeHandleStyle}"/>
                                    <Grid Grid.Column="2" Grid.Row="1">
                                        <Thumb x:Name="SingleThumbHost" Style="{TemplateBinding ThumbStyle}" Visibility="{TemplateBinding ThumbVisibility}"/>
                                        <Grid x:Name="RangeThumbsPanel" Visibility="Collapsed"
                                              HorizontalAlignment="Center"
                                                    >
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <Thumb x:Name="RangeStartThumb"
                                                   Grid.Column="0"
                                                   Style="{TemplateBinding ThumbStyle}" Visibility="{TemplateBinding ThumbVisibility}"/>
                                            <Thumb x:Name="RangeMiddleThumb"
                                                   Grid.Column="1"
                                                   MinWidth="8"
                                                   Style="{TemplateBinding SelectionMiddleThumbStyle}"
                                                   />
                                            <Thumb x:Name="RangeEndThumb"
                                                   Grid.Column="2"
                                                   Style="{TemplateBinding AlternateThumbStyle}"
                                                   Visibility="{TemplateBinding ThumbVisibility}"/>
                                        </Grid>
                                    </Grid>
                                    <RepeatButton x:Name="LargeIncreaseButton" Grid.Column="3" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" Style="{StaticResource LargeHandleStyle}"/>
                                    <RepeatButton x:Name="IncreaseButton" Grid.Column="4" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Style="{TemplateBinding IncreaseHandleStyle}" Visibility="{TemplateBinding HandlesVisibility}"/>
                                    <telerik:RadTickBar x:Name="BottomTickBar" Grid.ColumnSpan="3" Grid.Column="1" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" ItemTemplate="{TemplateBinding TickTemplate}" ItemsSource="{TemplateBinding ResultTicks}" ItemTemplateSelector="{TemplateBinding TickTemplateSelector}" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}" Grid.Row="2" RenderTransformOrigin="0.5,0.5" Style="{TemplateBinding TickBarStyle}">
                                        <telerik:RadTickBar.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform/>
                                                <SkewTransform/>
                                                <RotateTransform/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </telerik:RadTickBar.RenderTransform>
                                    </telerik:RadTickBar>
                                </Grid>
                            </telerik:LayoutTransformControl>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
     
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadSlider
                Width="100"
                TickFrequency="10"
                SmallChange="10"
                IsSelectionRangeEnabled="True"
                Minimum="0"
                Maximum="100"
                Style="{StaticResource RadSliderStyle}"
                >
     
            </telerik:RadSlider>
        </Grid>
    </UserControl>
  5. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 29 Mar 2012 Link to this post

    Hello,

    The middle (range) thumb's size is used for calculations of the value as well as positioning the other thumbs. I would not recommend setting the min width property. Instead, you can use the MinimumRangeSpan property, which will ensure you a minimum range of the end thumbs - therefore the middle thumb will be visible. Please let me know if that is acceptable in your scenario.

    All the best,
    Alex Fidanov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top