New to Telerik UI for .NET MAUI? Start a free 30-day trial

Migrating the SegmentedControl after 14.0.0 Version

Updated on May 13, 2026

In the Telerik UI for .NET MAUI 14.0.0 release, the RadSegmentedControl was rebuilt from the ground up. The control keeps its name and core purpose—display a list of horizontally aligned, mutually exclusive options—but exposes a new API surface, extended styling options, and additional features such as full data binding, selection modes, item templates, size modes, and per-segment commands.

This article lists the differences between the previous RadSegmentedControl (versions before 14.0.0) and the new RadSegmentedControl (versions 14.0.0 and later) so you can update existing applications.

Items and Data Binding

The previous SegmentedControl populated its items only through ItemsSource and rendered each item as text by calling ToString() on the bound object. The new control also supports the ItemsSource property but adds full data binding through DisplayMemberPath, ItemTemplate, and DataTemplateSelector (assigned to ItemTemplate).

SegmentedControl before 14.0.0	SegmentedControl with 14.0.0 and above
`ItemsSource` (string or primitive collection rendered as `ToString()`)	`ItemsSource` (any collection of business objects)
-	`DisplayMemberPath`—path to the property of the business object that is rendered as text
-	`ItemTemplate` (`DataTemplate`)—custom content for each segment
-	`ItemTemplate` (`DataTemplateSelector`)—per-item template selection

SegmentedControl before 14.0.0:

XAML

<telerik:RadSegmentedControl>
    <telerik:RadSegmentedControl.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Popular</x:String>
            <x:String>Library</x:String>
            <x:String>Playlists</x:String>
            <x:String>Friends</x:String>
        </x:Array>
    </telerik:RadSegmentedControl.ItemsSource>
</telerik:RadSegmentedControl>

SegmentedControl with 14.0.0 and above:

An array of strings:

XAML

<telerik:RadSegmentedControl>
    <telerik:RadSegmentedControl.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Popular</x:String>
            <x:String>Library</x:String>
            <x:String>Playlists</x:String>
            <x:String>Friends</x:String>
        </x:Array>
    </telerik:RadSegmentedControl.ItemsSource>
</telerik:RadSegmentedControl>

A collection of business objects through DisplayMemberPath and ItemsSource properties:

XAML

<telerik:RadSegmentedControl ItemsSource="{Binding FileCategories}"
                             DisplayMemberPath="Category" />

With a custom ItemTemplate:

XAML

<telerik:RadSegmentedControl ItemsSource="{Binding FileCategories}">
    <telerik:RadSegmentedControl.ItemTemplate>
        <DataTemplate>
            <VerticalStackLayout Spacing="10">
                <Label Text="{Binding Icon}"
                       FontFamily="TelerikFontExamples" />
                <Label Text="{Binding Category}"
                       FontSize="10" />
            </VerticalStackLayout>
        </DataTemplate>
    </telerik:RadSegmentedControl.ItemTemplate>
</telerik:RadSegmentedControl>

For more details, see the Data Binding article.

Selection

The previous SegmentedControl always operated in single-selection mode. The new SegmentedControl exposes a SelectionMode property and supports two-way binding for both SelectedIndex and SelectedItem.

SegmentedControl before 14.0.0	SegmentedControl with 14.0.0 and above
`SelectedIndex` (`int`)	`SelectedIndex` (`int`)
`SelectedItem` (`object`)	`SelectedItem` (`object`)
-	`SelectionMode` (`SegmentedControlSelectionMode`): `None`, `Single`, `SingleDeselect`
`SelectionChanged` event with `ValueChangedEventArgs<int>`	`SelectionChanged` event with `RadSelectionChangedEventArgs`

XAML

<telerik:RadSegmentedControl ItemsSource="{Binding Categories}"
                             SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                             SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
                             SelectionMode="SingleDeselect"
                             SelectionChanged="OnSelectionChanged" />

For more details, see the Selection article.

Item Tapped

The new SegmentedControl raises an ItemTapped event and exposes an ItemTappedCommand. They are fired regardless of the current selection, which allows you to react to taps even when the user taps an already-selected segment.

SegmentedControl before 14.0.0	SegmentedControl with 14.0.0 and above
-	`ItemTapped` event
-	`ItemTappedCommand` (`ICommand`)

For more details, see the Item Tapped article.

Disabled Segments

There isn't any change in the API for disabling segments. The new SegmentedControl still provides the SetSegmentEnabled(int index, bool isEnabled) and IsSegmentEnabled(int index) methods to disable segments and check their state.

SegmentedControl before 14.0.0	SegmentedControl with 14.0.0 and above
`SetSegmentEnabled(int index, bool isEnabled)` method	`SetSegmentEnabled(int index, bool isEnabled)` method
`IsSegmentEnabled(int index)` method	`IsSegmentEnabled(int index)` method

this.segmentControl.SetSegmentEnabled(2, false);

For more details, see the Disabled Segments article.

Size Mode

The new SegmentedControl introduces a SizeMode property at the item view level that defines how each segment sizes itself within the control. The control's version before 14.0.0 did not provide a dedicated sizing API.

SegmentedControl before 14.0.0	SegmentedControl with 14.0.0 and above
-	`RadSegmentedControlItemView.SizeMode` (`SegmentedControlSizeMode`): `Star`, `Auto`, `Fixed`

Setting the size mode for all segments through ItemViewStyle:

XAML

<telerik:RadSegmentedControl.ItemViewStyle>
    <Style TargetType="telerik:RadSegmentedControlItemView">
        <Setter Property="SizeMode" Value="Auto" />
    </Style>
</telerik:RadSegmentedControl.ItemViewStyle>

For more details, see the Size Mode article.

Styling

The styling pipeline has been completely redesigned. The previous version exposed a small set of color properties directly on the control. Now the SegmentedControl inherits from RadBorder for the surrounding frame and uses dedicated Style properties that target the new visual elements—RadSegmentedControlItemView, the selection indicator, and the separator.

Control-Level Properties

The previous color properties on the control are replaced by Style properties and by the appearance properties of the RadBorder base type.

SegmentedControl before 14.0.0	SegmentedControl with 14.0.0 and above
`SegmentBackgroundColor`	`ItemViewStyle` → `BackgroundColor` setter
`SegmentTextColor`	`ItemViewStyle` → `TextColor` setter
`SelectedSegmentBackgroundColor`	`SelectionIndicatorStyle` → `BackgroundColor` setter
`SelectedSegmentTextColor`	`ItemViewStyle` → `SelectedTextColor` setter
`DisabledSegmentTextColor`	`ItemViewStyle` (visual states for the disabled state)
-	`BorderColor`, `BackgroundColor`, `BorderThickness`, `CornerRadius`, `Padding` (inherited from `RadBorder`)
-	`ItemViewStyle` (`Style` with `TargetType="telerik:RadSegmentedControlItemView"`)
-	`ItemViewStyleSelector` (`IStyleSelector`)
-	`SelectionIndicatorStyle` (`Style` with `TargetType="telerik:RadBorder"`)
-	`SeparatorStyle` (`Style` with `TargetType="telerik:RadBorder"`)

Item View Properties

The RadSegmentedControlItemView element exposes a rich set of bindable properties that were not available before 14.0.0 version:

TextColor, SelectedTextColor
BackgroundColor, BorderColor, BorderThickness, CornerRadius, Padding
FontSize, FontFamily, FontAttributes
HorizontalTextAlignment, VerticalTextAlignment
SizeMode

Migrating the Styling Setup

SegmentedControl before 14.0.0

XAML

<telerik:RadSegmentedControl SegmentBackgroundColor="#0D8660C5"
                             SegmentTextColor="#8660C5"
                             SelectedSegmentBackgroundColor="#8660C5"
                             SelectedSegmentTextColor="White"
                             DisabledSegmentTextColor="Gray" />

SegmentedControl with 14.0.0 and above

XAML

<ContentView.Resources>
    <Style x:Key="SegmentItemView" TargetType="telerik:RadSegmentedControlItemView">
        <Setter Property="TextColor" Value="#8660C5" />
        <Setter Property="SelectedTextColor" Value="White" />
        <Setter Property="BackgroundColor" Value="#0D8660C5" />
        <Setter Property="FontAttributes" Value="Bold" />
    </Style>
    <Style x:Key="SelectedSegmentIndicatorStyle" TargetType="telerik:RadBorder">
        <Setter Property="BackgroundColor" Value="#8660C5" />
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="Padding" Value="2" />
    </Style>
    <Style x:Key="SegmentSeparatorStyle" TargetType="telerik:RadBorder">
        <Setter Property="WidthRequest" Value="2" />
        <Setter Property="BackgroundColor" Value="Gray" />
        <Setter Property="Margin" Value="2" />
    </Style>
</ContentView.Resources>

<telerik:RadSegmentedControl ItemViewStyle="{StaticResource SegmentItemView}"
                             SelectionIndicatorStyle="{StaticResource SelectedSegmentIndicatorStyle}"
                             SeparatorStyle="{StaticResource SegmentSeparatorStyle}"
                             BorderColor="#8660C5"
                             BackgroundColor="#0D8660C5"
                             CornerRadius="20" />

For per-item styling, the control supports an ItemViewStyleSelector of type IStyleSelector, which has no equivalent in the previous version.

For more details, see the Styling article.

Additional Features with 14.0.0 and Above

The SegmentedControl also adds the following capabilities that did not exist in the previous version:

Right-to-left support—The control mirrors its layout when FlowDirection is set to RightToLeft.
Keyboard navigation—Users can move between segments and change the selection through the keyboard on platforms that support it.
Visual states—The new item view participates in the .NET MAUI VisualStateManager, which allows full control of the appearance for the normal, selected, disabled, and focused states.

API Differences Summary

The following table summarizes the API differences between the previous and the new SegmentedControl:

Area	SegmentedControl before 14.0.0	SegmentedControl with 14.0.0 and above
Base type	`View`	`RadBorder`
Items	`ItemsSource` only	`ItemsSource`, `DisplayMemberPath`, `ItemTemplate`, `DataTemplateSelector`
Selection	`SelectedIndex`, `SelectedItem`, `SelectionChanged`	`SelectedIndex`, `SelectedItem`, `SelectionMode`, `SelectionChanged`
Tapping	-	`ItemTapped`, `ItemTappedCommand`
Disable item	`DisabledSegmentTextColor` only	`SetSegmentEnabled`, `IsSegmentEnabled`
Sizing	-	`RadSegmentedControlItemView.SizeMode` (`Star`, `Auto`, `Fixed`)
Styling	`SegmentBackgroundColor`, `SegmentTextColor`, `SelectedSegmentBackgroundColor`, `SelectedSegmentTextColor`, `DisabledSegmentTextColor`	`ItemViewStyle`, `ItemViewStyleSelector`, `SelectionIndicatorStyle`, `SeparatorStyle`, plus `RadBorder` appearance properties
RTL	-	Supported through `FlowDirection`
Keyboard	-	Supported