Telerik Forums
UI for WPF Forum
1 answer
43 views

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

Martin Ivanov
Telerik team
 answered on 16 Aug 2023
0 answers
68 views

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

Ed
Top achievements
Rank 1
 asked on 26 Jun 2023
1 answer
41 views

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

Dilyan Traykov
Telerik team
 answered on 30 Jan 2023
1 answer
52 views
I have two radtimelines in a single WPF view can i add horizontal scrollbars for each of the timeline separately. Both the Timelines are inside the RadSplitContainer and inside a RadPaneGroup.
Martin Ivanov
Telerik team
 answered on 11 Oct 2022
1 answer
39 views

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 .

                                                                                                                                                                
Masha
Telerik team
 answered on 08 Jun 2022
1 answer
202 views

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>
Vicky
Telerik team
 answered on 24 Mar 2022
5 answers
101 views

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.

Dilyan Traykov
Telerik team
 answered on 04 Mar 2021
8 answers
132 views

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.

Martin Ivanov
Telerik team
 answered on 05 Jan 2021
2 answers
338 views

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.

 

 

 

Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 11 Nov 2020
1 answer
98 views

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>
Yoan
Telerik team
 answered on 30 Sep 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?