Customize the Title Bar of a MAUI app with these simple steps

If you're using Shell, you can navigate to the Styles.xaml file and then find the style setter for the Shell.BackgroundColor property:

<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light=#123456, Dark=#654321" />

Or when you use a NavigationPage or TabbedPage, you can set the BarBackgroundColor:

    <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />

Of course, you don't need to use the AppThemeBinding, you can also set it to a single, static value.

Thank you, Thomas Schreiner! I'm happy that it helps you.

Hi Sebastian Hoppe,

which background do you mean?

On the top, you can see the status bar, which on Android can be set in the platform-specific code, e.g. MainActivity.cs via this method:

Window?.SetStatusBarColor(Colors.Orange.ToAndroid());

On iOS, this shouldn't be necessary, usually the page background color is used, which can be set in a platform-independent fashion like this:

<ContentPage
    BackgroundColor="Orange">

</ContentPage>

I hope this helps.

I'm thinking about writing a separate blog post about that.

Cheers Julian

Hi Sebastian Hoppe,

popups such as alert dialogs and the picker use native platform views. In order to theme those, you need to use platform-specific code.

This can be achieved either by using custom renderers (the old-fashioned Xamarin.Forms way), control customization using handlers and mappers or by manually setting color values in the styles.xml of the Android platform, similar to how I have described it in my blog post about splash screens in MAUI.

I hope this helps.

Cheers Julian

Hi Julian Ewers-Peters,

actually I tried Handler (found one to change the color of the "3-point-item" but sadly not for the popup background color). In the colors.xml I could change the default purple color of the dialog buttons which is hard to see on dark grey background. If you are able to change the background color of the popup, that contains your secondary toolbar items, to green which would fit your color style nicely please let me know. :-)

Regards. Sebastian.

Hi Sebastian.

Sorry, I didn't see your comment before.

Have you tried using data binding to change the color during runtime?

Another approach would be to build the toolbar in the code-behind using C# and then setting different colors based on some conditions.

As I am not near my computer at the moment, I won't be able to give a specific answer at the moment.

If you can't figure it out, let me know and I might write up another blog post about configuring/updating the toolbar from the code-behind during runtime.

Cheers Julian