Selection in .NET MAUI SegmentedControl

The SegmentedControl exposes properties, which can help you work with the items selection.

Main Properties

• SelectedIndex(int): Specifies the index of the first item in the current selection or -1 if the selection is empty.
• SelectedItem(object): Defines the first item in the current selection, or null if the selection is empty.

Events

The SegmentedControl exposes a SelectionChanged event, which is fired when the selected item is programmatically changed or updated due to user interaction.

The SelectionChanged event handler receives two parameters:

• The sender argument, which is of type object, but can be cast to the RadSegmentedControl type.
• A ValueChangedEventArgs<int> object, which provides the old and new value of the SelectedIndex.

Style the currently selected item

You can define custom colors for the text and the background of the selected segment by using the SelectedSegmentBackgroundColor and SelectedSegmentTextColor properties of the SegmentedControl.

Example

The following example demonstrates how to use the selection feature of SegmentedControl.

1. Create a ViewModel with a SelectedItem property bound to the SelectedItem property of the SegmentedControl:

• C#

public class ViewModel : NotifyPropertyChangedBase
{
    private string selectedItem;

    public ViewModel()
    {
        this.Categories = new ObservableCollection<string>() { "Popular", "Library", "Playlists", "Friends" };
        this.SelectedItem = this.Categories[2];
    }

    public ObservableCollection<string> Categories { get; set; }

    public string SelectedItem
    {
        get { return this.selectedItem; }
        set { this.UpdateValue(ref this.selectedItem, value); }
    }
}

2. Add the SegmentedControl definition in XAML:

• XAML

<telerik:RadSegmentedControl x:Name="segmentControl"
                             ItemsSource="{Binding Categories}"
                             SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                             SelectionChanged="SelectionChanged"
                             HeightRequest="60"
                             VerticalOptions="Start" />

3. Set the BindingContext of the control:

• C#

this.segmentControl.BindingContext = new ViewModel();

4. Add the SegmentedControl SelectionChanged event:

• C#

private void SelectionChanged(object sender, ValueChangedEventArgs<int> e)
{
    this.selectionItemLabel.Text = $"The new selected item index is {e.NewValue}.";
}

The image below shows the end result on different platforms: