How to detect the flyout Open and Close in MAUI

Question

I would like to detect the flyout open and closing event

Answer 1

Hello,

If you are using .NET MAUI Shell flyout, the flyout can be programmatically opened and closed by setting the Shell.FlyoutIsPresented bindable property to a boolean value that indicates whether the flyout is currently open. See .NET MAUI Shell flyout - .NET MAUI | Microsoft Learn

Then, you could detect the Shell.FlyoutIsPresented Property

  public AppShell()
  {
      InitializeComponent();
      PropertyChanged += AppShell_PropertyChanged;
  }
 
  private void AppShell_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
  {
     
      if (e.PropertyName == "FlyoutIsPresented")
      {
          if (FlyoutIsPresented)
          {
              //open
          }
          else
          {
              //close
          }
      }
  }

If you are using FlyoutPage, you could detect the FlyoutPage.IsPresented Property.

For example:

public partial class AppFlyout : FlyoutPage// in your FlyoutPage class
{
	public AppFlyout()
	{
		InitializeComponent();
        PropertyChanged += AppFlyout_PropertyChanged;
#if WINDOWS
		Loaded += OnLoaded;
		return;
		void OnLoaded(object? sender, EventArgs e)
		{
			Loaded -= OnLoaded;
			((NavigationView)Handler!.PlatformView!).PaneClosed += (_, _) => IsPresented = false;
		}
#endif
    }
 
    private void AppFlyout_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "IsPresented")
        {
            if (IsPresented)
            {
                //open
            }
            else
            {
                //close
            }
        }
    }
}

FlyoutPage also defines an IsPresentedChanged event, that's raised when the IsPresented property changes value.

Update

---

The issue i'm facing in windows is, when ever the flyout is opened and if I click on the background flyout is closing, so at that time, event is not getting triggered, flyout is presented is still true, this is causing issue for me.

Yes, I reproduce your issue.

And this is a known issue that has been reported at Github- FlyoutPage IsPresented does not work when user opens flyout by clicking on hamburger · Issue #15767 · dotnet/maui

Please follow the progress at GitHub or add comments to let them know your concerns. Thanks for your understanding.

Best Regards,

Wenyan Zhang

---

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.