Adding a Clear Button in TabView Header to Remove Tabs in .NET MAUI
Environment
| Product | TabView for .NET MAUI |
| Version | 7.1.0 |
Description
I want to add a clear button in the header of a tab. After clicking this button, the corresponding tab must be removed from the TabView.
This KB article also answers the following questions:
- How can I remove a tab from TabView in .NET MAUI using a button?
- Is it possible to modify the TabView header to include additional controls like a clear button?
- Can I dynamically remove tabs from the TabView component in a .NET MAUI app?
Solution
To add a clear button inside the tab header of the TabView for .NET MAUI, which allows the removal of the tab, modify the HeaderItemTemplate.
Below is an example demonstrating how to add a clear button to the tab header and handle its click event to remove the tab:
- Define the
HeaderItemTemplatefor the TabView in your XAML:
<telerik:RadTabView x:Name="tabView" AutomationId="tabView">
<telerik:RadTabView.HeaderItemTemplate>
<ControlTemplate>
<telerik:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
BorderColor="{TemplateBinding BorderColor}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding ContentPadding}">
<Grid BindingContext="{TemplateBinding}">
<ContentPresenter />
<Button Text="{x:Static telerik:TelerikFont.IconReset}"
Style="{StaticResource HeaderButtonStyle}"
HorizontalOptions="End"
Clicked="OnRemoveTabClicked" />
</Grid>
</telerik:RadBorder>
</ControlTemplate>
</telerik:RadTabView.HeaderItemTemplate>
<telerik:TabViewItem HeaderText="Home">
<Label Margin="10" Text="This is the content of the Home tab" />
</telerik:TabViewItem>
<telerik:TabViewItem HeaderText="Folder">
<Label Margin="10" Text="This is the content of the Folder tab" />
</telerik:TabViewItem>
<telerik:TabViewItem HeaderText="View">
<Label Margin="10" Text="This is the content of the View tab" />
</telerik:TabViewItem>
</telerik:RadTabView>
- Add a sample Style that targets the Button to your page's resources:
<Style x:Key="HeaderButtonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="{x:Static telerik:TelerikFont.Name}"/>
<Setter Property="TextColor" Value="Gray"/>
<Setter Property="FontAutoScalingEnabled" Value="True"/>
<Setter Property="WidthRequest" Value="20"/>
<Setter Property="HeightRequest" Value="20"/>
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter Property="BorderWidth" Value="0"/>
</Style>
- Implement the
OnRemoveTabClickedevent handler in the code-behind. This method will remove the tab associated with the clicked clear button:
private void OnRemoveTabClicked(object sender, EventArgs e)
{
if (sender is Button { BindingContext: TabViewHeaderItem headerItem })
{
var tab = tabView.Items.First(i => i.HeaderText == headerItem.Text);
if (tab != null)
{
tabView.Items.Remove(tab);
}
}
}
In this example, the BindingContext of the button is used to get the TabViewItem that the button belongs to as in the HeaderItemTemplate the BindingContext of the main Grid element is bound through a TemplateBinding. Then, the TabViewItem is removed from the Items collection of the TabView, effectively removing the tab from the UI.