Customize the Selection Indicator in .NET MAUI Tab View (SfTabView)

21 May 20254 minutes to read

Placement options

The .NET MAUI Tab View provides three options for determining how the selection indicator aligns relative to the tab header item. These options are top, bottom, and fill. This can be configured by setting the IndicatorPlacement property of SfTabView.

Top

The indicator will be placed at the top of the selected tab.

XAML

<tabView:SfTabView IndicatorPlacement="Top">

C#

tabView.IndicatorPlacement = IndicatorPlacement.Top;

Bottom

The indicator will be placed at the bottom of the selected tab.

XAML

<tabView:SfTabView IndicatorPlacement="Bottom">

C#

tabView.IndicatorPlacement = IndicatorPlacement.Bottom;

Fill

The indicator will fill the selected tab.

XAML

<tabView:SfTabView IndicatorPlacement="Fill">

C#

tabView.IndicatorPlacement = IndicatorPlacement.Fill;

Background customization

The background of the indicator can be customized using the IndicatorBackground property of SfTabView.

Solid color

The SolidColorBrush class defines the color property of IndicatorBackground, representing the selection indicator background’s color.

XAML

<tabView:SfTabView IndicatorBackground="LightBlue">

C#

tabView.TabBarBackground = Color.LightBlue;

Gradient color

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

XAML

<tabView:SfTabView>
        <tabView:SfTabView.IndicatorBackground>
            <LinearGradientBrush EndPoint="0,1">
                <GradientStop Color="#009FFF" Offset="0.1" />
                <GradientStop Color="#ec2F4B Offset="1.0" />
            </LinearGradientBrush>
        </tabView:SfTabView.IndicatorBackground>
    </tabView:SfTabView>

C#

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.IndicatorBackground = graBrush;

NOTE

View the complete sample on GitHub.

IndicatorWidthMode

The IndicatorWidthMode property allows customization of the width of the indicator. By default, the IndicatorWidthMode property is set to Fit, which adjusts the indicator width to fit the content of the header item. You can change the width size based on the header item by setting the IndicatorWidthMode property to Stretch.

XAML

<tabView:SfTabView IndicatorWidthMode="Fit">

C#

tabView.IndicatorWidthMode = IndicatorWidthMode.Fit;

XAML

<tabView:SfTabView IndicatorWidthMode="Stretch">

C#

tabView.IndicatorWidthMode = IndicatorWidthMode.Stretch;

IndicatorCornerRadius

You can customize the corner radius of the selection indicator using the IndicatorCornerRadius property in the Tab View.

XAML

<tabView:SfTabView IndicatorCornerRadius ="5">

C#

tabView.IndicatorCornerRadius  = 5;

IndicatorStrokeThickness

You can customize the stroke thickness of the selection indicator using the IndicatorStrokeThickness property in the Tab View.

XAML

<tabView:SfTabView IndicatorStrokeThickness ="7">
    </tabView:SfTabView>

C#

tabView.IndicatorStrokeThickness  = 7;