Migrate from Xamarin.Forms to .NET MAUI Segmented Control

18 Mar 202412 minutes to read

To make the migration from the Xamarin SfSegmented Control to the .NET MAUI SfSegmented Control easier, most of the APIs from the Xamarin SfSegmented Control were kept in the .NET MAUI SfSegmented Control. However, to maintain the consistency of API naming in the .NET MAUI SfSegmented Control, some of the APIs have been renamed. Please find the difference in the following topics.

Namespaces

Xamarin SfSegmented control	.NET MAUI SfSegmented control
Syncfusion.Xamarin.Buttons	Syncfusion.Maui.Buttons

Initialize Control

To initialize the control, import the segmented control namespace and initialize the SfSegmentedControl as shown in the following code sample.

Xamarin SfSegmented control .NET MAUI SfSegmented control

Xamarin SfSegmented control	.NET MAUI SfSegmented control
XAML C# `<ContentPage ... xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"> <buttons:SfSegmentedControl x:Name="segmentedControl"/> </ContentPage>` `using Syncfusion.XForms.Buttons; ... SfSegmentedControl segmentedControl = new SfSegmentedControl(); this.Content = segmentedControl;`	XAML C# `<ContentPage ... xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"> <buttons:SfSegmentedControl x:Name="segmentedControl"/> </ContentPage>` `using Syncfusion.Maui.Buttons; … SfSegmentedControl segmentedControl = new SfSegmentedControl(); this.Content = segmentedControl;`

XAML
C#
<ContentPage 
...
xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms">
     <buttons:SfSegmentedControl x:Name="segmentedControl"/>
</ContentPage>
using Syncfusion.XForms.Buttons;
...

SfSegmentedControl segmentedControl = new SfSegmentedControl();
this.Content = segmentedControl;

XAML
C#
<ContentPage 
...
xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
    <buttons:SfSegmentedControl x:Name="segmentedControl"/>
</ContentPage>
using Syncfusion.Maui.Buttons;
…

SfSegmentedControl segmentedControl = new SfSegmentedControl();
this.Content = segmentedControl;

Classes

Xamarin SfSegmented control	.NET MAUI SfSegmented control	Description
SfSegmentedControl	SfSegmentedControl	The SegmentedControl allows users explore and switch among different views. It provides a simple way to choose from a linear set of two or more segments, each of which functions as a mutually exclusive button.
SfSegmentItem	SfSegmentItem	Represents a single element in SfSegmentedControl control. It contains the properties to configure title and content region.
SelectionIndicatorSettings	SelectionIndicatorSettings	Provides a set of properties to customize the selection indicator in the SfSegmentedControl control.
Nil	SegmentTextStyle	Gets or sets properties which allows to customize the segment item text style of the SfSegmentedControl.

Properties

SfSegmentedControl

XAML
C#
ViewModel.cs
<ContentPage   
    xmlns:local="clr-namespace:SfSegmentSample"
    xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <buttons:SfSegmentedControl x:Name="segmentedControl"
                                    SelectedIndex="1"
                                    VisibleSegmentsCount="4"
                                    ItemsSource="{Binding SegmentItems}">
    </buttons:SfSegmentedControl>
</ContentPage>
using Syncfusion.Maui.Buttons;
. . .

ViewModel viewModel = new ViewModel();
SfSegmentedControl segmentedControl = new SfSegmentedControl();
segmentedControl.SelectedIndex = 1;
segmentedControl.VisibleSegmentsCount = 4;
segmentedControl.ItemsSource = viewModel.SegmentItems;
this.Content = segmentedControl;
public class ViewModel
{
    private List<SfSegmentItem> segmentItems;

    public ViewModel()
    {
        segmentItems = new List<SfSegmentItem>()
        {
                new SfSegmentItem() {Text="Day"},
                new SfSegmentItem() {Text="Week"},
                new SfSegmentItem() {Text="Month"},
                new SfSegmentItem() {Text="Year"},
        };
    }

    public List<SfSegmentItem> SegmentItems
    {
        get { return segmentItems; }
        set { segmentItems = value; }
    }
}

Xamarin SfSegmented control	.NET MAUI SfSegmented control	Description
ItemsSource	ItemsSource	Gets or sets a collection used to generate the SfSegmentItem in the SfSegmentedControl.
SelectedIndex	SelectedIndex	Gets or sets the index of the currently selected item in the SfSegmentedControl.
SegmentHeight	SegmentHeight	Gets or sets the height of the segments in the SfSegmentedControl.
SegmentWidth	SegmentWidth	Gets or sets the width of the segments in the SfSegmentedControl.
VisibleSegmentsCount	VisibleSegmentsCount	Gets or sets the number of visible segments to be displayed in the SfSegmentedControl.
SelectionIndicatorSettings	SelectionIndicatorSettings	Gets or sets the settings for the segment selection indicator, which is used to highlight the selected item in the SfSegmentedControl.
DisabledTextColor	DisabledSegmentTextColor	Gets or sets the text color of the disabled segment items in the SfSegmentedControl.
Nil	DisabledSegmentBackground	Gets or sets the background brush of the disabled segment items in the SfSegmentedControl.
FontColor	TextStyle	Gets or sets the style of segment item text, that used to customize the text color, font, font size, font family and font attributes.
SegmentBackgroundColor	SegmentBackground	Gets or sets the background brush for the segments in the SfSegmentedControl.
BorderColor	Stroke	Gets or sets the stroke brush for the segments in the SfSegmentedControl.
BorderThickness	StrokeThickness	Gets or sets the thickness of the segment stroke in the SfSegmentedControl.
CornerRadius	CornerRadius	Gets or sets the corner radius for the border of the SfSegmentedControl.
SegmentCornerRadius	SegmentCornerRadius	Gets or sets the segment corner radius for the segment items of the SfSegmentedControl.
AutoScrollSelectedItem	AutoScrollToSelectedSegment	Gets or sets a value indicating whether to enable auto-scrolling when the selected index is changed in the SfSegmentedControl.
Nil	SegmentTemplate	Gets or sets the data template to use for customizing the appearance of individual segments in the SfSegmentedControl.
Nil	ShowSeparator	Gets or sets a value indicating whether to show separators between segments in the SfSegmentedControl.

SfSegmentItem

Xamarin SfSegmented control	.NET MAUI SfSegmented control	Description
BackgroundColor	Background	Gets or sets the background color of the segment item.
Nil	Width	Gets or sets the width of the segment item.
IconFont	ImageSource	Gets or sets the image displayed in the segment item.
SelectionTextColor	SelectedSegmentTextColorhttps://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfSegmentItem.html#Syncfusion_Maui_Buttons_SfSegmentItem_SelectedSegmentTextColor	Gets or sets the text color of the segment item when it is selected.
SelectionBackgroundColor	SelectedSegmentBackground	Gets or sets the background color of the segment item when it is selected.
FontColor	TextStyle	Gets or sets the text style of the segment item.
FontIconFontSize	ImageSize	Gets or sets the image size of the segment item.
IsEnabled	IsEnabled	Gets or sets a value indicating whether the segment item is enabled.
Text	Text	Gets or sets the text of the segment item.

SelectionIndicatorSettings

XAML
C#
ViewModel.cs
<ContentPage   
    xmlns:local="clr-namespace:SfSegmentSample"
    xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <buttons:SfSegmentedControl x:Name="segmentedControl"
                                ItemsSource="{Binding SegmentItems}">
        <buttons:SfSegmentedControl.SelectionIndicatorSettings>
            <buttons:SelectionIndicatorSettings SelectionIndicatorPlacement="Border" 
                                                        Background="#6200EE"/>
        </buttons:SfSegmentedControl.SelectionIndicatorSettings>
    </buttons:SfSegmentedControl>
</ContentPage>
using Syncfusion.Maui.Buttons;
. . .

ViewModel viewModel = new ViewModel();
SfSegmentedControl segmentedControl = new SfSegmentedControl();
segmentedControl.ItemsSource = viewModel.SegmentItems;
segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() 
{
    SelectionIndicatorPlacement = SelectionIndicatorPlacement.Border,
    Background = Colors.Transparent,
};
this.Content = segmentedControl;
public class ViewModel
{
    private List<SfSegmentItem> segmentItems;

    public ViewModel()
    {
        segmentItems = new List<SfSegmentItem>()
        {
                new SfSegmentItem() {Text="Day"},
                new SfSegmentItem() {Text="Week"},
                new SfSegmentItem() {Text="Month"},
                new SfSegmentItem() {Text="Year"},
        };
    }

    public List<SfSegmentItem> SegmentItems
    {
        get { return segmentItems; }
        set { segmentItems = value; }
    }
}

Xamarin SfSegmented control	.NET MAUI SfSegmented control	Description
Color	Background	Gets or sets the background brush for the selection indicator in the SfSegmentedControl.
Nil	TextColor	Gets or sets the text color for the selection indicator in the SfSegmentedControl.
Nil	Stroke	Gets or sets the stroke color for the selection indicator in the SfSegmentedControl.
Position	SelectionIndicatorPlacement	Gets or sets the selection mode for the selection indicator in the SfSegmentedControl.
BorderThickness	StrokeThickness	Gets or sets the stroke thickness for the selection indicator in the SfSegmentedControl.

SegmentTextStyle

The FontColor, FontSize, FontFamily, and FontAttributes properties of the SfSegmentedControl is grouped to SegmentTextStyle.

XAML
C#
ViewModel.cs
<ContentPage   
    xmlns:local="clr-namespace:SfSegmentSample"
    xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons">
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <buttons:SfSegmentedControl x:Name="segmentedControl"
                                ItemsSource="{Binding SegmentItems}">
    <buttons:SfSegmentedControl.TextStyle>
        <buttons:SegmentTextStyle FontSize="14" FontFamily="Roboto" />
    </buttons:SfSegmentedControl.TextStyle>
    </buttons:SfSegmentedControl>
</ContentPage>
using Syncfusion.Maui.Buttons;
. . .

ViewModel viewModel = new ViewModel();
SfSegmentedControl segmentedControl = new SfSegmentedControl();
segmentedControl.ItemsSource = viewModel.SegmentItems;
segmentedControl.TextStyle = new SegmentTextStyle()
{
    FontSize = 14,
    FontFamily = "Roboto",
};
this.Content = segmentedControl;
public class ViewModel
{
    private List<SfSegmentItem> segmentItems;

    public ViewModel()
    {
        segmentItems = new List<SfSegmentItem>()
        {
                new SfSegmentItem() {Text="Day"},
                new SfSegmentItem() {Text="Week"},
                new SfSegmentItem() {Text="Month"},
                new SfSegmentItem() {Text="Year"},
        };
    }

    public List<SfSegmentItem> SegmentItems
    {
        get { return segmentItems; }
        set { segmentItems = value; }
    }
}

Xamarin SfSegmented control	.NET MAUI SfSegmented control	Description
FontColor	TextColor	Gets or sets the text color for the SfSegmentedControl.
FontSize	FontSize	Gets or sets the double value that represents the font size of the SfSegmentedControl.
FontFamily	FontFamily	Gets or sets the string, that represents font family of the SfSegmentedControl.
FontAttributes	FontAttributes	Gets or sets the FontAttributes of the SfSegmentedControl.

Enum

Xamarin SfSegmented control	.NET MAUI SfSegmented control	Description
SelectionIndicatorPosition	SelectionIndicatorPlacement	Describes the possible values for the position of the selection strip in SfSegmentedControl View.

Event

Xamarin SfSegmented control	.NET MAUI SfSegmented control	Description
SelectionChanged	SelectionChanged	Occurs when the selection within the segment item is changed.

Methods

Xamarin SfSegmented control	.NET MAUI SfSegmented control	Description
ScrollTo	ScrollTo	Method to scroll the scroll viewer to the specified index.
Nil	SetSegmentEnabled	Sets the enabled state of a specific segment at the specified index.

Upcoming features

Multi selection for segment items.