Format Slider for Touch?

7 posts, 1 answers
  1. Joshua
    Joshua avatar
    17 posts
    Member since:
    Apr 2018

    Posted 18 Oct 2018 Link to this post

    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!

  2.
  3. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1192 posts

    Posted 23 Oct 2018 Link to this post

    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.
  5. Bracco
    Bracco avatar
    7 posts
    Member since:
    Nov 2015

    Posted 30 Jul 2020 in reply to Dilyan Traykov Link to this post

    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

  7. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1192 posts

    Posted 31 Jul 2020 Link to this post

    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

  9. Bracco
    Bracco avatar
    7 posts
    Member since:
    Nov 2015

    Posted 05 Aug 2020 in reply to Dilyan Traykov Link to this post

    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.

  11. Bracco
    Bracco avatar
    7 posts
    Member since:
    Nov 2015

    Posted 05 Aug 2020 in reply to Bracco Link to this post

    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.

  13. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1192 posts

    Posted 06 Aug 2020 Link to this post

    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

Back to Top