Header Display Mode in .NET MAUI Tab View control (SfTabView)

21 May 20251 minute to read

By default, the .NET MAUI Tab View control displays the title of each Tab Item. It can be customized to display in any of the following modes:

  • Default
  • Image
  • Text

HeaderDisplayMode

The Tab View can be modified by setting the HeaderDisplayMode property of the .NET MAUI Tab View.

<tabView:SfTabView HeaderDisplayMode="Default">
    <tabView:SfTabItem Header="Item1" ImageSource="avatar1.png" />
    <tabView:SfTabItem Header="Item2" ImageSource="avatar2.png" />
    <tabView:SfTabItem Header="Item3" ImageSource="avatar3.png" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    HeaderDisplayMode = TabBarDisplayMode.Default
};
SfTabItem tabItem1 = new SfTabItem
{
    Header = "Item1",
    ImageSource = "avatar1.png"
};
SfTabItem tabItem2 = new SfTabItem
{
    Header = "Item2",
    ImageSource = "avatar2.png"
};
SfTabItem tabItem3 = new SfTabItem
{
    Header = "Item3",
    ImageSource = "avatar3.png"
};
tabView.Items.Add(tabItem1);
tabView.Items.Add(tabItem2);
tabView.Items.Add(tabItem3);

NOTE

The HeaderDisplayMode will only apply if both a Header and an ImageSource are provided for the Tab Item. If either is missing, the Tab Item will automatically apply the Default mode.