How to set large titles on Xamarin Forms iOS using Shell

Question

Since Shell doesn't have a Navigationbar, how I can I set large Titles as described here Xamarin Forms iOS Large Title microsoft docs ?

If I set:

xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" ios:Page.LargeTitleDisplay="Always" Title="Settings"

on the ContentPage of an AppShell app nothing changes...

Answer 1

This could be achieved by using Shell Custom Renderers , and then set the Font of the TitleTextAttributes like Font = UIFont.FromName("Courier", 35f) .

Here's the code sample below for your reference:

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(APPNAME.AppShell), typeof(APPNAME.iOS.Renderers.CustomShellRenderer))]
namespace APPNAME.iOS.Renderers
{

    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var renderer = base.CreateShellSectionRenderer(shellSection);
            
            if (renderer != null)
            {
                if (renderer is ShellSectionRenderer shellRenderer)
                {
                    
    
                    var appearance = new UINavigationBarAppearance();
                    appearance.ConfigureWithOpaqueBackground();
                    appearance.BackgroundColor = new UIColor(red: 0.86f, green: 0.24f, blue: 0.00f, alpha: 1.00f);
                    
                    appearance.TitleTextAttributes = new UIStringAttributes() { 
                    ForegroundColor = UIColor.White,  
                    Font = UIFont.FromName("Courier", 35f)
};
                    
              
                    shellRenderer.NavigationBar.Translucent = false;
                    shellRenderer.NavigationBar.StandardAppearance = appearance;
                    shellRenderer.NavigationBar.ScrollEdgeAppearance = shellRenderer.NavigationBar.StandardAppearance;
                    
                }
            }

            return renderer;
        }
        
    }
}