BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
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?
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>
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.