I have a tabbed page with two pages on it, Page 1 and Page 2. When the tabbed page opens, it correctly displays Page 1, and the bar is displayed under the title Page 1. Then select Page 2, and Page 2 is correctly shown and the bar is under the Page 2 title.
If I then select Page 2, close the page. Then re-open (a new instance of the tabbed page), Page 1 is correctly shown, but both the Page 1 title AND Page 2 title have the bar under them!
This is the TabbedPage code:
namespace MauiTestApp;
public class MyTabbedPage : TabbedPage
{
public MyTabbedPage()
{
ContentPage page1 = new ContentPage();
page1.Title = "Page 1";
ContentPage page2 = new ContentPage();
page2.Title = "Page 2";
this.Children.Add(page1);
this.Children.Add(page2);
ToolbarItems.Add(new ToolbarItem("Back", null, async () =>
{
await Navigation.PopModalAsync(true);
}));
}
}
And the StartPage - set your MainPage to be a new instance of this:
namespace MauiTestApp;
public class StartPage : ContentPage
{
public StartPage()
{
Button tabbedPageButton = new Button();
tabbedPageButton.Text = "Open Tabbed Page";
tabbedPageButton.Clicked += TabbedPageButton_Clicked;
Content = new VerticalStackLayout
{
Children = { tabbedPageButton
}
};
}
private async void TabbedPageButton_Clicked(object? sender, EventArgs e)
{
await Navigation.PushModalAsync(new NavigationPage(new MyTabbedPage()));
}
}
I have logged this on GitHub - https://github.com/dotnet/maui/issues/26069 - but if anyone can think of a way that I can get around this issue (as a fix no doubt is months away) I would be very grateful!
Here is my solution.Go back to the default first item.
ToolbarItems.Add(new ToolbarItem("Back",null,async () =>{
this.CurrentPage = this.Children[0];
await Navigation.PopModalAsync(true);
}));