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

[Gerald Lewis]

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?

[Gerald Lewis]

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>

[Sowndharya Selladurai]

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