CODEWITHSUNDEEP
xamlmvvmmaui
Sam Jones
Sam Jones

Reputation: 21

MAUI: Primary and Secondary Navigation Bars

So thinking about navigation bars within an app or website etc, generally can break down into primary and secondary navigation for example: Primary and Secondary Navigation Example As you can see in this example image, highlighted in red dashed is a primary navigation for the entire site, and highlighted in solid green is a local navigation for that specific page/area.

Now if I used the AppShell to create a standard TabBar such as below for example:

    <TabBar>
        <Tab Title="Home">
            <ShellContent ContentTemplate="{DataTemplate Views:HomePage}" />
        </Tab>

        <Tab Title="Books">
            <ShellContent ContentTemplate="{DataTemplate Views:BookPage}" />
        </Tab>

        <Tab Title="Account">
            <ShellContent ContentTemplate="{DataTemplate Views:AccountPage}" />
        </Tab>
    </TabBar>

and within the "Books" tab I had a collection view of books that are clickable, and upon clicking a book, a page is pushed onto the stack to view that selected book, for example the page could be called "SelectedBookPage".

Now the stack looks like the following: Book Page -> SelectedBookPage.

However, within that SelectedBookPage, I want to have a local navigation bar with options for the user to click on the following tabs: "Information", "Pages", "Review".

How is it possible to create a local navigation bar?. I understand I could Just have 3 buttons for each 'tab' but surely there is a better way of doing this? One that is more user friendly and has good intuitive UI.

So far for this scenario on one of my MAUI apps, I simply created my own by having on a page a horizontal list of radio buttons which represent different views. then on click on one of the views, a 'ContentPresenter' control is given a view to present. this essentially creates my own custom made local navigation bar, but it is abit dissapointing if that is the sole way of implementing this design.

I have been able to implement this idea of local navigation with ease in frameworks like Flutter, why does it seem asif MAUI has a half finished product sometimes? Nothing ever seems to be easy even though its languages are ones I am most familiar with...

I am open to hearing solutions, ideas, alternatives, thoughts etc.

Upvotes: 0

Views: 330

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

You can use menu bar which is a container that presents a set of menus in a horizontal row, at the top of an app on Mac Catalyst and Windows.

Here's the sample code below for your reference:

 <Shell.MenuBarItems>

     <MenuBarItem Text="File">

         <MenuFlyoutItem Text="Exit" Clicked="MenuFlyoutItem_Clicked"/>

     </MenuBarItem>

     <MenuBarItem Text="Locations">

         <MenuFlyoutSubItem Text="Change Location">

             <MenuFlyoutItem Text="Redmond, USA"/>

             <MenuFlyoutItem Text="London, UK" />

             <MenuFlyoutItem Text="Berlin, DE" />

         </MenuFlyoutSubItem>

         <MenuFlyoutSeparator />

         <MenuFlyoutItem Text="Add Location"/>

         <MenuFlyoutItem Text="Edit Location"/>

         <MenuFlyoutItem Text="Remove Location" />

     </MenuBarItem>

     <MenuBarItem Text="View">

         <MenuFlyoutItem Text="Refresh"/>

     </MenuBarItem>

 </Shell.MenuBarItems>

<TabBar>
     <Tab Title="Home">
            <ShellContent ContentTemplate="{DataTemplate Views:HomePage}" />
      </Tab>

      <Tab Title="Books">
            <ShellContent ContentTemplate="{DataTemplate Views:BookPage}" />
      </Tab>

      Tab Title="Account">
          <ShellContent ContentTemplate="{DataTemplate Views:AccountPage}" />
      </Tab>
</TabBar>

Output:

enter image description here

Upvotes: 0

Related Questions