How to Customize the Header of the Selected Tab in .NET MAUI TabView?

This article explains how to customize the selected tab header in the .NET MAUI TabView when using the ItemsSource property. The VisualStateManager is designed to work directly with TabItem but does not integrate seamlessly with the ItemsSource-based tab binding. To achieve the desired customization of the selected tab header, the SelectionChanged event can be leveraged, by utilizing the EventToCommandBehavior.

To dynamically change the text color of the selected tab header, follow these steps:

Model

public class Model: INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged(string? propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }

    private string? name;
    public string? Name
    {
        get { return name; }
        set { name = value; OnPropertyChanged("Name"); }
    }

    private Color? textColor;
    public Color? TextColor
    {
        get { return textColor; }
        set { textColor = value; OnPropertyChanged("TextColor"); }
    }
}

ViewModel

In your ViewModel, you will need to define the properties and commands to handle the selection change:

public class MainPageViewModel: INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private ObservableCollection<Model> tabItems;
    public ObservableCollection<Model> TabItems
    {
        get { return tabItems; }
        set { tabItems = value; OnPropertyChanged("TabItems"); }
    }

    private Command<object> selectionChangedCommand;
    public Command<object> SelectionChangedCommand
    {
        get { return selectionChangedCommand; }
        set { selectionChangedCommand = value; OnPropertyChanged("SelectionChangedCommand"); }
    }

    public MainPageViewModel()
    {
        TabItems = new ObservableCollection<Model>
        {
            new Model() { Name = "Alexandar", TextColor = Colors.Red },
            new Model() { Name = "Gabriella", TextColor = Colors.Black }
            // Add more items as needed
        };

        SelectionChangedCommand = new Command<object>(ExecuteSelectionChangedCommand);
    }

    public void ExecuteSelectionChangedCommand(object obj)
    {
        if (obj is SfTabView tabItem)
        {
            if (TabItems != null)
            {
                // Ensure the selected index is within the valid range
                if (tabItem.SelectedIndex >= 0 && tabItem.SelectedIndex < TabItems.Count)
                {
                    for (int i = 0; i < TabItems.Count; i++)
                    {
                        // Set TextColor for selected tab to red, others to black
                        TabItems[i].TextColor = (i == (int)tabItem.SelectedIndex) ? Colors.Red : Colors.Black;
                    }
                }
            }
        }
    }
}

Explanation

1. TextColor Property: A TextColor property is defined within the Model class to allow dynamic updates to the text color of the tab headers.
2. SelectionChangedCommand: This command is bound to the SelectionChanged event of the .NET MAUI TabView. When the selection changes, the command is executed with the .NET MAUI TabView instance as the command parameter.
3. ExecuteSelectionChangedCommand Method: This method resets the text color for all tab items to the default color (black) and updates the text color of the currently selected tab to red.

XAML

<tabView:SfTabView x:Name="tabView" ItemsSource="{Binding TabItems}" TabWidthMode="SizeToContent" TabHeaderPadding="0">
    <tabView:SfTabView.Behaviors>
        <toolkit:EventToCommandBehavior Command="{Binding SelectionChangedCommand}" CommandParameter="{x:Reference tabView}" EventName="SelectionChanged"/>
    </tabView:SfTabView.Behaviors>
    <tabView:SfTabView.HeaderItemTemplate>
        <DataTemplate >
            <Label x:Name="headerlabel" VerticalOptions="Center" Text="{Binding Name}" 
            TextColor="{Binding TextColor}"/>
        </DataTemplate>
    </tabView:SfTabView.HeaderItemTemplate>
    <tabView:SfTabView.ContentItemTemplate>
        <DataTemplate>
            <Grid HorizontalOptions="Center" VerticalOptions="Center">
                <Label x:Name="contentLabel" Text="{Binding Name}" HorizontalOptions="Center" VerticalOptions="Center"/>
            </Grid>
        </DataTemplate>
    </tabView:SfTabView.ContentItemTemplate>
</tabView:SfTabView>

By following these steps, you can effectively customize the selected tab header in a .NET MAUI TabView when using ItemsSource binding.

Output

Download the complete sample from the GitHub

Conclusion

I hope you enjoyed learning how to Customize the Header of the Selected Tab in .NET MAUI TabView.

You can refer to our .NET MAUI Tab View feature tour page to know about its other groundbreaking feature representations and documentation , and how to quickly get started for configuration specifications. You can also explore our .NET MAUI TabView example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Download 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!