How to customize the tab item in .NET MAUI Tab View?

Overview

When working with the .NET MAUI Tab View, you can enhance the user interface by adding font icons to the TabItems along with header text. This can be achieved by using the FontImageSource element within your XAML code. Below is a step-by-step guide on how to customize your TabItems with font icons.

Adding Font Icons to TabItems

To add font icons to your TabItems, you will need to use the FontImageSource element within each SfTabItem. Here’s an example of how to do this:

<tabView:SfTabView x:Name="tabView" TabBarBackground="HotPink">
    <tabView:SfTabView.Items>
        <!-- TabItem with a Call icon -->
        <tabView:SfTabItem Header="Call" x:Name="callItem" ImagePosition="Left">
            <tabView:SfTabItem.ImageSource>
                <FontImageSource Glyph="ﺶ" x:Name="call"
                                 Color="{Binding Source={x:Reference callItem},Path=TextColor}"
                                 FontFamily="MaterialDesignIcons"/>
            </tabView:SfTabItem.ImageSource>
            <!-- Content for the Call tab -->
            <!-- ... -->
        </tabView:SfTabItem>

        <!-- TabItem with a Favourite icon -->
        <tabView:SfTabItem Header="Favourite" x:Name="favItem" ImagePosition="Left">
            <tabView:SfTabItem.ImageSource>
                <FontImageSource Glyph="" x:Name="fav"
                                 Color="{Binding Source={x:Reference favItem},Path=TextColor}"
                                 FontFamily="MaterialDesignIcons"/>
            </tabView:SfTabItem.ImageSource>
            <!-- Content for the Favourite tab -->
            <!-- ... -->
        </tabView:SfTabItem>

        <!-- TabItem with a Contacts icon -->
        <tabView:SfTabItem Header="Contacts" x:Name="contactsItem" ImagePosition="Left">
            <tabView:SfTabItem.ImageSource>
                <FontImageSource Glyph="" x:Name="contacts"
                                 Color="{Binding Source={x:Reference contactsItem},Path=TextColor}"
                                 FontFamily="MaterialDesignIcons"/>
            </tabView:SfTabItem.ImageSource>
            <!-- Content for the Contacts tab -->
            <!-- ... -->
        </tabView:SfTabItem>
    </tabView:SfTabView.Items>
</tabView:SfTabView>

In the above example, each SfTabItem has an ImageSource defined with a FontImageSource. The Glyph attribute is used to specify the icon, and the Color attribute is bound to the TextColor of the tab item, ensuring that the icon color matches the text color. The FontFamily should be set to the font that contains your icons, such as “MaterialDesignIcons” in this case.

Binding the Icon Color

To ensure that the icon color matches the text color of the tab, a binding is set up to reference the TextColor property of the SfTabItem. This is done using the {Binding Source={x:Reference NameOfTabItem}, Path=TextColor} syntax.

Output

Download the complete sample in GitHub

Remember to include the font file containing your icons in your project and set the appropriate build action for it. This will ensure that the icons are displayed correctly in your application.

Conclusion

Hope you enjoyed learning about how to customize the tab item in .NET MAUI Tab View.

You can refer to our .NET MAUI Tab View’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac or feedback portal We are always happy to assist you!