Introducing the New .NET MAUI Switch Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (180).NET Core  (28).NET MAUI  (224)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (41)Black Friday Deal  (1)Blazor  (234)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (199)File Formats  (72)Flutter  (135)JavaScript  (226)Microsoft  (121)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (960)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (162)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (10)Business intelligence  (55)Button  (4)C#  (163)Chart  (145)Chart of the week  (57)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (676)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (20)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (519)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (400)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (624)What's new  (337)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI Switch Control

Introducing the New .NET MAUI Switch Control

We’re thrilled to announce a new addition to Syncfusion’s Essential Studio 2023 Volume 4 release: a Switch control for the .NET MAUI 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:

Customizing the visual types

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.

Different Visual Types in .NET MAUI Switch Control
Different Visual Types in .NET MAUI Switch Control

Indeterminate state

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

Indeterminate State in .NET MAUI Switch Control
Indeterminate State in .NET MAUI Switch Control

Thumb and track customization

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.

Customizing the Thumb and Track in the .NET MAUI Switch Control
Customizing the Thumb and Track in the .NET MAUI Switch Control

Thumb icon customization

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.

Customizing the Thumb Icon in the .NET MAUI Switch Control
Customizing the Thumb Icon in the .NET MAUI Switch Control

RTL support

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

Right-to-Left Flow Direction Support in .NET MAUI Switch Control
Right-to-Left Flow Direction Support in .NET MAUI Switch Control

Note: For more details about features, refer to the .NET MAUI Switch control documentation.

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. This will serve as the foundation for integrating the Switch control.

Step 2: Syncfusion .NET MAUI controls are readily available on the 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 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:

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.

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.

<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!

Switch Control Integrated into a .NET MAUI App
Switch Control Integrated into a .NET MAUI App

GitHub reference

Check out the complete getting started example for the .NET MAUI Switch control on GitHub.

Conclusion

Thanks for reading! In this blog, we explored the features of the new Syncfusion .NET MAUI Switch control that rolled out in the 2023 Volume 4 release. You can learn more about the latest .NET MAUI advancements on our Release Notes and What’s New pages. Try them out and leave your feedback in the comments section below!

Download Essential Studio for .NET MAUI to start evaluating them immediately. If you have any questions or need further assistance, please don’t hesitate to contact us through our support forumsupport portal, or feedback portal. We are always happy to help you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed