Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/syncfusionexamples/how-to-customize-the-.net-maui-switch-control-visual
This repository contains visual customization sample for .NET MAUI SfSwitch control
https://github.com/syncfusionexamples/how-to-customize-the-.net-maui-switch-control-visual
customization maui maui--switch switch toggle visual-customization
Last synced: 25 days ago
JSON representation
This repository contains visual customization sample for .NET MAUI SfSwitch control
- Host: GitHub
- URL: https://github.com/syncfusionexamples/how-to-customize-the-.net-maui-switch-control-visual
- Owner: SyncfusionExamples
- Created: 2024-08-05T09:56:07.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-11T04:28:23.000Z (5 months ago)
- Last Synced: 2024-12-04T14:24:21.064Z (about 1 month ago)
- Topics: customization, maui, maui--switch, switch, toggle, visual-customization
- Language: C#
- Homepage:
- Size: 213 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How-to-customize-the-.NET-MAUI-Switch-control-visual
In this article, you can learn about how to customize the [.NET MAUI Switch](https://www.syncfusion.com/maui-controls/maui-switch) control's visuals, like Cupertino and Fluent themes. This customization is done using the [SwitchSettings](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SwitchSettings.html?tabs=tabid-1#Syncfusion_Maui_Buttons_SwitchSettings_TrackBackground) property within the `VisualStateManager`. Below is an example of how to implement these styles in XAML.
**XAML**
```
<Setter Property="VisualStateManager.VisualStateGroups">
<Setter.Value>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Off">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<syncfusion:SwitchSettings
ThumbBackground="#A19F9D"
ThumbCornerRadius="6"
ThumbHeightRequest="11"
ThumbStroke="#A19F9D"
ThumbWidthRequest="11"
TrackBackground="Transparent"
TrackHeightRequest="19"
TrackStroke="#A19F9D"
ThumbStrokeThickness="1"
TrackStrokeThickness="1"
TrackWidthRequest="39" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OffPressed">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<syncfusion:SwitchSettings
ThumbBackground="#A19F9D"
ThumbCornerRadius="7"
ThumbHeightRequest="13"
ThumbStroke="#A19F9D"
ThumbWidthRequest="13"
TrackBackground="Transparent"
TrackHeightRequest="19"
TrackStroke="#A19F9D"
ThumbStrokeThickness="1"
TrackStrokeThickness="1"
TrackWidthRequest="39" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OffHovered">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<syncfusion:SwitchSettings
ThumbBackground="#A19F9D"
ThumbCornerRadius="7"
ThumbHeightRequest="13"
ThumbStroke="#A19F9D"
ThumbWidthRequest="13"
TrackBackground="Transparent"
TrackHeightRequest="19"
TrackStroke="#A19F9D"
ThumbStrokeThickness="1"
TrackStrokeThickness="1"
TrackWidthRequest="39" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="On">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<syncfusion:SwitchSettings
ThumbBackground="#1B1A19"
ThumbCornerRadius="6"
ThumbHeightRequest="11"
ThumbStroke="#1B1A19"
ThumbWidthRequest="11"
TrackBackground="#0078D4"
TrackHeightRequest="19"
TrackStroke="#0078D4"
ThumbStrokeThickness="1"
TrackStrokeThickness="1"
TrackWidthRequest="39" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OnPressed">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<syncfusion:SwitchSettings
ThumbBackground="#1B1A19"
ThumbCornerRadius="7"
ThumbHeightRequest="13"
ThumbStroke="#1B1A19"
ThumbWidthRequest="13"
TrackBackground="#0078D4"
TrackHeightRequest="19"
TrackStroke="#0078D4"
ThumbStrokeThickness="1"
TrackStrokeThickness="1"
TrackWidthRequest="39" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OnHovered">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<syncfusion:SwitchSettings
ThumbBackground="#1B1A19"
ThumbCornerRadius="7"
ThumbHeightRequest="13"
ThumbStroke="#1B1A19"
ThumbWidthRequest="13"
TrackBackground="#0078D4"
TrackHeightRequest="19"
TrackStroke="#0078D4"
ThumbStrokeThickness="1"
TrackStrokeThickness="1"
TrackWidthRequest="39" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter.Value>
</Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<Setter.Value>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="On">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<syncfusion:SwitchSettings
ThumbBackground="White"
ThumbCornerRadius="15"
ThumbHeightRequest="26"
ThumbStroke="White"
ThumbStrokeThickness="1"
ThumbWidthRequest="26"
TrackBackground="#0078D4"
TrackHeightRequest="28"
TrackStroke="#0078D4"
TrackStrokeThickness="1.5"
TrackWidthRequest="48" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Off">
<VisualState.Setters>
<Setter Property="SwitchSettings">
<Setter.Value>
<syncfusion:SwitchSettings
ThumbBackground="White"
ThumbCornerRadius="15"
ThumbHeightRequest="26"
ThumbStroke="White"
ThumbStrokeThickness="1"
ThumbWidthRequest="26"
TrackBackground="#39393D"
TrackHeightRequest="28"
TrackStroke="#39393D"
TrackStrokeThickness="1.5"
TrackWidthRequest="48" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter.Value>
</Setter>
...
...
...
```
By utilizing the `SwitchSettings` property and defining different visual states, the .NET MAUI Switch control can be customized to fit various design requirements. This allows for a more tailored user experience in applications.