How to display a close button on tabs in .NET MAUI TabView?

This article explains how to display a close button on each tab header in the .NET MAUI Tab View and remove tabs dynamically when the button is clicked. You can achieve this by customizing the HeaderItemTemplate of the SfTabView to include a close button, and when the button is clicked, the corresponding tab is removed from the Tab View.

Model

public class Model
{
    public string Title { get; set; }
    public string ContentText { get; set; }
}

ViewModel

public class MainPageViewModel
{
    public ObservableCollection<Model> TabItems { get; set; }
    public MainPageViewModel()
    {
        TabItems = new ObservableCollection<Model>
        {
           new Model
            {
                Title = "Home",
                ContentText = "Welcome to the Home tab. Here you can find an overview of your application and quick access to essential features."
            },
            new Model
            {
                Title = "Tasks",
                ContentText = "Manage your tasks efficiently. Add new tasks, track progress, and stay organized to meet your goals."
            },
            new Model
            {
                Title = "Reports",
                ContentText = "View detailed reports and analytics. Gain insights into your performance and make informed decisions."
            }
        };
    }

}

XAML

   <ContentPage.Resources>
    <Style x:Key="CloseIconButtonStyle" TargetType="core:SfEffectsView">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <Setter.Value>
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">

                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Transparent" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="PointerOver">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#E6E6E6" />
                            </VisualState.Setters>
                        </VisualState>

                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter.Value>
        </Setter>
    </Style>
</ContentPage.Resources>


<tabView:SfTabView ItemsSource="{Binding TabItems}"
               IndicatorPlacement="Fill">

    <tabView:SfTabView.HeaderItemTemplate>
        <DataTemplate>
            <Grid Padding="8,4" ColumnSpacing="8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Label Grid.Column="0" WidthRequest="90"
                   Text="{Binding Title}" HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" />

                <core:SfEffectsView Grid.Column="1" Style="{StaticResource CloseIconButtonStyle}" HorizontalOptions="End" VerticalOptions="Center" 
                WidthRequest="22" HeightRequest="22" >

                    <core:SfEffectsView.GestureRecognizers>
                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                    </core:SfEffectsView.GestureRecognizers>
                    <core:SfEffectsView.Content>
                        <Grid>
                            <Label Text="✕" FontSize="14"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="Black"/>
                        </Grid>
                    </core:SfEffectsView.Content>
                </core:SfEffectsView>
            </Grid>
        </DataTemplate>
    </tabView:SfTabView.HeaderItemTemplate>

       <!--ContentItemTemplate-->

   </tabView:SfTabView>

</ContentPage>

C#

private readonly MainPageViewModel viewModel = new MainPageViewModel();
public MainPage()
{
    InitializeComponent();
    BindingContext = viewModel;
}

private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
{
    var model = (sender as View)?.BindingContext as Model;
    if (model != null && viewModel.TabItems.Contains(model))
    {
        viewModel.TabItems.Remove(model);
    }
}

Output:

You can download the complete sample from GitHub.

Conclusion

Hope you enjoyed learning how to display a close button on tabs in .NET MAUI TabView.

Refer to our .NET MAUI Tab View 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, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
​
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!