MAUI: Issue with displaying Flyout menu page

Question

MAUI: Issue with displaying Flyout menu page

Sreenivasan, Sreejith 80

My app’s home page is a FlyoutPage.

The Flyout part is my menu.

The Detail part is a DashboardTabPage, which has three child tabs.

The problem I’m facing is this:

When I open the menu for the first time, it works fine.
But after I close it, if I try to open it again while still on the Dashboard tab, it doesn’t open.
However, if I switch to another tab first and then try to open the menu, it opens normally.

Adding the DashboardTabPage full code below:


    public partial class DashboardTabPage : TabbedPage
    {
        public static readonly BindableProperty IsAndroidLeftNavBarItemVisibleProperty =
            BindableProperty.Create(nameof(IsAndroidLeftNavBarItemVisibleProperty), typeof(bool), typeof(DashboardTabPage), false);

        public bool IsAndroidLeftNavBarItemVisible
        {
            get { return (bool)GetValue(IsAndroidLeftNavBarItemVisibleProperty); }
            set { SetValue(IsAndroidLeftNavBarItemVisibleProperty, value); }
        }

        private bool menuIsOpen = false;
        private int lastSelectedItemIndex;
        public event EventHandler<int> DashboardBadgeEvent;

        public DashboardTabPage()
        {
            InitializeComponent();
            Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific.TabbedPage.SetIsSwipePagingEnabled(this, false);

            var navigationService = new NavigationService();

            var alertPage = NavigationService.GetNewPage<AlertsViewModel>();
            ((AlertsViewModel)alertPage.BindingContext).BadgeEvent -= DashboardTabPageBadgeEvent;
            ((AlertsViewModel)alertPage.BindingContext).BadgeEvent += DashboardTabPageBadgeEvent;

            var alertNavigationPage = new NavigationPage(alertPage);
            alertNavigationPage.Title = "AlertsText".Localized();
            alertNavigationPage.IconImageSource = "gui_tab_alerts";
            alertNavigationPage.BarTextColor = (Color)AppHelpers.GetResource("DarkGrey");

            var toolbarItem = new ToolbarItem();
            toolbarItem.Text = "ArchiveText".Localized();
            toolbarItem.IconImageSource = "gui_tool_archive_2";
            toolbarItem.SetBinding(MenuItem.CommandProperty, new Binding("ArchiveListCommand"));
            alertPage.ToolbarItems.Add(toolbarItem);

            alertPage.Disappearing -= AlertPage_Disappearing;
            alertPage.Disappearing += AlertPage_Disappearing;

            alertPage.Appearing -= AlertPage_Appearing;
            alertPage.Appearing += AlertPage_Appearing;

            var menuPage = NavigationService.GetNewPage<AppMenuViewModel>();
            var homePage = NavigationService.GetNewPage<MyTasksViewModel>();

            if(DeviceInfo.Platform == DevicePlatform.Android)
            {
                if (menuPage != null)
                {
                    menuPage.AutomationId = "MenuPageTab";
                    Children.Add(menuPage);
                }

                if (homePage != null)
                {
                    homePage.IconImageSource = "gui_tab_home";
                    homePage.AutomationId = "HomePageTab";
                    Children.Add(homePage);
                }

                if (!MainService.Instance.HideAlertsSection)
                {
                    alertPage.AutomationId = "AlertPageTab";
                    Children.Add(alertNavigationPage);
                }
            }
            else if(DeviceInfo.Platform == DevicePlatform.iOS)
            {
                if (!MainService.Instance.HideAlertsSection)
                {
                    alertPage.AutomationId = "AlertPageTab";
                    Children.Add(alertNavigationPage);
                }

                if (homePage != null)
                {
                    homePage.IconImageSource = "gui_tab_home";
                    homePage.AutomationId = "HomePageTab";
                    Children.Add(homePage);
                }
                
                if (menuPage != null)
                {
                    menuPage.AutomationId = "MenuPageTab";
                    Children.Add(menuPage);
                }
            }

            var indexPage = Children.IndexOf(homePage);

            CurrentPage = Children[indexPage];
            lastSelectedItemIndex = indexPage;

            CurrentPageChanged += (object sender, EventArgs e) =>
            {
                ///adding this make sure alert tab updates on navigating to.
                if (Children.IndexOf(CurrentPage) == 0)
                {
                    var alertsViewModel = alertPage.BindingContext as AlertsViewModel;
                    if (alertsViewModel != null && !alertsViewModel.IsRefreshing)
                        alertsViewModel.RefreshCommand.Execute(null);
                }

                HandleCurrentPageChanged(sender, e);
            };
            NavigationPage.SetHasNavigationBar(this, false);
        }


        private void AlertPage_Appearing(object sender, EventArgs e)
        {
            IsAndroidLeftNavBarItemVisible = false;
        }

        private void AlertPage_Disappearing(object sender, EventArgs e)
        {
            IsAndroidLeftNavBarItemVisible = true;
        }

        public void DashboardTabPageBadgeEvent(object sender, int count)
        {
            DashboardBadgeEvent?.Invoke(null, count);
        }

        void HandleCurrentPageChanged(object sender, EventArgs e)
        {
            var i = Children.IndexOf(CurrentPage);
            Debug.WriteLine("Page No:" + i);

            var menuPageType = NavigationService.GetPageType<AppMenuViewModel>();
            if (CurrentPage.GetType() != menuPageType)
            {
                lastSelectedItemIndex = i;
                return;
            }

            MenuOpenClose(!menuIsOpen);
        }

        public void MenuOpenClose(bool isPresented)
        {
            var masterpage = MainService.HomePage.Value as DashboardMasterPage;

            if (masterpage is DashboardMasterPage)
            {
                FlyoutPage homePage = masterpage;
                homePage.IsPresentedChanged -= HomePageIsPresentedChanged;
                homePage.IsPresentedChanged += HomePageIsPresentedChanged;

                homePage.IsPresented = isPresented;
                menuIsOpen = isPresented;

                CurrentPage = Children[lastSelectedItemIndex];
            }
        }

        void HomePageIsPresentedChanged(object sender, EventArgs e)
        {
            var masterpage = MainService.HomePage.Value as DashboardMasterPage;

            if (masterpage is DashboardMasterPage)
            {
                FlyoutPage homePage = masterpage;
                menuIsOpen = homePage.IsPresented;
            }

            var menuPageType = NavigationService.GetPageType<AppMenuViewModel>();
            var appMenuViewModel = Children.FirstOrDefault(p => p.GetType() == menuPageType)?.BindingContext as AppMenuViewModel;
            if (appMenuViewModel != null)
            {
                appMenuViewModel.IsMenuPresented = menuIsOpen;
            }

            CurrentPage = Children[lastSelectedItemIndex];
        }
    }

The same code was working fine in Xamarin Forms version. Now I am migrating it to MAUI and there I am facing this issue.

Starry Night 600 Reputation points

2025-10-24T02:22:19.7666667+00:00

Yes, it is just the case as you said. You can create a new issue for this problem here: https://github.com/dotnet/maui/issues.

1 answer

Your answer

Starry Night 600 Reputation points

2025-10-24T02:22:19.7666667+00:00

Yes, it is just the case as you said. You can create a new issue for this problem here: https://github.com/dotnet/maui/issues.

Answer 1

Tony Dinh (WICLOUD CORPORATION) 3,585 Microsoft External Staff

Hello @Sreenivasan, Sreejith !

The behavior you’re seeing comes from a change in how FlyoutPage manages its lifecycle in .NET MAUI compared to Xamarin.Forms. In Xamarin.Forms, the IsPresented property and navigation stack were more forgiving. In MAUI, however, the flyout lifecycle is stricter, and reassigning CurrentPage while toggling the flyout interrupts the process.

That’s why your menu opens the first time, but fails to reopen if you’re still on the Dashboard tab — the forced CurrentPage reset cancels the flyout. Once you switch tabs, the state is refreshed, and the menu works again.

Here are some approaches you can choose to fix it:

Remove the CurrentPage reset in MenuOpenClose and HomePageIsPresentedChanged

The main issue is the CurrentPage = Children[lastSelectedItemIndex] line. Removing it usually resolves the problem:

public void MenuOpenClose(bool isPresented)
{
    if (MainService.HomePage.Value is DashboardMasterPage masterpage)
    {
        FlyoutPage homePage = masterpage;
        homePage.IsPresentedChanged -= HomePageIsPresentedChanged;
        homePage.IsPresentedChanged += HomePageIsPresentedChanged;
 
        homePage.IsPresented = isPresented;
        menuIsOpen = isPresented;
 
        // CurrentPage = Children[lastSelectedItemIndex]; // Remove this in MAUI
    }
}
 
void HomePageIsPresentedChanged(object sender, EventArgs e)
{
    if (MainService.HomePage.Value is DashboardMasterPage masterpage)
    {
        FlyoutPage homePage = masterpage;
        menuIsOpen = homePage.IsPresented;
    }
 
    var menuPageType = NavigationService.GetPageType<AppMenuViewModel>();
    var appMenuViewModel = Children.FirstOrDefault(p => p.GetType() == menuPageType)?.BindingContext as AppMenuViewModel;
    if (appMenuViewModel != null)
    {
        appMenuViewModel.IsMenuPresented = menuIsOpen;
    }
 
    // CurrentPage = Children[lastSelectedItemIndex]; // Remove this in MAUI
}

Set FlyoutPage.FlyoutLayoutBehavior

In MAUI, the default flyout layout can vary by platform. To avoid conflicts, explicitly set it in your DashboardMasterPage:

FlyoutLayoutBehavior = FlyoutLayoutBehavior.Single;

This ensures the flyout overlays the detail page instead of trying to push it aside.

Restore the last tab only when needed

If you still want to return to the last tab after the menu is opened, handle it in HandleCurrentPageChanged instead of forcing it during the flyout toggle:

void HandleCurrentPageChanged(object sender, EventArgs e)
{
    var i = Children.IndexOf(CurrentPage);
    var menuPageType = NavigationService.GetPageType<AppMenuViewModel>();
 
    if (CurrentPage.GetType() == menuPageType)
    {
        MenuOpenClose(true);
        // Don’t reset CurrentPage here
    }
    else
    {
        lastSelectedItemIndex = i;
    }
}

I hope this clears things up!

Sreenivasan, Sreejith 80 Reputation points

2025-10-24T07:05:03.0266667+00:00
@Tony Dinh (WICLOUD CORPORATION) Thanks for your answer.

I tried it but not working as expected.

First of all I am getting below error:

'FlyoutLayoutBehavior' does not contain a definition for 'Single' and no accessible extension method 'Single' accepting a first argument of type 'FlyoutLayoutBehavior' could be found (are you missing a using directive or an assembly reference?)

For the below line:

FlyoutLayoutBehavior = FlyoutLayoutBehavior.Single;

So I tried without this line and below is my findings.

When I tap on the menu, the popup menu opens from the right side as expected. However, the same menu page is also displayed in the background, covering the entire screen. Please refer to the screenshot below.

When I close the menu popup, the full-screen menu remains visible in the UI, as shown below.

If I tap on the menu at this point, it does not open. However, if I navigate to the Home or Alerts screen and then tap on the menu, the menu opens again — but with the full-page background issue shown in the first screenshot.
Tony Dinh (WICLOUD CORPORATION) 3,585 Reputation points Microsoft External Staff

2025-10-24T08:10:42.9633333+00:00
Hello @Sreenivasan, Sreejith !

Thanks for your update, base from your provided, this actually clarifies the root of the problem. What you’re seeing now isn’t just the IsPresented timing issue anymore, it’s that your menu page is being added as a child tab inside the TabbedPage and also being used as the Flyout of the FlyoutPage. That’s why:

The flyout opens correctly on the right side (that’s the FlyoutPage.Flyout doing its job).

But you also see the same menu page rendered full‑screen in the background (because you added it to Children of your TabbedPage).

When you close the flyout, the tabbed child is still visible, so it looks like the menu is “stuck” open.

FlyoutLayoutBehavior.Single didn’t compile

In .NET MAUI, the enum values are:

FlyoutLayoutBehavior.Default FlyoutLayoutBehavior.Popover FlyoutLayoutBehavior.Split

There is no Single. That was a Xamarin.Forms value. In MAUI, Popover is the equivalent of “overlay on top of detail.”

How to fix the duplicate menu issue

You need to stop adding the menu page as a tab. Right now you’re doing:

if (menuPage != null) { menuPage.AutomationId = "MenuPageTab"; Children.Add(menuPage); // <-- This is the problem }

That line is what causes the menu to appear as a full‑screen tab. In MAUI, the FlyoutPage already manages the menu. You don’t need to (and shouldn’t) add it to the TabbedPage.Children.

For correct structure, ensure that:

FlyoutPage.Flyout → your AppMenuPage (menu).

FlyoutPage.Detail → your DashboardTabPage (the tabbed dashboard).

DashboardTabPage.Children → only your actual content tabs (Home, Alerts, etc.).

So in your DashboardTabPage constructor, remove the Children.Add(menuPage) block entirely. Only add homePage, alertPage, etc.

Controlling flyout behavior (Alternative)

If you want the flyout to always overlay instead of splitting on tablets/desktop, set:

FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover;

in your DashboardMasterPage (the FlyoutPage).

I hope this helps!
Sreenivasan, Sreejith 80 Reputation points

2025-10-24T09:03:19.48+00:00

@Tony Dinh (WICLOUD CORPORATION)

If I stop adding the menu page as a tab, then I can see only 2 tabs in the footer. Menu option will no show on tab. Without menu option how we can open it?
Tony Dinh (WICLOUD CORPORATION) 3,585 Reputation points Microsoft External Staff

2025-10-24T11:05:36.5366667+00:00
Hello @Sreenivasan, Sreejith !

In .NET MAUI the Flyout is not supposed to be “just another tab.” In Xamarin.Forms people often hacked it in as a tab, but in MAUI the framework expects you to open the flyout through a gesture or a button, not by selecting a tab.

Here are the common, supported ways that you can expose the menu without making it a tab:

Use the built‑in flyout gesture

On iOS/Android, users can swipe from the edge of the screen to open the flyout.

This works automatically if your root page is a FlyoutPage.

Add a toolbar button (recommended) Put a hamburger icon in your DashboardTabPage’s navigation bar or toolbar that toggles the flyout:

ToolbarItem menuButton = new ToolbarItem { IconImageSource = "menu.png", // your hamburger icon Priority = 0, Order = ToolbarItemOrder.Primary }; menuButton.Clicked += (s, e) => { if (Application.Current.MainPage is FlyoutPage flyoutPage) { flyoutPage.IsPresented = !flyoutPage.IsPresented; } }; ToolbarItems.Add(menuButton);

This gives you a visible “Menu” entry point without polluting the tab bar.

Add a floating action button or custom control If you want the menu button to be more prominent, you can place a floating action button (FAB) or a custom header button that toggles IsPresented.

If you must mimic the old “Menu tab”

You can fake it by adding a dummy tab with a menu icon, but instead of navigating to a page, intercept its selection and toggle the flyout:

var menuTab = new ContentPage { Title = "Menu", IconImageSource = "menu.png" }; Children.Add(menuTab); CurrentPageChanged += (s, e) => { if (CurrentPage == menuTab) { if (Application.Current.MainPage is FlyoutPage flyoutPage) flyoutPage.IsPresented = true; // Immediately revert back to the last real tab CurrentPage = Children[lastSelectedItemIndex]; } else { lastSelectedItemIndex = Children.IndexOf(CurrentPage); } };

This way the tab bar still shows a “Menu” icon, but it never actually displays the menu as a full page — it just triggers the flyout.

For best practice, I suggest that you don’t treat the menu as a tab. Use a toolbar button or rely on gestures.

Hope this helps!

Share via

MAUI: Issue with displaying Flyout menu page

1 answer

Your answer