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

21 Nov 202413 minutes to read

A tab item consists of the following elements that can be customized.

Adding image in tab item

Holds the text of the tab item that is 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",
    }
}

Tab Item 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",
    }
}

Tab Item 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
            }
        }
    }

Tab Item Content

Image position options

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

NOTE

Each tab item can be set with different image positions. Visual State Manager can be used to apply 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,
    }
}

Image Position 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,
    }
}

Image Position 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,
    }
}

Image Position 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,
    }
}

Image Position Right

Image Text Spacing

The ImageTextSpacing property in SfTabItem allows for the provision of 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",
    }
}

Image Text Spacing

Text Color 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,
    }
}

Tab Image TextColor

Font Customization

This type of customization involves making changes to the looks of 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",
    }
}

TabItem 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,
    }
}

Tab Item 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,
    }
}

Tab Item FontSize

Badge Support

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

Badge text

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",
    }
}

Badge settings

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

BadgeSettings 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.

<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>
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;

Tabview BadgeSupport

NOTE

View sample in GitHub.

Tab Header Padding

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);

Image Text Spacing

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 functionality 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;

TabView Scroll Mode

Scroll button customization

The ScrollButtonBackgroundColor and ScrollButtonForegroundColor property of SfTabView allows users to customize the background color and foreground color of scroll button.

<tabView:SfTabView ScrollButtonBackgroundColor="Violet"
                       ScrollButtonForegroundColor="Red">
     </tabView:SfTabView>
tabView.ScrollButtonBackgroundColor = "Violet";
     tabView.ScrollButtonForegroundColor = "Red";

ScrollButtonCustomization

Font auto scaling enabled

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

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

Content transition duration

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

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