How can I customize my navbar shell in MAUI?

Question

Hello guys, I have a question, I am new to this .NET MAUI technology and I have been working on a project with NAVBAR, TABBAR, FLYOUTBAR with SHELL and I would like to know if I can customize my NAVBAR to a prototype that advances in Figma, here below I leave more detailed images about my problem.

All that is marked with blue is my navbar developed in Figma.

This image is from my project that I was advancing I want my project's navbar to look the same as Figma's navbar, using SHELL. In advance, I appreciate your help.

Answer 1

Hello,

There are four pages in your prototype, the first one looks like a Login/Register Page, and it may pop up from your app, you can customize the popup page.
The others look like the flyout page. And there are several differences between your page with blue statusbar and the page in prototype.

1. Your statusbar color is blue, the prototype's green: Please go to Platforms->Android->Resources->values->colors.xml, then change the color. You could also try .NET MAUI Community Toolkit's StatusBarBehavior
2. Your Flyout icon color is white, the prototype's green: Please design a image then change the Flyout icon.
3. The TitleView's background color is white, and the title color is green: Please go to Resources->Styles->Styles.xmal, then find Style TargetType="Shell" and change Shell.TitleColor and Shell.BackgroundColor.
4. The TitleView's title font: you can customize Shell.TitleView and add a label in it, then set the font, please see Display views in the navigation bar and Label - .NET MAUI | Microsoft Learn
5. The last page has a back button, please see Back button behavior.

If you have any other issues, please feel free to post in here. Besides, there are several questions in this thread, it's recommended that you void posting multiple questions in a single thread. This way, the community can give you their undivided attention and provide the best possible response. Please see How to write a quality question on Microsoft Q&A

---

Update

I'd like the navigation bar to have some sort of defined margin and size so that it separates it from the Contentpage and fits the same as the model I develop on my prototype.

If so, please try hiding the navigation bar: Shell.NavBarIsVisible="False", see .NET MAUI Shell pages - .NET MAUI | Microsoft Learn

And you can customize a view with a button (looks like flyout icon) and a label (to display the title) and a space view (green space) so that it looks like the Titleview on your prototype.

Then you can open and close the flyout programmatically in in Xaml

<Shell...    FlyoutIsPresented="True">

and in the Button_Clicked method

private void Button_Clicked(object sender, EventArgs e)
    {
        Shell.Current.FlyoutIsPresented = !Shell.Current.FlyoutIsPresented;
    }

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.