Header display mode in .NET MAUI Tab View control (SfTabView)

By default, the .NET MAUI Tab View control displays the title of each Tab Item. It can be changed to any of the following types:

  • Default
  • Image
  • Text

Image for HeaderDisplayMode

The Tab View can be changed by setting the HeaderDisplayMode property of .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 the Header or ImageSource is missing, the Tab Item will automatically apply the Default mode.