FlyoutPage issues on iOS Tablets

Description

FlyoutPage in tablets doesn’t work as expected with default FlyoutLayoutBehavior.

In Android:

• the detail is not changed when the property is changed

In iOS:

• if the app starts in landscape it throws the exception pasted at the end of this bug report

In Both platforms:

• rotating the device doesn’t refresh the rendered rectangle

Steps to Reproduce

All the behaviors can be reproduced with this project: Sample.zip

The only relevant code is this:

public App()
{
    InitializeComponent();

    var flyout = new FlyoutPage
    {
        Detail = new NavigationPage(new ContentPage { Background = Colors.Red })
    };

    var button = new Button { Text = "Open Green Page" };
    button.Clicked += (s, e) => flyout.Detail =
        new NavigationPage(new ContentPage { Background = Colors.Green });

    flyout.Flyout = new ContentPage { Content = button, Title = "Title" };

    MainPage = flyout;
}

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

All

Did you find any workaround?

Using Popover as the flyout behavior that is not the best approach for landscape. Also, this leads to a very wide menu in iPads:

Relevant log output

Microsoft.Maui.Platform.ToPlatformException: <Microsoft_Maui_Controls_Handlers_Compatibility_PhoneFlyoutPageRenderer: 0x7f8a5d153670> found for Microsoft.Maui.Controls.FlyoutPage is incompatible ---> System.NullReferenceException: Object reference not set to an instance of an object.
  at at Microsoft.Maui.Controls.Handlers.Compatibility.PhoneFlyoutPageRenderer.LayoutChildren(Boolean animated)
  at at Microsoft.Maui.Controls.Handlers.Compatibility.PhoneFlyoutPageRenderer.set_Presented(Boolean value)
  at at Microsoft.Maui.Controls.Handlers.Compatibility.PhoneFlyoutPageRenderer.SetElement(VisualElement element)
  at at Microsoft.Maui.Controls.Handlers.Compatibility.PhoneFlyoutPageRenderer.Microsoft.Maui.IElementHandler.SetVirtualView(IElement view)
  at at Microsoft.Maui.Controls.Element.SetHandler(IElementHandler newHandler)
  at at Microsoft.Maui.Controls.Element.set_Handler(IElementHandler value)
  at at Microsoft.Maui.Controls.VisualElement.Microsoft.Maui.IElement.set_Handler(IElementHandler value)
  at at Microsoft.Maui.Platform.ElementExtensions.ToHandler(IElement view, IMauiContext context)
  --- End of inner exception stack trace ---
  at at Microsoft.Maui.Platform.ElementExtensions.ToHandler(IElement view, IMauiContext context)
  at at Microsoft.Maui.Platform.ElementExtensions.ToPlatform(IElement view, IMauiContext context)
  at at Microsoft.Maui.Platform.ElementExtensions.ToUIViewController(IElement view, IMauiContext context)
  at at Microsoft.Maui.Handlers.WindowHandler.MapContent(IWindowHandler handler, IWindow window)
  at at Microsoft.Maui.PropertyMapper`2.<>c__DisplayClass5_0[[Microsoft.Maui.IWindow, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[Microsoft.Maui.Handlers.IWindowHandler, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<Add>b__0(IElementHandler h, IElement v)
  at at Microsoft.Maui.PropertyMapper.UpdatePropertyCore(String key, IElementHandler viewHandler, IElement virtualView)
  at at Microsoft.Maui.PropertyMapper.UpdateProperties(IElementHandler viewHandler, IElement virtualView)
  at at Microsoft.Maui.Handlers.ElementHandler.SetVirtualView(IElement view)
  at at Microsoft.Maui.Controls.Element.SetHandler(IElementHandler newHandler)
  at at Microsoft.Maui.Controls.Element.set_Handler(IElementHandler value)
  at at Microsoft.Maui.Platform.ElementExtensions.SetHandler(INativeObject nativeElement, IElement element, IMauiContext context)
  at at Microsoft.Maui.Platform.ElementExtensions.SetWindowHandler(UIWindow platformWindow, IWindow window, IMauiContext context)
  at at Microsoft.Maui.Platform.ApplicationExtensions.CreatePlatformWindow(IApplication application, UIWindowScene windowScene, NSDictionary[] states)
  at at Microsoft.Maui.Platform.ApplicationExtensions.CreatePlatformWindow(IUIApplicationDelegate platformApplication, IApplication application, UIApplication uiApplication, NSDictionary launchOptions)
  at at Microsoft.Maui.MauiUIApplicationDelegate.FinishedLaunching(UIApplication application, NSDictionary launchOptions)
  at at UIKit.UIApplication.Main(String[] args, Type principalClass, Type delegateClass)
  at MauiApp2.Program.Main(String[] args) in /Users/diego/Downloads/MauiApp2/MauiApp2/Platforms/iOS/Program.cs:13

[drasticactions]

Hey folks, I talked with @PureWeen about this bug and I’m going to try and give a hand to help out here.

@dirivero Checking your sample against .NET 7, I believe your issues are fixed. I could not repro it on Android, Catalyst, nor iOS on iPad, and I think the linked issues in this PR took care of it. If you could verify it on your end with the newest .NET 7 MAUI build, that would be great, and thank you!

For @breenbob, you fixed your Android issue and @PureWeen started working on the iOS fix. I believe your issue is different from the original issue on this bug, so if it’s okay with you, I would like to move it to a new bug that we can track and close this one (Pending that it is fixed).

[PureWeen]

I pushed up a version of the fixed renderer here if anyone wants to install the nuget, test, and give me feedback.