Introducing the New .NET MAUI Switch Control
Tags: dotnetmaui, mobile, crossplatform, ui
Published: 2023-12-28 05:54:52

---
title: Introducing the New .NET MAUI Switch Control
published: true
date: 2023-12-20 09:14:12 UTC
tags: dotnetmaui, mobile, crossplatform, ui
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-switch-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbehitk68olnx9wjzw4e.png
---
We’re thrilled to announce a new addition to Syncfusion’s Essential Studio [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release: a [Switch control for the .NET MAUI](https://www.syncfusion.com/maui-controls/maui-switch ".NET MAUI Switch Control") platform. But it’s not just any switch; it’s a dynamic tool for customization!

This control allows you to set on and off states and even provides an optional indeterminate state. You can customize the track, thumb stroke, background, and corner edge radii to create a switch that embodies your brand. Also, with the visual state manager, you can tailor the appearance of the different visual states.

Let’s dive into the key features of the .NET MAUI Switch control and cover the steps to get started.

## Key features

The .NET MAUI Switch control supports many user-friendly features, including:

- [Customizable visual types](#Customization).
- [Indeterminate states](#Indeterminate).
- [Thumb and track customization](#Thumb).
- [Customizable path inside the thumb](#Icon).
- [RTL support](#RTL).

### <a name="Customization">Customizing the visual types</a>

The .NET MAUI Switch control allows you to render the control with themes like **Material, Cupertino,** and **Fluent** using a visual state manager that seamlessly allows you to customize the visual states and themes of the control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Different-Visual-Types-in-.NET-MAUI-Switch-Control.png" alt="Different Visual Types in .NET MAUI Switch Control" style="width:100%">

  <figcaption>Different Visual Types in .NET MAUI Switch Control</figcaption>

</figure>

### <a name="Indeterminate">Indeterminate state</a>

This feature allows you to represent a state of transition or ongoing process, providing users with a clear visual indication of pending actions.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Indeterminate-State-in-.NET-MAUI-Switch-Control.png" alt="Indeterminate State in .NET MAUI Switch Control" style="width:100%">

  <figcaption>Indeterminate State in .NET MAUI Switch Control</figcaption>

</figure>
### <a name="Thumb">Thumb and track customization</a>

The .NET MAUI Switch control provides customization options for the thumb and track. You can adjust their width and height with the **WidthRequest** and **HeightRequest** properties, respectively. Define the border using the **Stroke** and **StrokeThickness** properties, and set the background color through the **Background** property, all within the **SwitchSettings** class **_._**
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-the-Thumb-and-Track-in-the-.NET-MAUI-Switch-Control.png" alt="Customizing the Thumb and Track in the .NET MAUI Switch Control" style="width:100%">

  <figcaption>Customizing the Thumb and Track in the .NET MAUI Switch Control</figcaption>

</figure>

### <a name="Icon">Thumb icon customization</a>

You can customize the thumb icon within the Switch control by assigning a path to the icon and color through the **CustomPath** and **IconColor** properties, respectively, in the **SwitchSetting** class.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Customizing-the-Thumb-Icon-in-the-.NET-MAUI-Switch-Control.png" alt="Customizing the Thumb Icon in the .NET MAUI Switch Control" style="width:100%">

  <figcaption>Customizing the Thumb Icon in the .NET MAUI Switch Control</figcaption>

</figure>

### <a name="RTL">RTL support</a>

The .NET MAUI Switch supports changing the flow direction of the control from right to left (RTL).
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Right-to-Left-Flow-Direction-Support-in-.NET-MAUI-Switch-Control.png" alt="Right-to-Left Flow Direction Support in .NET MAUI Switch Control" style="width:100%">

  <figcaption>Right-to-Left Flow Direction Support in .NET MAUI Switch Control</figcaption>

</figure>

**Note:** For more details about features, refer to the [.NET MAUI Switch control documentation](https://help.syncfusion.com/maui/switch/overview "Getting started with the .NET MAUI Switch control").

## Getting started with the .NET MAUI Switch control

Now, let’s delve into how to integrate the Switch control into your .NET MAUI app and harness its features.

**Step 1** : Begin by creating [a .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Building your first .NET MAUI app"). This will serve as the foundation for integrating the Switch control.

**Step 2** : Syncfusion .NET MAUI controls are readily available on the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To incorporate the .NET MAUI Switch control into your project, launch the NuGet package manager in Visual Studio. Search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons "Syncfusion.Maui.Buttons NuGet package") and install it. This package contains the Switch control.

**Step 3** : Register the handler for the Syncfusion core in the **MauiProgram.cs** file. This is an essential step as it allows the app to recognize and utilize the Syncfusion controls. Here’s how you can do it:

```csharp
using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;
namespace SwitchSample
{
  public static class MauiProgram
  {
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
		.UseMauiApp<App>()
		.ConfigureSyncfusionCore()
		.ConfigureFonts(fonts =>
		{
	           fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		});
		return builder.Build();
	 }
  }
}
```

**Step 4** : Add the **Syncfusion.Maui.Buttons** namespace in your XAML page. This namespace contains the Switch control.

```xml
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
```

**Step 5** : Finally, initialize the Syncfusion .NET MAUI Switch control. Refer to the following code example.

```xml
<buttons:SfSwitch x:Name="switch" />
```

This will create a Switch control, as shown in the following image. Get ready to flip the switch to a more dynamic user interface!
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Switch-Control-Integrated-into-a-.NET-MAUI-App.png" alt="Switch Control Integrated into a .NET MAUI App" style="width:100%">

  <figcaption>Switch Control Integrated into a .NET MAUI App</figcaption>

</figure>

## GitHub reference

Check out the complete getting started example for the .NET MAUI Switch control on [GitHub](https://github.com/SyncfusionExamples/Getting-Started-with-.NET-MAUI-SfSwitch ".NET MAUI Switch control GitHub demo").

## Conclusion

Thanks for reading! In this blog, we explored the features of the new [Syncfusion .NET MAUI Switch](https://www.syncfusion.com/maui-controls/maui-switch ".NET MAUI Switch Control") control that rolled out in the [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release. You can learn more about the latest .NET MAUI advancements on our [Release Notes](https://www.syncfusion.com/products/release-history "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. Try them out and leave your feedback in the comments section below!

Download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Essential Studio for .NET MAUI License and Downloads page") to start evaluating them immediately. If you have any questions or need further assistance, please don’t hesitate to contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://www.syncfusion.com/identity/login "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to help you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-4.aspx "Blog: Syncfusion Essential Studio 2023 Volume 4 Is Here!")
- [Introducing the 10th Set of .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/dotnet-maui-2023-volume-4.aspx "Blog: Introducing the 10th Set of .NET MAUI Controls and Features")
- [Chart of the Week: Creating a .NET MAUI Candle Chart to Analysis Tesla’s (TSLA) Stock Prices](https://www.syncfusion.com/blogs/post/maui-candle-chart-tesla-stock.aspx "Blog: Chart of the Week: Creating a .NET MAUI Candle Chart to Analysis Tesla’s (TSLA) Stock Prices")
- [Chart of the Week: Creating a .NET MAUI Column Chart to Visualize Top Insurance Companies](https://www.syncfusion.com/blogs/post/dotnet-maui-column-chart-insurance.aspx "Blog: Chart of the Week: Creating a .NET MAUI Column Chart to Visualize Top Insurance Companies")