How to add or remove tabs from Tab View in .NET MAUI(SfTabView)?

The .NET MAUI TabView control allows you to organize content into tabs, efficiently presenting the information. This article will guide you through the process of dynamically adding, removing, and inserting tabs within the TabView using buttons.

Step 1: Initializing TabView Control in XAML
The XAML code defines a grid layout to organize the components. Buttons are added to facilitate dynamic changes to the TabView. The TabView itself is configured with SfTabItems representing “Contacts,” “Calls,” and “Favorites,” each containing specific content.

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.1*"/>
        <RowDefinition Height="0.9*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button Text="Add TabItem" Grid.Column="0" x:Name="Additem" Clicked="Additem_Clicked"/>
        <Button Text="Remove TabItem" Grid.Column="1" x:Name="Removeitem" Clicked="Removeitem_Clicked"/>
        <Button Text="Insert TabItem" Grid.Column="2" x:Name="Insertitem" Clicked="Insertitem_Clicked"/>
    </Grid>
    <StackLayout Grid.Row="1">
        <tabView:SfTabView x:Name="tabView" VerticalOptions="FillAndExpand">
            <tabView:SfTabItem Header="Contacts">
                <tabView:SfTabItem.Content>
                    <ListView Margin="0,20,0,0" RowHeight="70" x:Name="listView" ItemsSource="{Binding ContactList}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <StackLayout Orientation="Vertical" Margin="30,0,0,0">
                                        <Label Text="{Binding Name}" FontSize="24" />
                                        <Label Text="{Binding Number}" FontSize="20" TextColor="LightSlateGray" />
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Header="Calls">
                <tabView:SfTabItem.Content>
                    <StackLayout BackgroundColor="LightGray"  x:Name="AllCallsGrid">
                    </StackLayout>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Header="Favorites">
                <tabView:SfTabItem.Content>
                    <Grid BackgroundColor="LightGreen"  x:Name="FavoritesGrid" />
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
        </tabView:SfTabView>
    </StackLayout>
</Grid>
 

Step 2: Adding a TabItem Dynamically
To dynamically add a new tab, a SfTabItem is created with a specified Header and content. This new tab is then added to the tabView.Items collection.

C#

private void Additem_Clicked(object sender, EventArgs e) 
{
    SfTabItem tabItem = new SfTabItem();
    tabItem.Header = "New Item Added";
    StackLayout stacklayout = new StackLayout();
    stacklayout.BackgroundColor = Colors.LightBlue;
    tabItem.Content = stacklayout;
    tabView.Items.Add(tabItem);
}

Step 3: Removing the last TabItem Dynamically
To dynamically remove the last tab, a check is performed to ensure tabs are present. If conditions are met, the last tab is removed from the tabView.Items collection.

C#

private void Removeitem_Clicked(object sender, EventArgs e) 
{
    if (model.IsSelected && tabView.Items.Count > 0) {
        var s = tabView.SelectedIndex;
        tabView.Items.RemoveAt((int)s);
    }
}

Step 4: Inserting a TabItem at a Specific Position
A new SfTabItem is created for a dynamic insertion with a specified Header and content. The new tab is then inserted at a specific position in the tabView.Items collection.

C#

private void Insertitem_Clicked(object sender, EventArgs e) 
{
    SfTabItem insertItem = new SfTabItem();
    insertItem.Header = "New Item Inserted";
    StackLayout stacklayout1 = new StackLayout();
    stacklayout1.BackgroundColor = Colors.PaleGreen;
    insertItem.Content = stacklayout1;
    if (tabView.Items.Count > 0)
        tabView.Items.Insert(1, insertItem);
    else
        tabView.Items.Insert(0, insertItem);
}

Output

Sample link GitHub

Conclusion
I hope you enjoyed learning how to add or remove tabs from Tab View in .NET MAUI.

You can refer to our .NET MAUI Tab View’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!