Customize the Tab Bar in .NET MAUI Tab View (SfTabView)

Tab Width options

The .NET MAUI Tab View provides two modes that determines how the width of the tab is calculated on the tab bar while it gets populated. The options are Default and SizeToContent and can be achieved using the TabWidthMode property.

Fixed bar

The width of the tab is divided equally based on the available control width. This enables a fixed tab bar that will not allow tab scrolling even it contains any number of tabs. This can be achieved by setting the TabWidthMode as Default.

NOTE

This mode is recommended when the tab count is not more than four. More tabs in this mode may appear with the text being trimmed.

<tabView:SfTabView TabWidthMode="Default">
tabView.TabWidthMode = TabWidthMode.Default;

Tab Width Mode Default

Based on the text size

The width of a tab is set to fit the text or image that it contains by setting the TabWidthMode as SizeToContent. Scroll is enabled in this mode to access the items that are outside the visible area.

<tabView:SfTabView TabWidthMode="SizeToContent">
tabView.TabWidthMode = TabWidthMode.SizeToContent;

Tab Width Mode Size to fit

Customize the tab bar height

The height of the tab bar can be customized by setting the TabBarHeight property. The default height is 48.

NOTE

It is recommended to set the TabBarHeight as 72 while displaying the image and text with ImagePosition as either top or bottom.

<tabView:SfTabView TabBarHeight="100">
tabView.TabBarHeight = 100;

Customize the tab header text alignment

The horizontal text alignment of the tab header can be customized by setting the HeaderHorizontalTextAlignment property. The default value is Center. This property accepts the following values:

  • Start - The text will be placed at the starting position in the header tab.
  • Center - The text will be placed at the center of the header tab.
  • End - The text will be placed at the end of the header tab.
<tabView:SfTabView HeaderHorizontalTextAlignment="Center">
tabView.HeaderHorizontalTextAlignment = TextAlignment.Center;

Tab header text alignment

Tab bar placement options

The .NET MAUI Tab View provides two options for determining how the tab bar aligns relative to the tab content. The options are top and bottom. This can be done using the TabBarPlacement property.

Top

Tab bar will be placed above the content region of the Tab View control.

<tabView:SfTabView TabBarPlacement="Top">
tabView.TabBarPlacement = TabBarPlacement.Top;

Tab Bar Placement Top

Bottom

Tab bar will be placed below the content region of the Tab View control.

<tabView:SfTabView TabBarPlacement="Bottom">
tabView.TabBarPlacement = TabBarPlacement.Bottom;

Tab Bar Placement Bottom

Tab Bar background customization

The tab bar background can be customized using the TabBarBackground property, which is of type Brush.

Solid Color

A solid color can be achieved by assigning the SolidColorBrush to the TabBarBackground, which represents the color of the tab bar background.

<tabView:SfTabView TabBarBackground="LightBlue">
tabView.TabBarBackground = Colors.LightBlue;

Tab Bar Solid Color Bottom

Gradient Color

The background can be customized with a linear gradient and radial gradient as like below example.

<tabView:SfTabView>
        <tabView:SfTabView.TabBarBackground>
            <LinearGradientBrush EndPoint="0,1">
                <GradientStop Color="#009FFF" Offset="0.1" />
                <GradientStop Color="#ec2F4B Offset="1.0" />
            </LinearGradientBrush>
        </tabView:SfTabView.TabBarBackground>
    </tabView:SfTabView>
Microsoft.Maui.Controls.GradientStop gra1 = new Microsoft.Maui.Controls.GradientStop()
{
    Color = Color.FromArgb("#009FFF"),
    Offset = (float)0.1,
};

Microsoft.Maui.Controls.GradientStop gra2 = new Microsoft.Maui.Controls.GradientStop()
{
    Color = Color.FromArgb("#ec2F4B"),
    Offset = (float)1.0,
};

LinearGradientBrush graBrush = new LinearGradientBrush()
{
    EndPoint = new Point(0, 1),
    GradientStops = new GradientStopCollection() { gra1, gra2 }
};

SfTabView tabView = new SfTabView();
tabView.TabBarBackground = graBrush;

Tab Bar Gradient Color Bottom

NOTE

View sample in GitHub