Configure the Appearance of Tab Item in .NET MAUI Tab View (SfTabView)

17 Oct 202515 minutes to read

A tab item consists of various elements that can be customized in the .NET MAUI Tab View.

Adding image in tab item

The header holds the text of the tab item displayed in the tab bar.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        Header = "ITEM 1",
    }
}

Header

ImageSource

The image to be displayed in the tab bar representing the tab item.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" ImageSource="alexandar"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        Header = "ITEM 1",
        ImageSource = "alexandar",
    }
}

ImageSource

Content

The assigned view will get displayed in the main area of the Tab View.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 2">
        <tabView:SfTabItem.Content>
            <ListView>
                ...
            </ListView>
        </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
</tabView>
var tabView = new SfTabView();
    var tabItems = new TabItemCollection
    {
        new SfTabItem()
        {
            Header = "ITEM 2",
            Content = new ListView()
            {
                /// code
            }
        }
    }

Content

ImagePosition options

The .NET MAUI Tab View provides four options determining how the image of the tab aligns relative to the text. The options are left, top, right and bottom. These can be achieved using the ImagePosition property of SfTabItem.

NOTE

Each tab item can have different image positions. The Visual State Manager can be used to apply the same value to all tabs.

Top

The image will be placed above the text vertically.

<tabView:SfTabView>
     <tabView:SfTabItem ImagePosition="Top"/>
 </tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        ImagePosition = TabImagePosition.Top,
    }
}

ImagePosition top

Bottom

The image will be placed below the text vertically.

<tabView:SfTabView>
    <tabView:SfTabItem ImagePosition="Bottom"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        ImagePosition = TabImagePosition.Bottom,
    }
}

ImagePosition bottom

Left

The image will be placed before the text, horizontally.

<tabView:SfTabView>
    <tabView:SfTabItem ImagePosition="Left">
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        ImagePosition = TabImagePosition.Left,
    }
}

ImagePosition left

The image will be placed to the right side of the text, horizontally.

<tabView:SfTabView>
    <tabView:SfTabItem ImagePosition="Right">
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        ImagePosition = TabImagePosition.Right,
    }
}

ImagePosition right

ImageTextSpacing

The ImageTextSpacing property in SfTabItem allows spacing between the image and the text of the tab item.

<tabView:SfTabView>
    <tabView:SfTabItem ImageTextSpacing="20"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        ImageTextSpacing = "20",
    }
}

ImageTextSpacing

TextColor customization

The text color of the tab item displayed in the tab bar.

<tabView:SfTabView>
    <tabView:SfTabItem TextColor="Blue"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        TextColor = Color.Blue,
    }
}

TextColor

Font customization

This type of customization involves changes to some font elements.

FontFamily

Font family of the tab item text displayed in the tab bar.

<tabView:SfTabView>
    <tabView:SfTabItem FontFamily="OpenSansRegular"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        FontFamily = "OpenSansRegular",
    }
}

FontFamily

FontAttribute

The font style of the text of each tab item in the tab bar.

<tabView:SfTabView>
    <tabView:SfTabItem FontAttributes="Bold"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        FontAttributes = FontAttributes.Bold,
    }
}

FontAttribute

FontSize

The size of the text of each tab item in the tab bar.

<tabView:SfTabView>
    <tabView:SfTabItem FontSize="32"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        FontSize = 32,
    }
}

FontSize

Badge support

In SfTabItem, badges notify users of new or unread messages, notifications, or the status of something.

BadgeText

By using the BadgeText property in the SfTabItem, you can add text to badge view.

<tabView:SfTabView>
    <tabView:SfTabItem BadgeText="20"/>
</tabView:SfTabView>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        BadgeText = "20",
    }
}

BadgeSettings

The BadgeSettings property helps customize the basic look and feel of the badge view in the SfTabItem.

It contains the sub-elements such as badge types, positions, and colors. You can customize the background color, text color, border color, width, offset, and font attributes.

NOTE

To customize the badge beyond predefined styles, set Type property to None in the BadgeSettings.

<ContentPage
    . . .  
    xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView  
    xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core">
    <tabView:SfTabView>
        <tabView:SfTabItem Header="RECENTS" BadgeText="20">
            <tabView:SfTabItem.BadgeSettings >
                <core:BadgeSettings FontSize="15" 
                                    FontAttributes="Bold" 
                                    FontFamily="serif"/>
            </tabView:SfTabItem.BadgeSettings>
        </tabView:SfTabItem>
    </tabView:SfTabView>    
</ContentPage>
using Syncfusion.Maui.Core;
using Syncfusion.Maui.TabView;
...

var tabView = new SfTabView();
BadgeSettings badgeSetting = new BadgeSettings();
badgeSetting.FontAttributes = FontAttributes.Bold;
badgeSetting.FontSize = 15;
badgeSetting.FontFamily = "serif";

var tabItems = new TabItemCollection()
{
    new SfTabItem()
    {
        Header="TabItem",
        BadgeText = "Inbox",
        BadgeSettings = badgeSetting,
    }
};

tabView.Items = tabItems;

BadgeSupport

NOTE

View sample in GitHub.

TabHeaderPadding

The TabHeaderPadding property in SfTabView allows for adding padding to the tab header.

NOTE

The TabHeaderPadding property is only applicable when TabWidthMode is set to SizeToContent.

<tabView:SfTabView TabWidthMode="SizeToContent" TabHeaderPadding="5,10,5,10">
    <tabView:SfTabItem/>
</tabView:SfTabView>
var tabView = new SfTabView();
tabView.TabWidthMode = TabWidthMode.SizeToContent;
tabView.TabHeaderPadding = new Thickness(5, 10, 5, 10);

TabHeaderPadding

Scroll buttons on header

Scroll buttons are used to navigate through the items in the header of the Tab View by adjusting the IsScrollButtonEnabled property of SfTabView. This additionally indicates the presence of tabs beyond the currently visible area.

<tabView:SfTabView  IsScrollButtonEnabled="True">
    <tabView:SfTabItem/>
</tabView:SfTabView>
var tabView = new SfTabView();
tabView.IsScrollButtonEnabled = true;

Scroll mode

Scroll button customization

The ScrollButtonBackground and ScrollButtonColor property of SfTabView allows customization of the background and foreground color of the scroll button.

<tabView:SfTabView ScrollButtonBackground="Violet" ScrollButtonColor="Red">
</tabView:SfTabView>
StackLayout stackLayout = new StackLayout();
var tabView = new SfTabView();
tabView.ScrollButtonBackground = SolidColorBrush.Violet;
tabView.ScrollButtonColor = Colors.Red;
stackLayout.Children.Add(tabView);
this.Content = stackLayout;

Scroll button customization

FontAutoScalingEnabled

The FontAutoScalingEnabled property automatically scales the tab header’s font size based on the operating system’s text size. The default value is false.

<tabView:SfTabView FontAutoScalingEnabled="True">
...
</tabView:SfTabView>
var tabView = new SfTabView();
tabView.FontAutoScalingEnabled = true;

ContentTransitionDuration

You can customize the animation duration when changing the SelectedIndex of the Tab View by setting the ContentTransitionDuration property.

<tabView:SfTabView  ContentTransitionDuration ="1000">
    <tabView:SfTabItem/>
</tabView:SfTabView>
var tabView = new SfTabView();
tabView.ContentTransitionDuration = 1000;

ContentTransitionDuration

ImageSize

You can customize the image size in the .NET MAUI Tab View control by setting the ImageSize property.

<tabView:SfTabView>
    <tabView:SfTabItem ImageSize="50"/>
</tabView:SfTabView>
StackLayout stackLayout = new StackLayout();
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        ImageSize = 50,
    }
};
tabView.Items = tabItems;
stackLayout.Children.Add(tabView);
this.Content = stackLayout;

Disable ripple effect on item click

The EnableRippleAnimation property of the SfTabView allows you to enable or disable the ripple animation for tab headers. This animation provides visual feedback when a tab header is tapped. The default value of the EnableRippleAnimation property is true.

<!-- Define the SfTabView control with the ripple animation disabled -->
<tabView:SfTabView EnableRippleAnimation="False">
    <!-- Define tab items -->
</tabView:SfTabView>
// Create an instance of the SfTabView control
SfTabView tabView = new SfTabView();

// Disable the ripple animation
tabView.EnableRippleAnimation = false;

How to

Disable hover effect on tab item

To disable the hover effect when the mouse pointer is over a TabItem header, set color value Transparent to the built-in key SfTabViewHoverBackground.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 ... >
	<ContentPage.Resources>
		<Color x:Key="SfTabViewHoverBackground">Transparent</Color>
	</ContentPage.Resources>
	<ContentPage.Content>
		<tabView:SfTabView x:Name="tabView" EnableRippleAnimation="False">
			<!-- Define tab items -->
		</tabView:SfTabView>
	</ContentPage.Content>
</ContentPage>