Flyout IsPresented is property is not working as expected

Question

I tried to determine whether the Flyout is presented using this approach: https://learn.microsoft.com/en-us/answers/questions/2200916/how-to-detect-the-flyout-open-and-close-in-maui

It works fine in most cases, but I encountered an issue in a specific scenario.

I need to display a popup beside the Flyout menu, To position the popup correctly, I need to check whether the Flyout is IsPresented or not and adjust the popup’s position accordingly.

FYI - I'm using left compact for the Flyout Menu.

Whenever I click the Hamburger Menu button:

• The IsPresentedChanged event is triggered.
• The Flyout opens, and IsPresented is set to true.
• Clicking the Hamburger Menu button again closes the Flyout, and IsPresented becomes false.

This works as expected.

However, if I open the Flyout (where IsPresented = true) and then click outside the Flyout to close it, the IsPresentedChanged event does not trigger, even though the Flyout closes.

I had tried this in the windows.

Answer 1

Hello,

By using the following code to listen to changes in the IsPresented property using data binding, you will get the expected changes regardless of whether you close the Flyout using the hamburger button or clicking outside the range.

Code sample:

namespace MauiApp9
{
    public partial class AppShell : Shell, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
 
        private bool isPresent;
 
        public bool IsPresent
        {
            get { return isPresent; }
            set
            {
                if (value != isPresent)
                {
                    isPresent = value;
                    Console.WriteLine(value);
                    OnPropertyChanged();
                }
            }
        }
 
 
        public void OnPropertyChanged([CallerMemberName] string name = "") =>
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        public AppShell()
        {
            InitializeComponent();
            BindingContext = this;
            IsPresent = true;
        }
    }
}

in code-behind:

<Shell
    x:Class="MauiApp9.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp9"
    Shell.FlyoutBehavior="Flyout"
    FlyoutIsPresented="{Binding IsPresent}"
    Title="MauiApp9">
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<ShellContent
    Title="Home"
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage" />
</FlyoutItem>

 
</Shell>

Best Regards,

Alec Liu.

---

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.