Introducing the .NET MAUI Segmented Control for Effortless Selection
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (206)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (214)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (132)JavaScript  (220)Microsoft  (118)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (911)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (158)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (130)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (624)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (6)Gantt  (18)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  (504)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (386)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (588)What's new  (329)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the .NET MAUI Segmented Control for Effortless Selection

Introducing the .NET MAUI Segmented Control for Effortless Selection

We are thrilled to introduce the new Syncfusion .NET MAUI Segmented Control as part of our 2023 Volume 3 release.

This innovative control offers a seamless selection experience by presenting several options through distinct buttons. These buttons are neatly arranged in a line and can feature text, an icon, or a blend of both.

Let’s see the key features of the new .NET MAUI Segmented Control and the steps to get started with it.

Key features

The .NET MAUI Segmented Control provides support for the following key features:

Let’s take a closer look at these features.

Populating segment items

The Segmented Control offers a variety of options for populating segment items. It provides the flexibility to:

  • Use text-only segments for straightforward labeling.
  • Incorporate icons as intuitive visual cues.
  • Combine text and icons to create visually engaging and user-friendly content.

This versatility enhances both the user experience and the aesthetic appeal of your application.

Populating Items in .NET MAUI Segmented Control
Populating Items in .NET MAUI Segmented Control

Selection indicator

The .NET MAUI Segmented Control supports four distinct selection indicators to significantly improve the user interface:

  • Fill
  • Border
  • Top border
  • Bottom border

For instance, the Fill selection indicator visually highlights the selected segment by filling it with a contrasting color. This makes the selected item highly noticeable and the selection process more intuitive and visually appealing.

Fill Type Selection Indicator in .NET MAUI Segmented Control
Fill Type Selection Indicator in .NET MAUI Segmented Control
Fill Type Selection Indicator with a Customized Corner Radius in the .NET MAUI Segmented Control
Fill Type Selection Indicator with a Customized Corner Radius in the .NET MAUI Segmented Control

Alternatively, the Border selection indicator outlines the selected segment with a distinct border.

Border Type Selection Indicator in .NET MAUI Segmented Control
Border Type Selection Indicator in .NET MAUI Segmented Control

The Top Border indicator places a border at the top of the selected segment.

Top Border Type Selection Indicator in .NET MAUI Segmented Control
Top Border Type Selection Indicator in .NET MAUI Segmented Control

The Bottom border indicator places a border at the bottom of the selected segment.

Bottom Border Type Selection Indicator in .NET MAUI Segmented Control
Bottom Border Type Selection Indicator in .NET MAUI Segmented Control

Disable segment items

You can easily disable interaction and selection for certain segmented items to control user selections or restrict access as needed.

Disabled Segments in .NET MAUI Segmented Control
Disabled Segments in .NET MAUI Segmented Control

Scrolling

You can adjust the size and number of visible segments according to your needs.

For example, you can change the width of individual segments, which helps highlight specific segments or accommodate varying text lengths due to space limitations.

The Segmented Control can be configured to display a certain number of segments within the available width, and you can scroll to view the additional segments.

Scrolling Feature in .NET MAUI Segmented Control
Scrolling Feature in .NET MAUI Segmented Control

The .NET MAUI Segmented Control also supports right-to-left (RTL) flow direction. This feature is useful in apps that use languages and cultures that read and write text from right to left, such as Arabic, Hebrew, and Persian.

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

Appearance customization

You can customize the .NET MAUI Segmented Control’s appearance with a wide range of design options to modify its visual appeal and the user experience.

You can customize its design by changing text color, border color, border thickness, and corner radius, and even use data templates.

Appearance Customization in .NET MAUI Segmented Control
Appearance Customization in .NET MAUI Segmented Control

Note: For more details, refer to the .NET MAUI Segmented Control documentation.

Getting started with .NET MAUI Segmented Control

We have seen the vivid features of the .NET MAUI Segmented Control. Let’s see how to add the control to your .NET MAUI app.

Step 1: Create a .NET MAUI project

First, create a new .NET MAUI app in Visual Studio.

Step 2: Add the required NuGet package

Syncfusion .NET MAUI components are available in the NuGet Gallery. To add the SfSegmentedControl to your project, open the NuGet Package Manager in Visual Studio and search for Syncfusion.Maui.Buttons, and then install it.

Step 3: Register the handler

Syncfusion.Maui.Core is the required NuGet package for all Syncfusion .NET MAUI controls. So, we have to register the handler for Syncfusion Core in the MauiProgram.cs file.

Refer to the following code.

MauiProgram.cs

using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
   public static MauiApp CreateMauiApp()
   {
	var builder = MauiApp.CreateBuilder();
	builder.ConfigureSyncfusionCore();
        builder.ConfigureSyncfusionCore();
    }
}

Step 4: Initialize the .NET MAUI Segmented Control

Import the control namespace Syncfusion.Maui.Buttons in your XAML or C# code and initialize the SfSegmentedControl.

You can use the ItemsSource property of SfSegmentedControl to populate the segmented items.

Refer to the following code example.

MainPage.xaml

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

<buttons:SfSegmentedControl x:Name="segmentedControl">
   <buttons:SfSegmentedControl.ItemsSource>
      <x:Array Type="{x:Type x:String}">
         <x:String>Day</x:String>
         <x:String>Week</x:String>
         <x:String>Month</x:String>
         <x:String>Year</x:String>
       </x:Array>
    </buttons:SfSegmentedControl.ItemsSource>
</buttons:SfSegmentedControl>

After executing the previous code examples, we’ll get the output shown in the following image.

Integrating the Segmented Control in a .NET MAUI App
Integrating the Segmented Control in a .NET MAUI App

GitHub reference

Refer to the .NET MAUI Segmented Control demo on GitHub to dive deeper into the control and its features.

Conclusion

Thanks for reading! In this blog, we explored the features of the new .NET MAUI Segmented Control available in our 2023 Volume 3 release. With this control, you can offer a seamless selection experience by presenting a spectrum of options through distinct buttons.

Also, visit our Release Notes and What’s New pages to discover this release’s other exciting updates. Try them out and leave your feedback in the comments section below.

For current Syncfusion customers, the newest version of Essential Studio is available from the license and downloads page. If you are not a customer yet, try our 30-day free trial to check out these new features.

You can also contact us through our support forumsfeedback portal, or support portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

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