Dealing with selection changed in Xamarin Segmented Control

11 Aug 20225 minutes to read

The selection changed event occurs when there is a change from one segment item to another in the segmented control. It can be handled by two ways.

User interface

When users navigate from one item to another, selection is changed, so that the SelectedIndex value is updated to the new index of the item. The segmented control provides the SelectionChanged event, which is triggered when the selection is changed with the SelectionChangedEventArgs.

Index - Gets the current index value of the selected item.

XAML

<buttons:SfSegmentedControl x:Name = "segmentedControl" SelectionChanged="Handle_SelectionChanged"/>

C#

segmentedControl.SelectionChanged += Handle_SelectionChanged;
void Handle_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
       segmentedControl.BorderColor = UIColor.Red;
    }

Selected Index through programmatically.

Users can set the default value programmatically for the selection to be placed. The selection is updated based on the index value given for the SelectedIndex.

XAML

<buttons:SfSegmentedControl SelectedIndex="2"/>

C#

segmentedControl.SelectedIndex = 2;

Event to command

The SegmentedControl event can be converted into commands using Behaviors. To achieve this, create a command in the ViewModel class and use Behaviors to associate it to the SegmentedControl event.

XAML

<buttons:SfSegmentedControl 
            x:Name="Segment" 
            SelectionTextColor= "White"
            HeightRequest="80"
            VisibleSegmentsCount="5"
            Color="Transparent" 
            BorderColor="#929292"
            SelectedIndex="0" 
            FontColor="#929292"
            BackgroundColor="Transparent"
            ItemsSource="{Binding ItemCollection,Mode=TwoWay}">
    <buttons:SfSegmentedControl.Behaviors>
        <local:EventToCommandBehavior Command="{Binding SelectionChangedCommand}" EventName="SelectionChanged"/>
    </buttons:SfSegmentedControl.Behaviors>
    </buttons:SfSegmentedControl>

C#

public class ViewModel
    {
    public Command SelectionChangedCommand
    {
        get;
        set;
    }
    public ViewModel()
    {
        SelectionChangedCommand = new Command<Syncfusion.XForms.Buttons.SelectionChangedEventArgs>(SelectionChanged);
        ItemCollection = new ObservableCollection<SfSegmentItem>
                    {
                        new SfSegmentItem() {  Text = "Once"},
                        new SfSegmentItem() {  Text = "Daily"},
                        new SfSegmentItem() {  Text = "Weekly"},
                        new SfSegmentItem() {  Text = "Monthly"},
                        new SfSegmentItem() {  Text = "Yearly"},
                    };
    }

    private void SelectionChanged(Syncfusion.XForms.Buttons.SelectionChangedEventArgs obj)
    {
        Application.Current.MainPage.DisplayAlert("Notification", "The Selected Index: " + obj.Index, "Ok");
    }

    private ObservableCollection<SfSegmentItem> itemCollection = new ObservableCollection<SfSegmentItem>();

    public ObservableCollection<SfSegmentItem> ItemCollection
    {
        get { return itemCollection; }
        set { itemCollection = value; }
    }
    }

Download the entire source code from GitHub here.

For more information about the event to command behavior in Xamarin.Forms, please refer to this link.