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

30 Jul 20264 minutes to read

By default, the .NET MAUI Tab View control displays the title of each Tab Item. The header can be customized to display in any of the following modes defined by the TabBarDisplayMode enum:

  • Default - Displays the title of each Tab Item. The tab header is rendered using the standard styling.
  • Image - Displays the ImageSource of each Tab Item instead of the header text.
  • Text - Displays only the header text of each Tab Item, even if an ImageSource is set.

HeaderDisplayMode in Default mode showing the title of each Tab Item

You can configure the Tab View by setting the HeaderDisplayMode property of type TabBarDisplayMode on the Tab View control.

Prerequisites

Before using the SfTabView, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.TabView

For step-by-step setup, refer to the Getting Started documentation.

Default

The Default mode renders the header title for each Tab Item. If both a Header and an ImageSource are provided, the default styling is applied.

<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,
    Items = new TabItemCollection
    {
        new SfTabItem { Header = "Item1", ImageSource = "avatar1.png" },
        new SfTabItem { Header = "Item2", ImageSource = "avatar2.png" },
        new SfTabItem { Header = "Item3", ImageSource = "avatar3.png" }
    }
};

Image

The Image mode displays the ImageSource of each Tab Item. You must set an ImageSource on every Tab Item; otherwise the header will not render.

<tabView:SfTabView HeaderDisplayMode="Image">
    <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.Image,
    Items = new TabItemCollection
    {
        new SfTabItem { Header = "Item1", ImageSource = "avatar1.png" },
        new SfTabItem { Header = "Item2", ImageSource = "avatar2.png" },
        new SfTabItem { Header = "Item3", ImageSource = "avatar3.png" }
    }
};

Text

The Text mode displays only the header text of each Tab Item, even if an ImageSource is set.

<tabView:SfTabView HeaderDisplayMode="Text">
    <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.Text,
    Items = new TabItemCollection
    {
        new SfTabItem { Header = "Item1", ImageSource = "avatar1.png" },
        new SfTabItem { Header = "Item2", ImageSource = "avatar2.png" },
        new SfTabItem { Header = "Item3", ImageSource = "avatar3.png" }
    }
};

See also