How to Increase TabbedPage Tab Title Font Size in .NET MAUI?

Question

Hi,

I am working on a .NET MAUI application and using a TabbedPage for navigation. I want to increase the font size of the tab titles on the TabBar. Here is the XAML code for my TabbedPage:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://schemas.microsoft.com/dotnet/2021/maui/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
            xmlns:local="clr-namespace:TabbedPageSample; assembly=TabbedPage"
            xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific; assembly=Microsoft.Maui.Controls"
            android:TabbedPage.ToolbarPlacement="Top"
            x:Class="TabbedPageSample.AppTabbedPage">
    <TabbedPage.Children>
        <local:OnePage Title="One" IconImageSource="{DynamicResourc Icon1}" />
        <local:TwoPage Title="Two"  IconImageSource="{DynamicResource Icon2}" />
        <local:ThreePage Title="Three" IconImageSource="{DynamicResource Icon3}" />
        <local:FourPage Title="Four" IconImageSource="{DynamicResource Icon4}" />
        <local:FivePage Title="Five" IconImageSource="{DynamicResource Icon5}" />
    </TabbedPage.Children>
</TabbedPage>

I have implemented a custom handler for iOS to update the font size, as shown below:

using Microsoft.Maui.Controls.Handlers.Compatibility;
using UIKit;

namespace Sample.Platforms.iOS.Handlers
{
    public class CustomTabbedPage : TabbedRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base. ViewWillAppear(animated);
            UpdateTabFontSize();
        }

		private void UpdateTabFontSize()
        {
            foreach (var tab in TabBar.Items)
            {
                if (tab. Title != null)
                {
                    var font = UIFont.SystemFontOfSize(20); // Desired font size
                    var attributes = new UIStringAttributes
                    {
                        Font = font
                    };

					// Set attributes for normal state
                    tab. SetTitleTextAttributes(attributes, UIControlState.Normal);
                    // Set attributes for selected state
                    tab. SetTitleTextAttributes(attributes, UIControlState.Selected);
                }
            }
        }
    }
}

I registered this custom handler in MauiProgram.cs as follows:

. ConfigureMauiHandlers(handlers =>
{
#if IOS
    // Add custom handler for TabbedPage
    handlers. AddHandler(typeof(AppTabbedPage), typeof(CustomTabbedPage));
#endif
})

However, I am not sure if this is the correct way to implement font-size changes for TabbedPage titles.

Questions:

Is this approach correct for changing the tab title font size in a TabbedPage? Is there a better or more cross-platform approach for this customization in .NET MAUI? Any guidance, suggestions, or improvements to my implementation would be greatly appreciated!

Thank you!

Answer 1

Hello,

Is this approach correct for changing the tab title font size in a TabbedPage?

Changing the font through the Handler method is correct.

Maui currently does not provide a cross-platform API for customizing TabbedPage. Therefore, the only way to customize TabBar is to call the native platform API to change the style through Handler.

You can refer to the TabbedRenderer.cs source code of Maui on iOS platform to learn more about how Maui generates tabs on iOS.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.