TabbedPage with Icon for iPad

I have a TabbedPage with 2 ContentPages for my maui 8 app and want to display these as tabs with Title and IconImageSource.

On the iPhone, these are displayed below with title and icon. On the iPad, however, the title is only displayed at the top, which looks similar to a Switch.

How can I design the elements in the tab for iPad (IconImageSource, BarBackgroundColor, BarTextColor, SelectedTabColor, UnselectedTabColor)?

    <?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:mauiApp8="clr-namespace:MauiApp8"
                 x:Class="MauiApp8.TabbedPageDemo"
                 Title="TabbedPageDemo"
                 BarBackgroundColor="#273c75"
                 BarTextColor="White"
                 SelectedTabColor="White"
                 UnselectedTabColor="Gray">
        <mauiApp8:Home Title="Home" IconImageSource="home.png"/>
        <mauiApp8:News Title="News" IconImageSource="news.png"/>
    </TabbedPage>

Solution

On the iPad, however, the title is only displayed at the top, which looks similar to a Switch.

This is introduced with iPadOS 18 by Apple. To make things crazier Apple hasn't provide a way to retain old behavior. You can find more about this in apple documentation here.

There is already a bug raised related to this in MAUI. Check that here you may find a workaround that suits you

Seems like you have a TabbedPage defined. So probably using NavigationPage instead of Shell. Try to add a Custom Handler like below. That worked for me at my side.


using UIKit;

namespace MauiApp1.Platforms.iOS
{
    public class CustomTabbedPageRenderer: Microsoft.Maui.Controls.Handlers.Compatibility.TabbedRenderer
    {
        public CustomTabbedPageRenderer()
        {
            TraitOverrides.HorizontalSizeClass = UIUserInterfaceSizeClass.Compact;
        }
    }
}

add handler in MauiProgram.cs

 .ConfigureMauiHandlers(handlers =>
            {
#if IOS
                handlers.AddHandler(typeof(TabbedPage), typeof(CustomTabbedPageRenderer));
#endif
            });

Although, this may have other side effects. Hope this helps.