How-to-customize-the-tab-header-using-DataTemplateSelector-in-SfTabView

This article explains how to customize the tab header using DataTemplateSelector in the .NET MAUI Tab View. You can achieve this by defining multiple header DataTemplates and assigning a DataTemplateSelector to the HeaderItemTemplate of the SfTabView, which dynamically applies the appropriate header template based on the bound tab item’s properties at runtime.

Model

public class TabItemModel
{
    public string Title { get; set; } = string.Empty;
    public string ContentText { get; set; } = string.Empty;
    public bool IsFavourite { get; set; }
}

ViewModel

   public class TabItemViewModel
   {
       public ObservableCollection<TabItemModel> Tabs { get; }
   
       public TabItemViewModel()
       {
           Tabs = new ObservableCollection<TabItemModel>
           {
               new TabItemModel
               {
                   Title = "Home",
                   ContentText = "This is the Home tab content.",
                   IsFavourite = false
               },
               new TabItemModel
               {
                   Title = "Favorites",
                   ContentText = "These are your starred/important items.",
                   IsFavourite = true   
               },
               new TabItemModel
               {
                   Title = "Settings",
                   ContentText = "Configure the application here.",
                   IsFavourite = false
               }
           };
       }
   }

Class

public class TabContentTemplateSelector : DataTemplateSelector
{
   public DataTemplate? NormalContentTemplate { get; set; }
   public DataTemplate? FavouriteContentTemplate { get; set; }

   protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
   {
       if (item is TabItemModel model)
       {
           return model.IsFavourite
               ? FavouriteContentTemplate
               : NormalContentTemplate;
       }

       return NormalContentTemplate;
   }
}

XAML

<ContentPage.Resources>
         <!-- DataTemplateSelectors for Header -->
   <DataTemplate x:Key="NormalHeaderTemplate">
       <Label Text="{Binding Title}" WidthRequest="120" VerticalTextAlignment="Center"
              HorizontalTextAlignment="Center" TextColor="Gray" Margin="10" />
   </DataTemplate>

   <DataTemplate x:Key="FavouriteHeaderTemplate">
       <Label Text="{Binding Title}"  WidthRequest="120" Background="#E3F2FD"
                  FontAttributes="Bold" HorizontalTextAlignment="Center"
                  VerticalTextAlignment="Center" TextColor="#FFD700" />
   </DataTemplate>

   <local:TabHeaderTemplateSelector x:Key="TabHeaderTemplateSelector" 
                                   NormalTemplate="{StaticResource NormalHeaderTemplate}"
                                   FavouriteTemplate="{StaticResource FavouriteHeaderTemplate}" />

       <!-- DataTemplateSelectors for Content -->
   <DataTemplate x:Key="NormalContentTemplate">
       <StackLayout Padding="20">
           <Label Text="{Binding ContentText}" FontSize="16"
                  TextColor="Black" HorizontalTextAlignment="Center" />
       </StackLayout>
   </DataTemplate>

   <DataTemplate x:Key="FavouriteContentTemplate">
       <StackLayout Padding="20" BackgroundColor="#FFF8E1">
           <Label Text="{Binding ContentText}" FontSize="16"
                  FontAttributes="Bold" TextColor="#FFD700"
                  HorizontalTextAlignment="Center" />
       </StackLayout>
   </DataTemplate>

   <local:TabContentTemplateSelector x:Key="TabContentTemplateSelector"
                                     NormalContentTemplate="{StaticResource NormalContentTemplate}"
                                     FavouriteContentTemplate="{StaticResource FavouriteContentTemplate}" />

</ContentPage.Resources>

<ContentPage.BindingContext>
   <local:TabItemViewModel />
</ContentPage.BindingContext>

       <tabView:SfTabView ItemsSource="{Binding Tabs}"
           HeaderItemTemplate="{StaticResource TabHeaderTemplateSelector}"
           ContentItemTemplate="{StaticResource TabContentTemplateSelector}" />