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

21 Nov 20244 minutes to read

Placement options

The .NET MAUI Tab View provides three options for determining how selection indicator aligns relative to the tab header item. The options are top, bottom, and fill. This can be done 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, which represents the color of the selection indicator background.

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 sample in GitHub

Indicator Width Mode

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;

Indicator’s corner radius

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;

Indicator’s Stroke Thickness

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;