How to Select a Tab Item Programmatically?

22 Jul 20263 minutes to read

Prerequisites

Before using the SfTabView, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.TabView

For step-by-step setup, refer to the Getting Started documentation.

Overview

This section explains how to programmatically select a tab item and how to detect or act on the currently selected tab item in the .NET MAUI Tab View (SfTabView) control:

  • Use the SelectedIndex property to select a tab item programmatically (for example, in response to a button click or app navigation).
  • Use the IsSelected property on an SfTabItem, in combination with the SelectionChanged event, to check whether a specific tab item is the currently selected one and to perform actions based on that state.

Programmatically select the tab item

You can use the SelectedIndex property of SfTabView to programmatically select a tab item. The value is zero-based and must be less than the number of items in the Items collection; setting it to -1 clears the selection.

<tabView:SfTabView x:Name="tabView" SelectedIndex="2">
    <tabView:SfTabItem Header="Item1" />
    <tabView:SfTabItem Header="Item2" />
    <tabView:SfTabItem Header="Item3" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView()
{
    SelectedIndex = 2,
    Items =
    {
        new SfTabItem { Header = "Item1", ImageSource = "avatar1.png" },
        new SfTabItem { Header = "Item2", ImageSource = "avatar2.png" },
        new SfTabItem { Header = "Item3", ImageSource = "avatar3.png" }
    }
};

SelectedIndex in SfTabView

Perform an action when a tab is selected using the IsSelected property

The IsSelected property on SfTabItem indicates whether the tab item is the currently active one. Use this property inside the SelectionChanged event handler to identify the newly selected tab item and perform actions based on that state, as shown in the code snippet below.

<tabView:SfTabView x:Name="tabView" SelectionChanged="Index_Changed">
    <tabView:SfTabItem x:Name="tab1" Header="Item1" />
    <tabView:SfTabItem x:Name="tab2" Header="Item2" />
    <tabView:SfTabItem x:Name="tab3" Header="Item3" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView()
{
    Items =
    {
        new SfTabItem { Header = "Item1", ImageSource = "avatar1.png" },
        new SfTabItem { Header = "Item2", ImageSource = "avatar2.png" },
        new SfTabItem { Header = "Item3", ImageSource = "avatar3.png" }
    }
};
tabView.SelectionChanged += Index_Changed;
private void Index_Changed(object sender, TabSelectionChangedEventArgs e)
{
    // Identify the newly selected tab item using the new index from the event args.
    var selectedItem = e.NewIndex;
}

IsSelected TabItem

See also