Introducing the .NET MAUI Segmented Control for Effortless Selection
Tags: dotnetmaui, mobile, whatsnew, desktop
Published: 2023-10-03 15:31:42

---
title: Introducing the .NET MAUI Segmented Control for Effortless Selection
published: true
date: 2023-09-28 12:37:15 UTC
tags: dotnetmaui, mobile, whatsnew, desktop
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-net-maui-segmented-control-for-effortless-selection.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbph86vk17fi10s34p10.png
---
We are thrilled to introduce the new [Syncfusion .NET MAUI Segmented Control](https://www.syncfusion.com/maui-controls/maui-segmented-control ".NET 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 "Essential Studio 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:

- [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.

### <a name="Populating">Populating segment items</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Populating-Items-in-.NET-MAUI-Segmented-Control.png" alt="Populating Items in .NET MAUI Segmented Control" style="width:100%">

  <figcaption>Populating Items in .NET MAUI Segmented Control</figcaption>

</figure>

### <a name="Selection">Selection indicator</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Fill-Type-Selection-Indicator-in-.NET-MAUI-Segmented-Control.png" alt="Fill Type Selection Indicator in .NET MAUI Segmented Control" style="width:100%">

  <figcaption>Fill Type Selection Indicator in .NET MAUI Segmented Control</figcaption>

</figure>
<figure>

  <img src="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" alt="Fill Type Selection Indicator with a Customized Corner Radius in the .NET MAUI Segmented Control" style="width:100%">

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

</figure>
Alternatively, the **Border** selection indicator outlines the selected segment with a distinct border.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Border-Type-Selection-Indicator-in-.NET-MAUI-Segmented-Control.png" alt="Border Type Selection Indicator in .NET MAUI Segmented Control" style="width:100%">

  <figcaption>Border Type Selection Indicator in .NET MAUI Segmented Control</figcaption>

</figure>
The **Top Border** indicator places a border at the top of the selected segment.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Top-Border-Type-Selection-Indicator-in-.NET-MAUI-Segmented-Control.png" alt="Top Border Type Selection Indicator in .NET MAUI Segmented Control" style="width:100%">

  <figcaption>Top Border Type Selection Indicator in .NET MAUI Segmented Control</figcaption>

</figure>
The **Bottom border** indicator places a border at the bottom of the selected segment.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Bottom-Border-Type-Selection-Indicator-in-.NET-MAUI-Segmented-Control.png" alt="Bottom Border Type Selection Indicator in .NET MAUI Segmented Control" style="width:100%">

  <figcaption>Bottom Border Type Selection Indicator in .NET MAUI Segmented Control</figcaption>

</figure>
### <a name="Disabled">Disable segment items</a>

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Disabled-Segments-in-.NET-MAUI-Segmented-Control.png" alt="Disabled Segments in .NET MAUI Segmented Control" style="width:100%">

  <figcaption>Disabled Segments in .NET MAUI Segmented Control</figcaption>

</figure>
### <a name="Scrolling">Scrolling</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Scrolling-Feature-in-.NET-MAUI-Segmented-Control.gif" alt="Scrolling Feature in .NET MAUI Segmented Control" style="width:100%">

  <figcaption>Scrolling Feature in .NET MAUI Segmented Control</figcaption>

</figure>
### <a name="Right">Right-to-left layout</a>

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.
<figure>

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

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

</figure>
### <a name="Appearance">Appearance customization</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Appearance-Customization-in-.NET-MAUI-Segmented-Control.png" alt="Appearance Customization in .NET MAUI Segmented Control" style="width:100%">

  <figcaption>Appearance Customization in .NET MAUI Segmented Control</figcaption>

</figure>
**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").

## 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 "Build your first .NET MAUI app") in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio").

### Step 2: Add the required NuGet package

Syncfusion .NET MAUI components are available in the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). 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 "Syncfusion.Maui.Buttons NuGet package"), and then install it.

### Step 3: Register the handler

[Syncfusion.Maui.Core](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.html "Syncfusion.Maui.Core Namespace") 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**

```csharp
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 "ItemsSource property of .NET MAUI Segmented Control") property of [SfSegmentedControl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentedControl.html "SfSegmentedControl class of .NET MAUI") to populate the segmented items.

Refer to the following code example.

**MainPage.xaml**

```xml
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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Integrating-the-Segmented-Control-in-a-.NET-MAUI-App-1.png" alt="Integrating the Segmented Control in a .NET MAUI App" style="width:100%">

  <figcaption>Integrating the Segmented Control in a .NET MAUI App</figcaption>

</figure>

## GitHub reference

Refer to the [.NET MAUI Segmented Control demo on GitHub](https://github.com/SyncfusionExamples/net-maui-segmented-control-examples/tree/master/GettingStarted ".NET MAUI Segmented Control GitHub demo") 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 ".NET 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 "Essential Studio 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](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 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 "Essential Studio License and Downloads page"). If you are not a customer yet, try our 30-day [free trial](https://www.syncfusion.com/blogs/post/new-winui-shimmer-control.aspx "Get free evaluation of the Essential Studio products") to check out these new features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"). 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 "Blog: Syncfusion Essential Studio 2023 Volume 3 Is Here!")
- [Introducing the new .NET MAUI Button Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-button-control.aspx "Blog: Introducing the new .NET MAUI Button Control")
- [Introducing the New .NET MAUI CheckBox Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-checkbox-control.aspx "Blog: Introducing the New .NET MAUI CheckBox Control")
- [Introducing the New .NET MAUI Radio Button Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-radio-button.aspx "Blog: Introducing the New .NET MAUI Radio Button Control")