Customize TopBar on Maui

Question

this task is ridicolous but I can't find any info in internet. So please show mercy show mercy to me.

I want to customize the top bar of my MAUI application (The part in blue). How I can do that?

Thank you for your support

Answer 1

You can create custom renderer like Xamarin.Forms for Shell (No need to add [assembly: ExportRenderer(typeof(Shell), typeof(MyShellRenderer))] ). If you want to create a custom tabbar. Nomally, for android, you need to override CreateBottomNavViewAppearanceTracker . For iOS, you need to override CreateTabBarAppearanceTracker method.

Then, register your custom renderer for shell in the .MauiProgram.cs

builder.UseMauiApp<App>()
      .ConfigureFonts(fonts =>
      {
           ....
      }).ConfigureMauiHandlers(handlers => { 
           
                        #if ANDROID
                            handlers.AddHandler(typeof(Shell), typeof(CustomShellRenderer));
                        #elif iOS
                             handlers.AddHandler(typeof(Shell), typeof(MyiOSCustomShellRenderer));
               
                        #endif
            });

You can refer to this article Xamarin Forms Shell TabBar Rounded Corner to customize the top bar by using the shellrender.