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

Format Slider for Touch?

6 Answers 325 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 2
Joshua asked on 18 Oct 2018, 05:41 PM

I'm developing against the Microsoft Surface, and need a slider that is easy to adjust just by touching the screen, the default slider (any theme) is pretty narrow and it's area of recognition is a little too small/exact to be touch-friendly, is there an easy way to make a horizontal slider thicker/taller?  It works fine for mouse but with just touch the user misses the area of sensitivity on the first try (most of the time) and has to try again.  We want to make the slider easier to manipulate.

thanks!

6 Answers, 1 is accepted

Sort by
0
Accepted
Dilyan Traykov
Telerik team
answered on 23 Oct 2018, 11:54 AM
Hello Joshua,

You can achieve the desired result by specifying custom styles as the ThumbStyle and/or TrackStyle of the RadSlider control.

<Window.Resources>
    <Style x:Key="TrackStyle" TargetType="ContentControl" BasedOn="{StaticResource TrackStyle}">
        <Setter Property="Height" Value="20" />
    </Style>
    <Style x:Key="ThumbStyle" TargetType="Thumb" BasedOn="{StaticResource ThumbStyle}">
        <Setter Property="Height" Value="30" />
        <Setter Property="Width" Value="40" />
    </Style>
</Window.Resources>
<Grid>
    <telerik:RadSlider TrackStyle="{StaticResource TrackStyle}"
                       ThumbStyle="{StaticResource ThumbStyle}"
                       Minimum="0" Maximum="100" Value="50" />
</Grid>

I've also prepared a small sample project as a demonstration.

Please let me know if this is what you have in mind or if I've misunderstood your requirement.

Regards,
Dilyan Traykov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bracco
Top achievements
Rank 1
Veteran
answered on 30 Jul 2020, 01:32 PM

Hi Dilyan,

How can achieve the same behavior when using the NuGet package of your product (https://nuget.telerik.com/nuget)? The `BasedOn` part is throwing because the style is not available. If I remove the `BasedOn` then I end up with a totally broken style.

Cheers

0
Dilyan Traykov
Telerik team
answered on 31 Jul 2020, 02:30 PM

Hi Hugo,

Please have a look at the Setting a Theme and Styling the Controls articles to get an understanding of why this error is observed.

You either need to switch to the NoXaml NuGet package or include the required styles and resources to get the desired result.

Please let me know if you need any further assistance in the process.

Regards,
Dilyan Traykov
Progress Telerik

0
Bracco
Top achievements
Rank 1
Veteran
answered on 05 Aug 2020, 09:07 AM

Hi Dilyan,

I have tried switching over but the window is no longer showing-up:

1. I have switched over to the NoXaml packages and I have added a reference to the following package `Telerik.Windows.Themes.Fluent.for.Wpf`.

2. I have commented the following lines of code:

StyleManager.ApplicationTheme = new FluentTheme();<br>FluentPalette.LoadPreset(FluentPalette.ColorVariation.Dark);<br>ThemeEffectsHelper.IsAcrylicEnabled = false;

 

3. I have updated my `App.xaml` from

<!--
    Set the Telerik theme for all the supported default WPF controls
-->
 
<telerik:FluentTheme x:Key="Theme" />
 
<Style TargetType="{x:Type Button}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type CheckBox}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type TextBox}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type RadioButton}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type ListBox}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type PasswordBox}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type RepeatButton}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type ToolTip}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type Hyperlink}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type StatusBar}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type GridSplitter}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>
 
<Style TargetType="{x:Type Separator}">
    <Setter Property="telerik:StyleManager.Theme" Value="{StaticResource Theme}" />
</Style>

 

to

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/Telerik.Windows.Themes.Fluent;component/Themes/System.Windows.xaml" />
    <ResourceDictionary Source="pack://application:,,,/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.xaml" />
    <ResourceDictionary Source="pack://application:,,,/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.Input.xaml" />
    <ResourceDictionary Source="pack://application:,,,/Telerik.Windows.Themes.Fluent;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />
</ResourceDictionary.MergedDictionaries>

 

And running the app gives me no window.

0
Bracco
Top achievements
Rank 1
Veteran
answered on 05 Aug 2020, 10:21 AM

Ok I managed to fix it thanks to this post: https://www.telerik.com/forums/radwindow-not-showing

It'd be nice if the documentation page could be updated.

0
Dilyan Traykov
Telerik team
answered on 06 Aug 2020, 02:51 PM

Hi Hugo,

I'm glad to hear that you've managed to successfully display the window.

As for your feedback regarding our documentation, please note that the Using RadWindow with NoXaml assemblies section of the control's Getting Started page documents this requirement. If you feel, however, that this should be stated in another article, please let me know.

Regards,
Dilyan Traykov
Progress Telerik

Tags
Slider
Asked by
Joshua
Top achievements
Rank 2
Answers by
Dilyan Traykov
Telerik team
Bracco
Top achievements
Rank 1
Veteran
Share this question
or