I'm using the RadSlider control to display a RangeSliderThumb (to define a range of values) and a regular SliderThumb (to define one value within that range). To be able to differentiate the regular SliderThumb i applied some style to it.
We are using PRISM and i noticed the style of the regular SliderThumb is reset when i navigate to the page a second time. None of the other styles are affected by navigating to the page multiple times.
I've attached a project with a stripped down version of my problem. Pressing the buttons navigates to the respective pages.
Screenshot after first navigation (style is applied as expected):
Screenshot after second navigation (style of regular SliderThumb is reset):
Any ideas on how to fix that behavior?
Greetings
Josh
Hello. I'm trying to create a vertical RadSlider with a custom Thumb that will display the current value of the slider, and has a pair of up/down buttons that the user can click to increment the slider by a fixed amount.
I've styled my Thumb to have Height="30" and Width="100", and the custom thumb appears as expected. However, there are two problems. First, because my RadSlider has Orientation="Vertical", I'm only able to drag the slider until the thumb is 100 px below the top of the slider - the width of the Thumb. When the Thumb is at the maximum position, the slider value is 100% - but I'd like the Thumb to move through the entire length of the slider's Track.
The second problem is, when the slider is set to zero, the custom content of my Thumb appears below the bottom of the slider - I would like it to be centered on the bottom of the slider's Track.
Setting a margin on the Thumb only changes the proportion of "dead" space in the slider; if the Margin is 50, then I can only drag to within 50 px of the top or bottom of the slider.
Thank you!
-Ed
Hello Im Working with the RadSlider in the RadScheduler.
I've used the RadSlider_OnDragDelta Method to change the view definition. Works as intended atm.
But I've got a problem. If somebody just klicks on the slider (left or right of the Darg-Bar) to make the Bar hop on that spot, the event doesn't get fired.
So I've found several events if somebody drags the silider. But what if somebody just klick on the Slider?
Is there a event i can catch this behaviour?
best regards
I am trying to achieve customized slider control required customizations are :
1.Thumb with the teal color
2.Repeat buttons end with rounded corners
3.Inside tick bar ticks as circles or ellipse instead of lines(please refer attached image.png file blue arrow mark)
I am able achieve first and second points above, but third point I am not getting.
<Window x:Class="SliderControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SliderControl"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style TargetType="Slider" x:Key="SliderStyle">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Track Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge">
<RepeatButton.Style>
<Style TargetType="RepeatButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid>
<Border BorderBrush="#CACACA" BorderThickness="1" CornerRadius="7,0,0,7" Background="#CACACA" Height="15" >
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge" >
<RepeatButton.Style>
<Style TargetType="RepeatButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Grid >
<Border BorderBrush="#CACACA" BorderThickness="1" CornerRadius="0,7,7,0" Background="#CACACA" Height="15" >
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb>
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Canvas>
<Rectangle Canvas.Left="4" Canvas.Bottom="-3.7" Fill="Teal" Width="12" Height="15" Margin="-8,0,0,5" Stroke="Teal"/>
<Path Fill="Teal" Data="M 0 10 L 20 10 L 10 0 Z" Canvas.Left="-4" Stretch="Fill" Width="12" Height="9.333"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
</Track>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="400">
<Slider Height="25" Width="250" Margin="30" Maximum="5" Minimum="1" Value="0" Cursor="Hand"
TickPlacement="Both" TickFrequency="1" Ticks="1, 2, 3, 4, 5" Name="Slider" Style="{StaticResource SliderStyle}">
</Slider>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Margin="70,-20,0,0"
Text="{Binding ElementName=Slider, Path=Value}"></TextBlock>
</StackPanel>
</Grid>
</Window>
Can you please help me ,how to get circles inside tickbar in wpf .
Hi all,
I'm having trouble working out how to increase the thumb slide animation speed. I can't find any information online about the toggle switch animation. Any help is appreciated.
Thanks
<Style TargetType="telerik:RadToggleSwitchButton">
<Setter Property="telerik:AnimationManager.AnimationSelector">
<Setter.Value>
<telerik:AnimationSelector>
<telerik:SlideAnimation SpeedRatio="2.0"/>
</telerik:AnimationSelector>
</Setter.Value>
</Setter>
</Style>
Hi,
I need to bind the increasesmall and decreasesmal to 2 different smallchange.
Is it possible?if not there is a way that the increasesmall/decreasesmall will increase/decrease with 2 different stepvalue.
Thank you.
In order to make the Slider handles "active" I have to click on a selection Thumb (start or end) then the handles become active and I can user them to increase/decrease incrementally.
Is this "by design"? If so, is there a way to prevent this default behavior and always have the Handles "active" (clickable)?
Cheers, Rob.
I read many threads on this issue and I'm just trying to do simple XAML only binding and not MVVM or code behind, but unfortunately I can't get it to work with RadSlider:
<
TextBox
Grid.Row
=
"5"
Grid.Column
=
"4"
Text
=
"{Binding ElementName=slHeightRange,Path=SelectionStart}"
HorizontalAlignment
=
"Right"
/>
<
telerik:RadSlider
x:Name
=
"slHeightRange"
Grid.Row
=
"5"
Grid.Column
=
"5"
Grid.ColumnSpan
=
"1"
Minimum
=
"1"
Maximum
=
"50"
HandlesVisibility
=
"Visible"
TickFrequency
=
"5"
TickPlacement
=
"BottomRight"
IsSelectionRangeEnabled
=
"True"
>
<
telerik:RadSlider.Thumbs
>
<
telerik:RangeSliderThumb
RangeStart
=
"5"
RangeEnd
=
"19"
/>
</
telerik:RadSlider.Thumbs
>
</
telerik:RadSlider
>
<
telerik:Label
Grid.Row
=
"5"
Grid.Column
=
"6"
Content
=
"{Binding ElementName=slHeightRange,Path=SelectionEnd}"
HorizontalAlignment
=
"Right"
/>
Any hints?
Cheers, Rob.
I have the following Slider. The rangeslider thumb does not respect the 0.1 distance between the start and end thumbs, the minimum space is 0 instead of 0.1 as I want.. What am I doing wrong?
<
telerik:RadSlider
x:Name
=
"RadSlider"
Margin
=
"0,0,0,6"
VerticalAlignment
=
"Bottom"
AutoToolTipPlacement
=
"TopLeft"
DragCompleted
=
"RadSlider_OnDragCompleted"
IsMoveToPointEnabled
=
"False"
IsSelectionRangeEnabled
=
"True"
Maximum
=
"1"
Minimum
=
"0"
MinimumRangeSpan
=
"0.1"
>
<
telerik:RadSlider.Thumbs
>
<
telerik:RangeSliderThumb
x:Name
=
"RangeSliderThumb"
AlternateThumbStyle
=
"{StaticResource EndThumbStyle}"
InteractionMode
=
"Lock"
MiddleThumbStyle
=
"{StaticResource MiddleThumbStyle}"
MinimumRangeSpan
=
"0.1"
ThumbStyle
=
"{StaticResource StartThumbStyle}"
/>
</
telerik:RadSlider.Thumbs
>
</
telerik:RadSlider
>