I get two instances of toolbar displayed when returning to main page

Question

Happens for iOS and Android. I've made a simple test where I've added a toolbar with a single item with secondary order. When it is clicked it calls PushAsync to page 1 when back button in page 1 is pressed I see two toolbars stacked on top of each other. I've seen many examples for Xamarin but none for MAUI. Not sure if there might be some difference that I haven't found. Below is a screenshot from an Android showing two toolbars. The vertical ellipses on both toolbars are active giving the impression that there are two instances.

Answer 1

Hello, Shell has special navigation method. Please refer this document:.NET MAUI Shell navigation.

Based on your environment, you can do following steps to fix this issue.

Firstly, please open your App.xaml.cs, remove MainPage = new NavigationPage(new AppShell()); use     MainPage = new AppShell(); directly like following code.

 public App()
    {
        InitializeComponent();
       MainPage = new AppShell();
      // MainPage = new NavigationPage(new AppShell());

   }

Second, open AppShell.xaml.cs and register your page1 in the AppShell's constructor.

public AppShell()
    {
        InitializeComponent();
       Routing.RegisterRoute("Page1", typeof(Page1));

   }

Third, open your MainPage.xaml.cs, find the ToolbarItem_Clicked method, use   await Shell.Current.GoToAsync("Page1"); to do navigation.

private async void ToolbarItem_Clicked(object sender, EventArgs e)
    {
        // Navigation.PushAsync(new Page1());
       await Shell.Current.GoToAsync("Page1");
    }

Best Regards, Leon Lu

---

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.