Changing HeaderText in TabView When Tab Item Is Selected
Environment
| Version | Product | Author |
|---|---|---|
| 11.1.0 | TabView for .NET MAUI | Dobrinka Yordanova |
Description
I need to change the HeaderText of the TabView items when they are selected. For example, when the "Home" tab is selected, its header should change to "Using Home". Similarly, when selecting "Function A", the header should change to "Applying Function A", and so on.
This knowledge base article also answers the following questions:
- How can I change the header text of TabView dynamically?
- How to update TabView
HeaderTextbased on selection in .NET MAUI? - How to use the
SelectionChangedevent in TabView to modifyHeaderText?
Solution
Use the SelectionChanged event of the TabView to dynamically update the header text based on the selected tab item.
1. Subscribe to the SelectionChanged event in the TabView.
<telerik:RadTabView x:Name="tabView"
SelectionChanged="TabView_SelectionChanged">
<telerik:TabViewItem HeaderText="Home"/>
<telerik:TabViewItem HeaderText="Function A"/>
<telerik:TabViewItem HeaderText="Function B"/>
<telerik:TabViewItem HeaderText="Function C"/>
</telerik:RadTabView>
2. Implement a method to update the HeaderText dynamically based on the selected index. Handle the SelectionChanged event in the code-behind.
private void TabView_SelectionChanged(object sender, EventArgs e)
{
var headers = new[] { "Home", "Function A", "Function B", "Function C" };
for (int i = 0; i < this.tabView.Items.Count; i++)
{
if (this.tabView.Items[i] is TabViewItem item)
{
item.HeaderText = headers[i];
}
}
int selectedIndex = this.tabView.SelectedIndex;
if (this.tabView.Items[selectedIndex] is TabViewItem selectedItem)
{
switch (selectedIndex)
{
case 0:
selectedItem.HeaderText = "Using Home";
break;
case 1:
selectedItem.HeaderText = "Applying Function A";
break;
case 2:
selectedItem.HeaderText = "Applying Function B";
break;
case 3:
selectedItem.HeaderText = "Applying Function C";
break;
}
}
}