Introducing the New .NET MAUI Switch Control

Jollen Moyani - Dec 28 '23 - - Dev Community

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();
     }
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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

<buttons:SfSwitch x:Name="switch" />
Enter fullscreen mode Exit fullscreen mode

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 forum, support portal, or feedback portal. We are always happy to help you!

Related blogs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .