---
title: "Introducing the .NET MAUI Segmented Control for Effortless Selection"
published_at: "2023-09-28T12:37:15+00:00"
modified_at: "2026-02-10T13:18:04+00:00"
url: "https://www.syncfusion.com/blogs/post/dotnet-maui-segmented-control"
excerpt: "This blog explores the features of the new .NET MAUI Segmented Control that rolled out in the 2023 Volume 3 release and the steps to get started."
taxonomy_category:
  - ".NET MAUI"
  - "Desktop"
  - "Mobile"
  - "Syncfusion"
  - "What's new"
taxonomy_post_tag:
  - ".NET MAUI"
  - "desktop"
  - "MAUI"
  - "Mobile"
  - "What's New"
---

# Introducing the .NET MAUI Segmented Control for Effortless Selection

[Jeyasri Murugan](https://www.syncfusion.com/blogs/author/jeyasrim)

![Introducing the .NET MAUI Segmented Control for Effortless Selection](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Introducing-the-.NET-MAUI-Segmented-Control-for-Effortless-Selection.png)


We are thrilled to introduce the new [Syncfusion .NET MAUI Segmented Control](https://www.syncfusion.com/maui-controls/maui-segmented-control)
 as part of our [2023 Volume 3](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download)
 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:

- [Populating segment items](#Populating)
- [Selection indicator](#Selection)
- [Disabled segment items](#Disabled)
- [Scrolling](#Scrolling)
- [Right-to-left layout](#Right)
- [Appearance customization](#Appearance)

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Populating-Items-in-.NET-MAUI-Segmented-Control.png)

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Fill-Type-Selection-Indicator-in-.NET-MAUI-Segmented-Control.png)

Fill Type Selection Indicator in .NET MAUI Segmented Control

![Fill Type Selection Indicator with a Customized Corner Radius in the .NET MAUI Segmented Control](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Fill-Type-Selection-Indicator-with-a-Customized-Corner-Radius-in-the-.NET-MAUI-Segmented-Control.png)

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Border-Type-Selection-Indicator-in-.NET-MAUI-Segmented-Control.png)

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Top-Border-Type-Selection-Indicator-in-.NET-MAUI-Segmented-Control.png)

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Bottom-Border-Type-Selection-Indicator-in-.NET-MAUI-Segmented-Control.png)

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Disabled-Segments-in-.NET-MAUI-Segmented-Control.png)

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Scrolling-Feature-in-.NET-MAUI-Segmented-Control.gif)

Scrolling Feature in .NET MAUI Segmented Control

### Right-to-left layout

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Right-to-Left-Flow-Direction-Support-in-.NET-MAUI-Segmented-Control.png)

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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Appearance-Customization-in-.NET-MAUI-Segmented-Control.png)

Appearance Customization in .NET MAUI Segmented Control

**Note:** For more details, refer to the [.NET MAUI Segmented Control documentation](https://help.syncfusion.com/maui/segmented-control/getting-started)
.

## 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](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?tabs=vswin&pivots=devices-android)
 in [Visual Studio](https://visualstudio.microsoft.com/)
.

### Step 2: Add the required NuGet package

Syncfusion .NET MAUI components are available in the [NuGet Gallery](https://www.nuget.org/)
. To add the **SfSegmentedControl** to your project, open the ** NuGet Package Manager** in Visual Studio and search for [Syncfusion.Maui.Buttons](https://www.nuget.org/packages/Syncfusion.Maui.Buttons)
, and then install it.

### Step 3: Register the handler

[Syncfusion.Maui.Core](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.html)
 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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html#Syncfusion_Maui_Buttons_SfSegmentedControl_ItemsSource)
 property of [SfSegmentedControl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html)
 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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Integrating-the-Segmented-Control-in-a-.NET-MAUI-App-1.png)

Integrating the Segmented Control in a .NET MAUI App

## GitHub reference

Refer to the [.NET MAUI Segmented Control demo on GitHub](https://github.com/SyncfusionExamples/net-maui-segmented-control-examples/tree/master/GettingStarted)
 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](https://www.syncfusion.com/maui-controls/maui-segmented-control)
 available in our [2023 Volume 3](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download)
 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](https://www.syncfusion.com/products/release-history)
 and [What’s New](https://www.syncfusion.com/products/whatsnew)
 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](https://www.syncfusion.com/account/downloads)
. If you are not a customer yet, try our 30-day [free trial](https://www.syncfusion.com/blogs/post/new-winui-shimmer-control.aspx)
 to check out these new features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums)
, [feedback portal](https://www.syncfusion.com/feedback)
, or [support portal](https://support.syncfusion.com/)
. We are always happy to assist you!

## Related Blogs

- [Syncfusion Essential Studio® 2023 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2023-volume-3.aspx)
- [Introducing the new .NET MAUI Button Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-button-control.aspx)
- [Introducing the New .NET MAUI CheckBox Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-checkbox-control.aspx)
- [Introducing the New .NET MAUI Radio Button Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-radio-button.aspx)
