How can I customize my navbar shell in MAUI?

CARDENAS LUNA, DIEGO GABRIEL 20 Reputation points
2023-04-25T05:52:28.3266667+00:00

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. User's image

All that is marked with blue is my navbar developed in Figma. User's image

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.

.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,547 questions
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,081 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
778 questions
0 comments No comments
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,071 Reputation points Microsoft Vendor
    2023-04-26T06:24:28.8966667+00:00

    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.


0 additional answers

Sort by: Most helpful