Customize the Appearance of Tab Item in .NET MAUI Tab View

5 Aug 202624 minutes to read

A tab item in the .NET MAUI Tab View consists of various elements that can be customized to match your application’s design requirements. The control provides extensive appearance customization options, including text color, font attributes, image position, badge appearance,and animation duration. These customization capabilities allow you to create visually appealing and interactive tab navigation experiences.

Prerequisites

Before using the SfTabView, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.TabView

For step-by-step setup, refer to the Getting Started documentation.

Tab item elements

A tab item in the Tab View control consists of three core elements (header text, image, and content area).

The Header property holds the text of the tab item displayed in the tab bar. The property is of type string.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" />
    <tabView:SfTabItem Header="ITEM 2" />
    <tabView:SfTabItem Header="ITEM 3" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection 
    { 
        new SfTabItem { Header = "ITEM 1" },
        new SfTabItem { Header = "ITEM 2" },
        new SfTabItem { Header = "ITEM 3" }
    }
};

Tab item with a header label

ImageSource

The ImageSource property holds the image displayed in the tab bar representing the tab item.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" ImageSource="image1.png" />
    <tabView:SfTabItem Header="ITEM 2" ImageSource="image2.png" />
    <tabView:SfTabItem Header="ITEM 3" ImageSource="image3.png" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", ImageSource = "image1.png"  },
        new SfTabItem { Header = "ITEM 2", ImageSource = "image2.png"  },
        new SfTabItem { Header = "ITEM 3", ImageSource = "image3.png"  }
    }
};

Tab item with an image source

Content

The Content property holds the view displayed in the main area of the Tab View when the tab is selected. The property is of type View.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 2">
        <tabView:SfTabItem.Content>
            <ListView>
                <!-- ListView content here -->
            </ListView>
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    {
        new SfTabItem()
        {
            Header = "ITEM 2",
            Content = new ListView()
            {
                // ListView content here
            }
        }
    }
};

Tab item with custom content

ImagePosition options

The .NET MAUI Tab View provides four options for 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. The property is of type TabImagePosition and the default value is Left.

NOTE

Each tab item can have a different image position. Use the Visual State Manager to apply the same value to all tabs.

Top

Places the image above the text vertically.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" ImageSource="image1.png" ImagePosition="Top" />
    <tabView:SfTabItem Header="ITEM 2" ImageSource="image2.png" ImagePosition="Top" />
    <tabView:SfTabItem Header="ITEM 3" ImageSource="image3.png" ImagePosition="Top" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", ImageSource = "image1.png", ImagePosition = TabImagePosition.Top  },
        new SfTabItem { Header = "ITEM 2", ImageSource = "image2.png", ImagePosition = TabImagePosition.Top  },
        new SfTabItem { Header = "ITEM 3", ImageSource = "image3.png", ImagePosition = TabImagePosition.Top  }
    }
};

Image positioned at the top of the tab header

Bottom

Places the image below the text vertically.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" ImageSource="image1.png" ImagePosition="Bottom" />
    <tabView:SfTabItem Header="ITEM 2" ImageSource="image2.png" ImagePosition="Bottom" />
    <tabView:SfTabItem Header="ITEM 3" ImageSource="image3.png" ImagePosition="Bottom" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", ImageSource = "image1.png", ImagePosition = TabImagePosition.Bottom },
        new SfTabItem { Header = "ITEM 2", ImageSource = "image2.png", ImagePosition = TabImagePosition.Bottom },
        new SfTabItem { Header = "ITEM 3", ImageSource = "image3.png", ImagePosition = TabImagePosition.Bottom }
    }
};

Image positioned at the bottom of the tab header

Left

Places the image before the text, horizontally.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" ImageSource="image1.png" ImagePosition="Left" />
    <tabView:SfTabItem Header="ITEM 2" ImageSource="image2.png" ImagePosition="Left" />
    <tabView:SfTabItem Header="ITEM 3" ImageSource="image3.png" ImagePosition="Left" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
     Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", ImageSource = "image1.png", ImagePosition = TabImagePosition.Left },
        new SfTabItem { Header = "ITEM 2", ImageSource = "image2.png", ImagePosition = TabImagePosition.Left },
        new SfTabItem { Header = "ITEM 3", ImageSource = "image3.png", ImagePosition = TabImagePosition.Left }
    }
};

Image positioned to the left of the tab header text

Places the image to the right of the text, horizontally.

<tabView:SfTabView>
    <tabView:SfTabItem ImagePosition="Right" />
    <tabView:SfTabItem Header="ITEM 1" ImageSource="image1.png" ImagePosition="Right" />
    <tabView:SfTabItem Header="ITEM 2" ImageSource="image2.png" ImagePosition="Right" />
    <tabView:SfTabItem Header="ITEM 3" ImageSource="image3.png" ImagePosition="Right" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", ImageSource = "image1.png", ImagePosition = TabImagePosition.Right },
        new SfTabItem { Header = "ITEM 2", ImageSource = "image2.png", ImagePosition = TabImagePosition.Right },
        new SfTabItem { Header = "ITEM 3", ImageSource = "image3.png", ImagePosition = TabImagePosition.Right }
    }
};

Image positioned to the right of the tab header text

ImageTextSpacing

The ImageTextSpacing property in SfTabItem sets the spacing between the image and the text of the tab item. The property is of type double.

<tabView:SfTabView>
    <tabView:SfTabItem  />
    <tabView:SfTabItem Header="ITEM 1" ImageSource="image1.png" ImageTextSpacing="20"/>
    <tabView:SfTabItem Header="ITEM 2" ImageSource="image2.png" ImageTextSpacing="20"/>
    <tabView:SfTabItem Header="ITEM 3" ImageSource="image3.png" ImageTextSpacing="20"/>
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", ImageSource = "image1.png", ImagePosition = ImageTextSpacing=20 },
        new SfTabItem { Header = "ITEM 2", ImageSource = "image2.png", ImagePosition = ImageTextSpacing=20 },
        new SfTabItem { Header = "ITEM 3", ImageSource = "image3.png", ImagePosition = ImageTextSpacing=20 }
    }
};

Spacing between the image and text set to 20

TextColor customization

The TextColor property sets the text color of the tab item displayed in the tab bar. The property is of type Color.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" TextColor="Blue" />
    <tabView:SfTabItem Header="ITEM 2" TextColor="Blue" />
    <tabView:SfTabItem Header="ITEM 3" TextColor="Blue" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", TextColor = Colors.Blue },
        new SfTabItem { Header = "ITEM 2", TextColor = Colors.Blue },
        new SfTabItem { Header = "ITEM 3", TextColor = Colors.Blue }
    }
};

Tab item text color set to blue

Font customization

This type of customization involves changes to font elements such as family, attributes, and size.

FontFamily

The FontFamily property sets the font family of the tab item text.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" FontFamily="OpenSansRegular" />
    <tabView:SfTabItem Header="ITEM 2" FontFamily="OpenSansRegular" />
    <tabView:SfTabItem Header="ITEM 3" FontFamily="OpenSansRegular" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", FontFamily = "OpenSansRegular" },
        new SfTabItem { Header = "ITEM 2", FontFamily = "OpenSansRegular" },
        new SfTabItem { Header = "ITEM 3", FontFamily = "OpenSansRegular" }
    }
};

Tab item font family set to OpenSansRegular

FontAttributes

The FontAttributes property sets the font style of the text of each tab item. Valid values are None, Bold, and Italic.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" FontAttributes="Bold" />
    <tabView:SfTabItem Header="ITEM 2" FontAttributes="Bold" />
    <tabView:SfTabItem Header="ITEM 3" FontAttributes="Bold" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", FontAttributes = FontAttributes.Bold },
        new SfTabItem { Header = "ITEM 2", FontAttributes = FontAttributes.Bold },
        new SfTabItem { Header = "ITEM 3", FontAttributes = FontAttributes.Bold }
    }
};

Tab item font attributes set to bold

FontSize

The FontSize property sets the size of the text of each tab item. The property is of type double.

<tabView:SfTabView>
    <tabView:SfTabItem Header="ITEM 1" FontSize="32" />
    <tabView:SfTabItem Header="ITEM 2" FontSize="32" />
    <tabView:SfTabItem Header="ITEM 3" FontSize="32" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", FontSize="32" },
        new SfTabItem { Header = "ITEM 2", FontSize="32" },
        new SfTabItem { Header = "ITEM 3", FontSize="32" }
    }
};

Tab item font size set to 32

LineBreakMode

The LineBreakMode property sets the line break mode of the tab item text. The property is of type LineBreakMode. Valid values are NoWrap, WordWrap, CharacterWrap, HeadTruncation, TailTruncation, and MiddleTruncation.

<tabView:SfTabView>
    <tabView:SfTabItem Header="Terms and Conditions and Privacy Policy" LineBreakMode="WordWrap" />
    <tabView:SfTabItem Header="Account Settings and Preferences" LineBreakMode="WordWrap" />
    <tabView:SfTabItem Header="Licenses and Copyrights Agreements" LineBreakMode="WordWrap" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    {
        new SfTabItem()
        {
            Header = "Terms and Conditions and Privacy Policy",
            LineBreakMode = LineBreakMode.WordWrap
        },
        new SfTabItem()
        {
            Header = "Account Settings and Preferences",
            LineBreakMode = LineBreakMode.WordWrap
        },
        new SfTabItem()
        {
            Header = "Licenses and Copyrights Agreements",
            LineBreakMode = LineBreakMode.WordWrap
        }
    }
};

Tab items with word-wrap line break mode

Badge support

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

BadgeText

The BadgeText property sets the text shown inside the badge view.

<tabView:SfTabView>
    <tabView:SfTabItem  />
    <tabView:SfTabItem Header="ITEM 1" BadgeText="20" />
    <tabView:SfTabItem Header="ITEM 2" BadgeText="10" />
    <tabView:SfTabItem Header="ITEM 3" BadgeText="25" />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1", BadgeText = 20 },
        new SfTabItem { Header = "ITEM 2", BadgeText = 10 },
        new SfTabItem { Header = "ITEM 3", BadgeText = 25 }
    }
};

BadgeSettings

The BadgeSettings property customizes the appearance of the badge view. It exposes sub-properties such as badge type, position, background color, text color, border color, border thickness, offset, and font attributes.

NOTE

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

<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:SfTabItem Header="FAVOURITS"/>
    <tabView:SfTabItem Header="CONTACTS"/>
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    Items = new TabItemCollection
    {
        new SfTabItem()
        {
            Header = "RECENTS",
            BadgeText = "20",
            BadgeSettings = new BadgeSettings()
            {
                FontSize = 15,
                FontAttributes = FontAttributes.Bold,
                FontFamily = "serif"
            }
        }
        new SfTabItem { Header = "FAVOURITS" },
        new SfTabItem { Header = "CONTACTS" }
    }
};

Badge on a tab item with custom font settings

Note View the sample on GitHub.

TabHeaderPadding

The TabHeaderPadding property on SfTabView adds padding around the tab header.

NOTE

TabHeaderPadding is only applicable when TabWidthMode is set to SizeToContent.

<tabView:SfTabView TabWidthMode="SizeToContent" 
                   TabHeaderPadding="5,10,5,10">
    <tabView:SfTabItem Header="ITEM 1"/>
    <tabView:SfTabItem Header="ITEM 2"/>
    <tabView:SfTabItem Header="ITEM 3"/>
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    TabWidthMode = TabWidthMode.SizeToContent,
    TabHeaderPadding = new Thickness(5, 10, 5, 10)
    Items = new TabItemCollection
    { 
        new SfTabItem { Header = "ITEM 1" },
        new SfTabItem { Header = "ITEM 2" },
        new SfTabItem { Header = "ITEM 3" }
    }
};

Tab header padding set to 5,10,5,10

Scroll buttons

Scroll buttons are used to navigate through the items in the header of the Tab View by setting the IsScrollButtonEnabled property of SfTabView. The property is of type bool and defaults to false. When enabled, scroll buttons are shown to indicate the presence of tabs beyond the currently visible area.

<tabView:SfTabView IsScrollButtonEnabled="True">
    <tabView:SfTabItem />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    IsScrollButtonEnabled = true
};

Scroll buttons shown on the tab header

Scroll button customization

The ScrollButtonBackground and ScrollButtonColor properties of SfTabView customize the background and foreground color of the scroll button.

<tabView:SfTabView IsScrollButtonEnabled="True"
                   ScrollButtonBackground="Violet" 
                   ScrollButtonColor="Red">
    <tabView:SfTabItem />
</tabView:SfTabView>
SfTabView tabView = new SfTabView
{
    IsScrollButtonEnabled = true,
    ScrollButtonBackground = new SolidColorBrush(Colors.Violet),
    ScrollButtonColor = Colors.Red
};

Scroll buttons with custom background and foreground colors

FontAutoScalingEnabled

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

<tabView:SfTabView FontAutoScalingEnabled="true">
    <tabView:SfTabItem />
</tabView:SfTabView>
var tabView = new SfTabView
{
    FontAutoScalingEnabled = true
};

ContentTransitionDuration

The ContentTransitionDuration property customizes the animation duration (in milliseconds) when changing the SelectedIndex of the Tab View.

<tabView:SfTabView ContentTransitionDuration="1000">
    <tabView:SfTabItem />
</tabView:SfTabView>
var tabView = new SfTabView
{
    ContentTransitionDuration = 1000
};

Content transition animation

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>
var tabView = new SfTabView();
var tabItems = new TabItemCollection
{
    new SfTabItem()
    {
        ImageSize = 50,
    }
};
tabView.Items = tabItems;
this.Content = tabView;

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">
    <tabView:SfTabItem Header="Item1" />
    <tabView:SfTabItem Header="Item2" />
    <tabView:SfTabItem Header="Item3" />
</tabView:SfTabView>

How to

Disable hover effect on tab item

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

<ContentPage.Resources>
    <Color x:Key="SfTabViewHoverBackground">Transparent</Color>
</ContentPage.Resources>
<ContentPage.Content>
    <tabView:SfTabView x:Name="tabView" EnableRippleAnimation="False">
        <tabView:SfTabItem Header="Item1" />
    <tabView:SfTabItem Header="Item2" />
    <tabView:SfTabItem Header="Item3" />
    </tabView:SfTabView>
</ContentPage.Content>

Select tab items programmatically

To select the tab items programmatically, you can use the SelectedIndex property in SfTabView.

<tabView:SfTabView SelectedIndex="1">
     <tabView:SfTabItem />
     <tabView:SfTabItem />
     <tabView:SfTabItem />
</tabView:SfTabView>
SfTabView tabView = new SfTabView();
tabView.SelectedIndex = 1;

See also