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

Question

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

Steve Brooke 60

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. Screenshot_20230405-221003

Anonymous

2023-04-06T07:38:20.2266667+00:00

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.

Could you minimize code to just what is needed to reproduce the problem? As Note: How to write a quality answer.

Steve Brooke 60

The project starts as a stock MAUI app. I've removed the image and button from the main page. Here are the files. No other changes to the stock project. I had stated that iOS and Android were the same. App.xml.cs

namespace NavTest {
    public partial class App : Application {
        public App() {
            InitializeComponent();

            MainPage = new NavigationPage(new AppShell());
            }
        }
    }

MainPage.xml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavTest.MainPage"
             Title="Main Page">

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Page1" Order="Secondary" Clicked="ToolbarItem_Clicked"/>
    </ContentPage.ToolbarItems>

     <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

MainPage.xml.cs

namespace NavTest {
    public partial class MainPage : ContentPage {
        int count = 0;

        public MainPage() {
            InitializeComponent();
            }

        private void ToolbarItem_Clicked(object sender, EventArgs e) {
            Navigation.PushAsync(new Page1());
            }
        }
    }

Page1.xml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavTest.Page1"
             Title="Page 1"
             >
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

Page1.xml.cs

namespace NavTest;

public partial class Page1 : ContentPage
{
	public Page1()
	{
		InitializeComponent();
	}
}

Steve Brooke 60 Reputation points

2023-04-06T14:39:11.77+00:00

iOS behaves unexpectedly, but not quite the same. Here is a screenshot from the simulator:
Anonymous

2023-04-12T07:51:10.3633333+00:00

Steve Brooke May I know whether your issue has been solved or not? If you're still having problems please explain in detail what is still going wrong and what you need help with

Accepted answer

0 additional answers

Your answer

Anonymous

2023-04-06T07:38:20.2266667+00:00

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.

Could you minimize code to just what is needed to reproduce the problem? As Note: How to write a quality answer.
Steve Brooke 60 Reputation points

2023-04-06T14:36:54.9433333+00:00

The project starts as a stock MAUI app. I've removed the image and button from the main page. Here are the files. No other changes to the stock project. I had stated that iOS and Android were the same. App.xml.cs

namespace NavTest { public partial class App : Application { public App() { InitializeComponent(); MainPage = new NavigationPage(new AppShell()); } } }

MainPage.xml

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NavTest.MainPage" Title="Main Page"> <ContentPage.ToolbarItems> <ToolbarItem Text="Page1" Order="Secondary" Clicked="ToolbarItem_Clicked"/> </ContentPage.ToolbarItems> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30,0" VerticalOptions="Center"> <Label Text="Hello, World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView>

MainPage.xml.cs

namespace NavTest { public partial class MainPage : ContentPage { int count = 0; public MainPage() { InitializeComponent(); } private void ToolbarItem_Clicked(object sender, EventArgs e) { Navigation.PushAsync(new Page1()); } } }

Page1.xml

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NavTest.Page1" Title="Page 1" > <VerticalStackLayout> <Label Text="Welcome to .NET MAUI!" VerticalOptions="Center" HorizontalOptions="Center" /> </VerticalStackLayout> </ContentPage>

Page1.xml.cs

namespace NavTest; public partial class Page1 : ContentPage { public Page1() { InitializeComponent(); } }
Steve Brooke 60 Reputation points

2023-04-06T14:39:11.77+00:00

iOS behaves unexpectedly, but not quite the same. Here is a screenshot from the simulator:
Anonymous

2023-04-12T07:51:10.3633333+00:00

Steve Brooke May I know whether your issue has been solved or not? If you're still having problems please explain in detail what is still going wrong and what you need help with

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.

Anonymous

2023-04-11T09:17:57.7433333+00:00

Steve Brooke May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.
Steve Brooke 60 Reputation points

2023-04-13T13:49:59.7133333+00:00

not tried on ios yet.

Share via

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

0 additional answers

Your answer