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

QA RadSlider Problems - Binding and disregarded properties?

1 Answer 92 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 26 Jul 2011, 04:48 PM
Hello,

I am attempting to refactor my old RadSlider styles into the new structure.  I have created a theme that sees to work well in Expression Blend (see image 2), however, and when I copy+paste it into my application it becomes garbled.  The only difference between Blend and my application is that the datacontext and properties are set via binding (SelectionStart, Minimum, etc...)  I have logged other issues previously about problem with binding and the RadSlider - particularily negative values and the ordering of property setters.

To be more specific, it seems like it disregards both the "Orientation" property is ignored.  After wasting some hours on it, I decided to simply take a brand new style exported from Blend and copy it into my application (after removing the offending RadTickBar properties) and noticed that I have both the horizontal and vertical tempates shown.  (see image 1)

With my custom style and the orientation set to horizontal (for some reason the orientation property works) I unfortunately see both horizontal templates (single thumb and range) (see image 3)

Here is the style I'm trying to use and my application of it.  Is there something you can see I'm missing or doing incorrectly?  or should i be looking for another service pack for some fixes?

<ControlTemplate x:Key="TickBarTemplate" TargetType="telerik:RadTickBar">
        <Canvas x:Name="LayoutRoot" Background="Transparent"/>
    </ControlTemplate>
 
    <ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb">
        <Grid Background="Transparent" Height="18" Width="21" Cursor="Hand">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="InnerShell_Fill" Storyboard.TargetProperty="Opacity" Duration="0" To="0.695" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="InnerShell_Fill" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
                            <ColorAnimation Storyboard.TargetName="OuterShell" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Duration="0" To="#FF1985DD" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="OuterShell" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Duration="0" To="#FF848484" />
                            <ColorAnimation Storyboard.TargetName="InnerShell_Fill1" Storyboard.TargetProperty="(GradientStop.Color)" Duration="0" To="#FFFFFFFF" />
                            <ColorAnimation Storyboard.TargetName="InnerShell_Fill2" Storyboard.TargetProperty="(GradientStop.Color)" Duration="0" To="#FF848484" />
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Rectangle Grid.Row="0" Grid.Column="0" Fill="{TemplateBinding Background}" Margin="0,6,0,0" />
            <Rectangle Grid.Row="0" Grid.Column="1" Fill="{TemplateBinding Foreground}" Margin="0,6,0,0" />
            <Path x:Name="OuterShell" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Data="M0,0 L10,0 L10,4 L5,9 L0,4 z" Stroke="#FF799FBF" Fill="#FF1985DD" />
            <Path x:Name="InnerShell" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="1,1,1,1" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Data="M0,0 L10,0 L10,3.5 L5,8 L0,3.5 z" Stroke="#FFFFFFFF">
                <Path.Fill>
                    <RadialGradientBrush x:Name="InnerShell_Fill" RadiusX="15" RadiusY="9" Center="9.5,3" GradientOrigin="9.5,15" MappingMode="Absolute">
                        <GradientStop x:Name="InnerShell_Fill1" Color="#FF799FBF" Offset="0.104"/>
                        <GradientStop x:Name="InnerShell_Fill2" Color="#FFC9DBF0" Offset="0.53"/>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
        </Grid>
    </ControlTemplate>
 
    <ControlTemplate x:Key="HorizontalRangeSelectionThumbTemplate" TargetType="Thumb">
        <Grid Background="Transparent">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver" />
                    <VisualState x:Name="Pressed" />
                    <VisualState x:Name="Disabled" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle Fill="{TemplateBinding Background}" Cursor="Hand" />
        </Grid>
    </ControlTemplate>
 
    <Style x:Key="HandleStyle" TargetType="RepeatButton">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Pressed" />
                                <VisualState x:Name="Disabled" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <ControlTemplate x:Key="VerticalThumbTemplate" TargetType="Thumb">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="MouseOver" />
                    <VisualState x:Name="Pressed" />
                    <VisualState x:Name="Disabled" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </ControlTemplate>
 
    <ControlTemplate x:Key="VerticalRangeSelectionThumbTemplate" TargetType="Thumb">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver" />
                    <VisualState x:Name="Pressed" />
                    <VisualState x:Name="Disabled" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </ControlTemplate>
 
    <ControlTemplate x:Key="ValidationToolTipTemplate" TargetType="ToolTip">
        <Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
            <Grid.RenderTransform>
                <TranslateTransform x:Name="xform" X="-25"/>
            </Grid.RenderTransform>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="OpenStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0"/>
                        <VisualTransition GeneratedDuration="0:0:0.2" To="Open">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="xform">
                                    <DoubleAnimation.EasingFunction>
                                        <BackEase Amplitude=".3" EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                            </Storyboard>
                        </VisualTransition>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Closed">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Open">
                        <Storyboard>
                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="xform"/>
                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border Background="#FFDC000C" CornerRadius="2">
                <Border.Effect>
                    <DropShadowEffect Opacity="0.5" ShadowDepth="3"/>
                </Border.Effect>
            </Border>
            <Border CornerRadius="2">
                <TextBlock Foreground="White" MaxWidth="250" Margin="8,3,8,3" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/>
            </Border>
        </Grid>
    </ControlTemplate>
 
    <Style x:Key="rs_style" TargetType="telerik:RadSlider">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="Orientation" Value="Horizontal"/>
        <Setter Property="IsEnabled" Value="True"/>
        <Setter Property="HandlesVisibility" Value="Collapsed"/>
        <Setter Property="IsMouseWheelEnabled" Value="True"/>
        <Setter Property="Background" Value="Fuchsia"/>
        <Setter Property="Foreground" Value="Lime"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Delay" Value="250"/>
        <Setter Property="RepeatInterval" Value="250"/>
        <Setter Property="StepAction" Value="ChangeRange"/>
        <Setter Property="ThumbVisibility" Value="Visible"/>
        <Setter Property="SelectionStart" Value="100"/>
        <Setter Property="SelectionEnd" Value="200"/>
        <Setter Property="Minimum" Value="-500" />
        <Setter Property="Minimum" Value="500" />
        <Setter Property="IsSelectionRangeEnabled" Value="True" />
        <Setter Property="MinimumRangeSpan" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadSlider">
                    <Grid x:Name="LayoutRoot">
                        <Grid.Resources>
                            <DataTemplate x:Key="HorizontalTickTemplate">
                                <Grid x:Name="RootElement" ToolTipService.ToolTip="{Binding}">
                                    <Rectangle Fill="#FF000000" Height="5" Width="1"/>
                                </Grid>
                            </DataTemplate>
                            <DataTemplate x:Key="VerticalTickTemplate">
                                <Grid x:Name="RootElement" ToolTipService.ToolTip="{Binding}">
                                    <Rectangle Fill="#FF000000" Height="1" Width="5"/>
                                </Grid>
                            </DataTemplate>
                        </Grid.Resources>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused" />
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid"/>
                                <VisualState x:Name="InvalidUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="InvalidFocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
 
                        <Grid>
 
                            <Grid x:Name="HorizontalTemplate">
 
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
 
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
 
                                <!-- Tick Bars - Not Used -->
                                <telerik:RadTickBar x:Name="TopTickBar" Grid.Row="0" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}" MinHeight="6" Template="{StaticResource TickBarTemplate}"/>
                                <telerik:RadTickBar x:Name="BottomTickBar" Grid.Row="2" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}" MinHeight="6" Template="{StaticResource TickBarTemplate}"/>
 
                                <!-- Track -->
                                <Border x:Name="Track" Grid.Row="1" Grid.Column="1">
                                </Border>
 
                                <!-- Horizontal - Single Thumb -->
                                <Grid x:Name="HorizontalSingleThumbTemplate" Grid.Row="1" Grid.Column="1" Height="32">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Rectangle x:Name="HorizontalSingleLargeDecrease" Cursor="Hand" Fill="Transparent" Opacity="0" VerticalAlignment="Stretch"/>
                                    <Thumb x:Name="HorizontalSingleThumb" Grid.Column="1" Width="21" Height="18" IsEnabled="{TemplateBinding IsEnabled}" Template="{StaticResource HorizontalThumbTemplate}" Visibility="{TemplateBinding ThumbVisibility}" VerticalAlignment="Center" />
                                    <Rectangle x:Name="HorizontalSingleLargeIncrease" Cursor="Hand" Grid.Column="2" Fill="Transparent" Opacity="0" VerticalAlignment="Stretch"/>
                                </Grid>
 
                                <!-- Horizontal - Double Thumb -->
                                <Grid x:Name="HorizontalRangeTemplate" Grid.Row="1" Grid.Column="1" Height="32">
 
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="1*" />
                                    </Grid.RowDefinitions>
 
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
 
                                    <Rectangle x:Name="HorizontalRangeLargeDecrease" Grid.Row="0" Grid.Column="0" Cursor="Hand" Fill="{TemplateBinding Background}" Margin="0,6,0,0"/>
 
                                    <Thumb x:Name="HorizontalRangeStartThumb" Grid.Row="0" Grid.Column="1" Width="21" Height="18" IsEnabled="{TemplateBinding IsEnabled}" Template="{StaticResource HorizontalThumbTemplate}" Visibility="{TemplateBinding ThumbVisibility}" VerticalAlignment="Center" Background="{TemplateBinding Background}">
                                        <Thumb.Foreground>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFF0E663" Offset="0.13"/>
                                                <GradientStop Color="#FFAB9C00" Offset="0.917"/>
                                                <GradientStop Color="#FFE3D75D" Offset="0.065"/>
                                                <GradientStop Color="#FFD8C600" Offset="0.6"/>
                                                <GradientStop Color="#FFEADD4B" Offset="0.339"/>
                                                <GradientStop Color="#FFD3C100" Offset="0.665"/>
                                            </LinearGradientBrush>
                                        </Thumb.Foreground>
                                    </Thumb>
 
                                    <Thumb x:Name="HorizontalRangeMiddleThumb" Grid.Row="0" Grid.Column="2" IsEnabled="{TemplateBinding IsEnabled}" Template="{StaticResource HorizontalRangeSelectionThumbTemplate}" Margin="0,6,0,0">
                                        <Thumb.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFF0E663" Offset="0.13"/>
                                                <GradientStop Color="#FFAB9C00" Offset="0.917"/>
                                                <GradientStop Color="#FFE3D75D" Offset="0.065"/>
                                                <GradientStop Color="#FFD8C600" Offset="0.6"/>
                                                <GradientStop Color="#FFEADD4B" Offset="0.339"/>
                                                <GradientStop Color="#FFD3C100" Offset="0.665"/>
                                            </LinearGradientBrush>
                                        </Thumb.Background>
                                    </Thumb>
 
                                    <Thumb x:Name="HorizontalRangeEndThumb" Grid.Row="0" Grid.Column="3" Width="21" Height="18" IsEnabled="{TemplateBinding IsEnabled}" Template="{StaticResource HorizontalThumbTemplate}" Visibility="{TemplateBinding ThumbVisibility}" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}">
                                        <Thumb.Background>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FFF0E663" Offset="0.13"/>
                                                <GradientStop Color="#FFAB9C00" Offset="0.917"/>
                                                <GradientStop Color="#FFE3D75D" Offset="0.065"/>
                                                <GradientStop Color="#FFD8C600" Offset="0.6"/>
                                                <GradientStop Color="#FFEADD4B" Offset="0.339"/>
                                                <GradientStop Color="#FFD3C100" Offset="0.665"/>
                                            </LinearGradientBrush>
                                        </Thumb.Background>
                                    </Thumb>
 
                                    <Rectangle x:Name="HorizontalRangeLargeIncrease" Grid.Row="0" Grid.Column="4" Cursor="Hand" Fill="{TemplateBinding Foreground}" Margin="0,6,0,0" />
 
                                    <TextBlock Grid.Row="1" Grid.Column="1"
                                                Foreground="#FF7A7A7A"
                                                FontFamily="Century Gothic"
                                                FontSize="9"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                IsHitTestVisible="False"
                                                Text="{Binding Path=SelectionStart, RelativeSource={RelativeSource TemplatedParent}, StringFormat='\{0:N0\}'}" />
 
                                    <TextBlock Grid.Row="1" Grid.Column="3"
                                                Foreground="#FF7A7A7A"
                                                FontFamily="Century Gothic"
                                                FontSize="9"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                IsHitTestVisible="False"
                                                Text="{Binding Path=SelectionEnd, RelativeSource={RelativeSource TemplatedParent}, StringFormat='\{0:N0\}'}" />
 
                                </Grid>
 
                                <!-- Increase/Decrease Buttons -->
                                <RepeatButton x:Name="HorizontalDecreaseHandle" Grid.Row="0" Grid.Column="0" Delay="{TemplateBinding Delay}" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Style="{StaticResource HandleStyle}" Visibility="{TemplateBinding HandlesVisibility}" />
                                <RepeatButton x:Name="HorizontalIncreaseHandle" Grid.Row="0" Grid.Column="2" Delay="{TemplateBinding Delay}" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Style="{StaticResource HandleStyle}" Visibility="{TemplateBinding HandlesVisibility}" />
 
                            </Grid>
 
 
                            <Grid x:Name="VerticalTemplate">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <telerik:RadTickBar x:Name="LeftTickBar" Grid.Column="0" IsTabStop="False" Maximum="{TemplateBinding Maximum}" MinWidth="6" Minimum="{TemplateBinding Minimum}" Grid.Row="1" Template="{StaticResource TickBarTemplate}"/>
                                <telerik:RadTickBar x:Name="RightTickBar" Grid.Column="2" IsTabStop="False" Maximum="{TemplateBinding Maximum}" MinWidth="6" Minimum="{TemplateBinding Minimum}" Grid.Row="1" Template="{StaticResource TickBarTemplate}"/>
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Center" Grid.Row="1" Width="6">
                                    <Border BorderBrush="Pink" BorderThickness="1" Background="{TemplateBinding Background}" />
                                </Border>
                                <Grid x:Name="VerticalSingleThumbTemplate" Grid.Column="1" Grid.Row="1" Width="18">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Rectangle x:Name="VerticalSingleLargeDecrease" Cursor="Hand" Fill="Blue" HorizontalAlignment="Stretch" Opacity="0" Grid.Row="2"/>
                                    <Thumb x:Name="VerticalSingleThumb" HorizontalAlignment="Right" Height="8" IsEnabled="{TemplateBinding IsEnabled}" Grid.Row="1" Template="{StaticResource VerticalThumbTemplate}" Visibility="{TemplateBinding ThumbVisibility}" Width="18"/>
                                    <Rectangle x:Name="VerticalSingleLargeIncrease" Cursor="Hand" Fill="Blue" HorizontalAlignment="Stretch" Opacity="0" Grid.Row="0"/>
                                </Grid>
                                <Grid x:Name="VerticalRangeTemplate" Grid.Column="1" Grid.Row="1" Width="18">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Rectangle x:Name="VerticalRangeLargeDecrease" Cursor="Hand" Fill="Transparent" Opacity="0" Grid.Row="4"/>
                                    <Thumb x:Name="VerticalRangeStartThumb" HorizontalAlignment="Center" Height="8" IsEnabled="{TemplateBinding IsEnabled}" Grid.Row="3" Template="{StaticResource VerticalThumbTemplate}" Visibility="{TemplateBinding ThumbVisibility}" Width="18"/>
                                    <Thumb x:Name="VerticalRangeMiddleThumb" HorizontalAlignment="Center" IsEnabled="{TemplateBinding IsEnabled}" Grid.Row="2" Template="{StaticResource VerticalRangeSelectionThumbTemplate}"/>
                                    <Thumb x:Name="VerticalRangeEndThumb" HorizontalAlignment="Center" Height="8" IsEnabled="{TemplateBinding IsEnabled}" Grid.Row="1" Template="{StaticResource VerticalThumbTemplate}" Visibility="{TemplateBinding ThumbVisibility}" Width="18"/>
                                    <Rectangle x:Name="VerticalRangeLargeIncrease" Cursor="Hand" Fill="Transparent" Opacity="0" Grid.Row="0"/>
                                </Grid>
                                <RepeatButton x:Name="VerticalDecreaseHandle" Grid.Column="1" Delay="{TemplateBinding Delay}" HorizontalAlignment="Center" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Margin="0 2 0 0" Grid.Row="2" RenderTransformOrigin="0.5,0.5" Style="{StaticResource HandleStyle}" Visibility="{TemplateBinding HandlesVisibility}">
                                    <RepeatButton.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleY="-1" ScaleX="-1"/>
                                            <RotateTransform Angle="90"/>
                                        </TransformGroup>
                                    </RepeatButton.RenderTransform>
                                </RepeatButton>
                                <RepeatButton x:Name="VerticalIncreaseHandle" Grid.Column="1" Delay="{TemplateBinding Delay}" HorizontalAlignment="Center" IsEnabled="{TemplateBinding IsEnabled}" Interval="{TemplateBinding RepeatInterval}" Margin="0,0,0,2" Grid.Row="0" RenderTransformOrigin="0.5,0.5" Style="{StaticResource HandleStyle}" Visibility="{TemplateBinding HandlesVisibility}">
                                    <RepeatButton.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleY="-1" ScaleX="1"/>
                                            <RotateTransform Angle="90"/>
                                        </TransformGroup>
                                    </RepeatButton.RenderTransform>
                                </RepeatButton>
                            </Grid>
                        </Grid>
 
                        <Rectangle x:Name="FocusVisual" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF000000" StrokeThickness="1" StrokeDashArray="1 2"/>
                        <Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1" Visibility="Collapsed">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
                                    <ToolTip.Triggers>
                                        <EventTrigger RoutedEvent="Canvas.Loaded">
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <System:Boolean>true</System:Boolean>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </ToolTip.Triggers>
                                </ToolTip>
                            </ToolTipService.ToolTip>
                            <Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12">
                                <Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="1,3,0,0"/>
                                <Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="1,3,0,0"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
 
 
<!-- Slider -->
<telerik:RadSlider Grid.Row="1" Grid.Column="0" Margin="5,13,5,13"
    x:Name="ToleranceSlider"
    IsSelectionRangeEnabled="True"
    Orientation="Horizontal"
    HandlesVisibility="Collapsed"
    EnableSideTicks="False"
    Style="{StaticResource rs_style}"
    SelectionStart="{Binding Value1, Mode=TwoWay}"
    SelectionEnd="{Binding Value2, Mode=TwoWay}"
    Minimum="{Binding Min, Mode=TwoWay}"
    Maximum="{Binding Max, Mode=TwoWay}"
    Background="{Binding LeftRegion}"
    Foreground="{Binding RightRegion}"
/>



1 Answer, 1 is accepted

Sort by
0
Alex Fidanov
Telerik team
answered on 27 Jul 2011, 08:45 AM
Hi Rob,

I believe this is the old template of the RadSlider. For Q2 2011, we have refactored the slider control and there is a new template. The orientation is not working probably because of this, as now, we are using a LayoutTransformControl. Thumb issues is probably as a result of the new changes.

I would recommend extracting the new style and template with Expression Blend and restyling it using the new style/templates.

All the best,
Alex Fidanov
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Tags
Slider
Asked by
Rob
Top achievements
Rank 1
Answers by
Alex Fidanov
Telerik team
Share this question
or