How to customize the .NET MAUI Switch control visual?

In this article, you can learn about how to customize the .NET MAUI Switch control’s visuals, like Cupertino and Fluent themes. This customization is done using the SwitchSettings property within the VisualStateManager. Below is an example of how to implement these styles in XAML.

XAML

 <ContentPage.Resources>
     <ResourceDictionary>
         <Style x:Key="FluentStyle" TargetType="syncfusion:SfSwitch">
             <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>
         </Style>

         <Style x:Key="CupertinoStyle" TargetType="syncfusion:SfSwitch">
             <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>
         </Style>

     </ResourceDictionary>
 </ContentPage.Resources>

 <VerticalStackLayout
     x:Name="mainStack"
     VerticalOptions="Center"
     HorizontalOptions="Center"
     WidthRequest="350">
     ...
     <Grid Margin="0,10,10,10"
          HeightRequest="75">
         ...
         <syncfusion:SfSwitch
             Grid.Row="0"
             Grid.Column="0"
             AllowIndeterminateState="False"
             IsOn="True"/>
         <syncfusion:SfSwitch
             Grid.Row="0"
             Grid.Column="1"
             AllowIndeterminateState="False"
             IsOn="True"
             Style="{StaticResource CupertinoStyle}" />
         <syncfusion:SfSwitch
             Grid.Row="0"
             Grid.Column="2"
             AllowIndeterminateState="False"
             IsOn="True"
             Style="{StaticResource FluentStyle}" />
         ...
     </Grid>
 </VerticalStackLayout>

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.

Output

Download the complete sample from the GitHub

Conclusion

Hope you enjoyed learning how to customize the .NET MAUI Switch control’s visual.

Refer to our .NET MAUI Switch feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Switch documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Switch(SfSwitch) and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!