Shell does not provide way to change toolbar properties such as font weight, size, family, alignment, background color, etc.

[mobycorp]

Description

When using the NavigationPage, there is a property, BarBackgroundColor, used to change the background color of the navigation toolbar; this property is not available in Shell. Also, in both NavigationPage and Shell, both derivatives of the Page class, do not provide a way of manipulating text elements directly such as font weight, size, family, and alignment. In order to create an app-wide style, having access to these object's toolbar is crucial. I want to use Shell as my navigation baseline but overriding element properties of the toolbar is prevented in Shell because these properties are not exposed.

If there is some way to do this at present, I cannot find it!

Public API Changes

Shell.BarBackgroundColor = Colors.Purple;
Shell.Title.FontAlignment = HorizontalOptions.Start;
Shell.Title.FontSize = 32;

etc.

Intended Use-Case

In trying to provide the app user with the ability to change the application "skin", it would be nice to be able to set the toolbar component's individual properties so that when skins are changed, the resources for all shell pages can be updated dynamically.

[pijnappel]

This is exactly the problem I am facing right now. The font of the title inside the NavigationPage differs from the rest of my app.

Is there a workaround for this limitation? Maybe by changing the default font of the entire app (like in androids style.xml)?

[SmartmanApps]

I just ran into this with Toolbar. i.e. the issue with not being able to set Toolbar colours is missing from Toolbar itself, not just in shell. I'm working on my first proper MAUI app, and have managed to set the colours everywhere except Toolbar, so this is the last missing piece for a consistent theme (font, colours, etc.) experience. I actually was Googling for the Toolbar doco for binding colour, and this issue was top of the results!

Whilst I'm here, I will also note that the colour of the ellipsis icon - and also hamburger icon in Flyout page - are both white, NOT the same colour as the rest of my text. In Xamarin they were both the same colour, so this has been missed (so far) in MAUI. I noticed that in MAUI the hambuger icon has been moved to the very top of the window, instead of being in the NavBar, so this may be related to the fact that it's now no longer the same colour.

[SmartmanApps]

@pijnappel

This is exactly the problem I am facing right now. The font of the title inside the NavigationPage differs from the rest of my app.

Is there a workaround for this limitation? Maybe by changing the default font of the entire app (like in androids style.xml)?

Depends on which part of the Navigation page you mean. e.g. to set the colours of the Navigation Bar you can use NavigationPage.BarTextColorProperty and NavigationPage.BarBackgroundColorProperty, but on the other hand Toolbar doesn't have these properties (which is what I was looking for and ended up here).

[PureWeen]

A current workaround here is that the toolbar is now part of a handler so you can wire into ToolbarHandler which easily gives you access to the MauiToolbar where you can apply changes to the controls inside.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[SmartmanApps]

@PureWeen

A current workaround here is that the toolbar is now part of a handler so you can wire into ToolbarHandler which easily gives you access to the MauiToolbar where you can apply changes to the controls inside.

I Googled both ToolbarHandler and MauiToolbar and no MS documentation came up. Can you please post a link to how to do what you are talking about?

[PureWeen]

@PureWeen

A current workaround here is that the toolbar is now part of a handler so you can wire into ToolbarHandler which easily gives you access to the MauiToolbar where you can apply changes to the controls inside.

I Googled both ToolbarHandler and MauiToolbar and no MS documentation came up. Can you please post a link to how to do what you are talking about?

we don't have anything specific to ToolbarHandler or MauiToolbar but you can follow the instructions here for customizing handlers
https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/customize

[SmartmanApps]

Hey @PureWeen

Thanks for that. I read through what you linked to, but still a bit lost (though at least now I understand what a handler is :-) ), so I did some more Googling, and I just came across #2812 so it looks like the ToolBar Handler isn't available yet? In the MS docs about Handlers - https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/ - which listed the available ones (like IButton, etc.), it also didn't show Toolbar there.

[pictos]

Hey, here's a snippet that may help you...
I'm using the AppendToMapping method, but you can any other if you want/need

ToolbarHandler.Mapper.AppendToMapping(nameof(Toolbar.BarBackground), (h, v) =>
{
#if ANDROID
	var materialToolbar = h.PlatformView;
	materialToolbar.SetBackgroundColor(Colors.Fuchsia.ToPlatform());
	materialToolbar.TextAlignment = Android.Views.TextAlignment.TextStart;
          var p = materialToolbar.Title;
          var z = materialToolbar.TitleFormatted;
#endif
});

[SmartmanApps]

Thanks @pictos - I guess the doco hasn't caught up to what's available yet. I'll see if I can work it out from there (I'm actually wanting to set a binding, not just set a colour once, but at least I know for sure now that the ToolbarHandler does exist - I just tried some of your code and Intellisense picked it up, so that's a start :-) ).

[Syed-RI]

Bump

[SmartmanApps]

Thanks @Syed-RI. Yeah, I was going to come back to this this week (I still don't quite understand how to use handlers for this - a blog on the process would be good - and I had some other issues come up), but yeah, a proper fix would still be good. I'm up to VS 17.5.1 now and I can see this issue is still present.

P.S. the issue with the existing blogs is they only show you how to initially set the colour, not how to bind it to a property, and I need to bind it to a property.

[nicop85]

+1 to have a proper way to modify font size, font family, line height, etc of the Shell.Title

[dazlab]

+1

[cagriy]

Hi @pictos , I tried to write a handler as suggested / linked above but I must be doing something wrong. Is there any ideas you can offer as to why this is not changing the color/font of the Navbar Title on IOS ?

        ToolbarHandler.Mapper.AppendToMapping(nameof(Toolbar.Title), (h, v) =>
        {
            var materialToolbar = h.PlatformView;
        
            materialToolbar.TitleTextAttributes = new UIStringAttributes
            {
                ForegroundColor = Colors.Orange.ToPlatform(),
                Font = UIFont.FromName("Poppins", 25)
            };
        });

Many thanks

[pictos]

@cagriy I didn't touch on iOS so far, I'll find time to play with it and bring some workaround. Also, make sure this code works and is not being overridden by ShellAppearance

[lscarneiro]

Any solution available to change a Shell.Title font family?

It's kinda crazy that this is not built-in being such a basic thing.