We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

I want to be able to style the many SfSlider controls in my project

I'm trying to create a common look and feel for all SfSlider controls in my project. For Microsoft Maui controls, I can style them using Styles in a ResourceDictionary, for example:

```

    <Style TargetType="Button">

        <Setter Property="TextColor"

                     Value="{AppThemeBinding Light={StaticResource TextLight},

                                                                   Dark={StaticResource TextDark}}" />

    </Style>

```

This allows me to set the Text color for all Buttons (that I don't override) when I place it in App.Xaml.

I want to be able to do the same for SfSliders, however, many styles foil any attempt to do so. For example:

```

<sf:SfSlider Value={Binding LogLevel}

...

    <sf:SfSlider.TrackStyle>

            <sf:SliderTrackStyle ActiveFill="{AppThemeBinding Light={StaticResource BackgroundLight},

                                                                                                  Dark={StaticResource BackgroundDark}}"

                                              InactiveFill="{AppThemeBinding Light={StaticResource BackgroundLight},

                                                                                                     Dark={StaticResource BackgroundDark}}" />

    </sf:SfSlider.TrackStyle>

</sf:Slider>

It appears that I must duplicate this code for every slider​ control, and I have a LOT of them. This violates DRY and I'd like to avoid that.

Is there a way to be able to style these common control properties? If so, where can I find documentation on

how to do so?




2 Replies

GL Gerald Lewis April 4, 2023 10:23 PM UTC

I guess I hadn't searched far enough in the examples. I found the answer there. For example:

```

<Style TargetType="sf:SfSlider">

    <Setter Property="ShowLabels"

            Value="True" />

    <Setter Property="ShowTicks"

            Value="True" />

    <Setter Property="Interval"

            Value="1" />

    <Setter Property="StepSize"

            Value="1" />

    <Setter Property="TrackStyle">

        <sf:SliderTrackStyle ActiveFill="{AppThemeBinding Light={StaticResource BackgroundLight},

                                                          Dark={StaticResource BackgroundDark}}"

                             InactiveFill="{AppThemeBinding Light={StaticResource BackgroundLight},

                                                            Dark={StaticResource BackgroundDark}}" />

    </Setter>

    <Setter Property="ThumbStyle">

        <sf:SliderThumbStyle Fill="{AppThemeBinding Light={StaticResource BackgroundLight},

                                                    Dark={StaticResource BackgroundDark}}" />

    </Setter>

</Style>



SS Sowndharya Selladurai Syncfusion Team April 5, 2023 11:16 AM UTC

Hi Gerald Lewis,

Here's an example of how to create a style that can be applied to all Slider controls in your application to give them a common look. If your application has a dark theme, dark theme color will apply. Similarly, if it has a light theme, light theme color will apply.

<Application.Resources>

        <ResourceDictionary>

            <!--Light theme-->

            <Color x:Key="trackLight">#b3b300</Color>

            <Color x:Key="thumbLight">#cccc00</Color>

            <Color x:Key="thumbOverlayLight">#ffffe6</Color>

 

            <!--Dark theme-->

            <Color x:Key="trackDark">#ff9933</Color>

            <Color x:Key="thumbDark">#ffa64d</Color>

            <Color x:Key="thumbOverlayDark">#ffd9b3</Color>

 

            <Style x:Key="baseStyle" TargetType="sliders:SfSlider">

                <Setter Property="ShowTicks" Value="True"/>

                <Setter Property="ShowDividers" Value="True"/>

                <Setter Property="ShowLabels" Value="True"/>

                <Setter Property="TrackStyle">

                    <sliders:SliderTrackStyle ActiveFill="{AppThemeBinding Light={StaticResource trackLight},Dark={StaticResource trackDark}}"/>

                </Setter>

                <Setter Property="ThumbStyle">

                    <sliders:SliderThumbStyle Fill="{AppThemeBinding Light={StaticResource thumbLight},Dark={StaticResource thumbDark}}"/>

                </Setter>

                <Setter Property="ThumbOverlayStyle">

                    <sliders:SliderThumbOverlayStyle Fill="{AppThemeBinding Light={StaticResource thumbOverlayLight},Dark={StaticResource thumbOverlayDark}}"/>

                </Setter>

            </Style>

</ResourceDictionary>

</Application.Resources>


<sliders:SfSlider Minimum="1"

                              Maximum="10"

                              Style="{StaticResource baseStyle}">

 </sliders:SfSlider>

 

 <sliders:SfSlider  Minimum="0"

                                Maximum="50"

                                Style="{StaticResource baseStyle}">

 </sliders:SfSlider>

Below is attached the sample for reference. I hope this helps!


Regards,

Sowndharya Selladurai.


Attachment: SlidersWithStyle_a4fcf521.zip

Loader.
Live Chat Icon For mobile
Up arrow icon