windowsmauiindicatortabbedpage

Maui - TabbedPage current page indicator can be wrong [Windows]


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!

enter image description here

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!


Solution

  • 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);
      }));