Format Slider for Touch?

[Joshua]

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!

[Dilyan Traykov]

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

[Bracco]

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

[Dilyan Traykov]

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

[Bracco]

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.

[Bracco]

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.

[Dilyan Traykov]

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