Responsive FlyoutBehavior

Description

Currently there are 3 options available for the FlyoutBehavior setting: Disabled, Flyout and Locked It’d be nice to have a responsive setting which reacts to the width of the screen, Similar to how the Windows 10 & 11 settings menu has been implemented.

Example:

https://user-images.githubusercontent.com/4095127/168296567-c8edc9ec-de8c-42e7-86c1-2290072499b0.mp4

In the past the Xamarin.Forms FlyoutPage featured the following options: Default, Popover, Split, SplitOnLandscape, SplitOnPortrait. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#control-the-detail-page-layout-behavior

However,

Important The value of the FlyoutLayoutBehavior property only affects applications running on tablets or the desktop. Applications running on phones always have the Popover behavior.

Additionally I don’t believe the FlyoutLayoutBehavior was able to react to window sized changed events.

Public API Changes

<Shell x:Class="ServiceDemo.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ServiceDemo"
       Shell.FlyoutBehavior="Responsive">

Intended Use-Case

This feature would be useful in Windows & macOS applications as the content area can be resized. Additionally this feature is common on tablet formfactors, specifically when transitioning from landscape to portrait orientation.

[vhugogarcia]

Hello @Wynadorn and @pekspro ,

I was able to implement a truly SizeChanged event by using Microsoft.Maui.Devices.DeviceDisplay, I created a post in dev.to so other can find this information as well easily: https://dev.to/vhugogarcia/responsive-flyout-in-net-maui-4ll1

I hope it helps you!

Regards, Victor

cc: @pictos

[stcmz]

The fun part is that a page’s size changes upon changing the FlyoutBehavior. So this code is actually an infinite loop.

You need to add the width of the flyout while doing the comparison to avoid infinite loop.

// define your MinPageWidth and FlyoutWidth here

if (Width <= MinPageWidth)
    shell.FlyoutBehavior = FlyoutBehavior.Flyout;
else if (Width > MinPageWidth + FlyoutWidth)
    shell.FlyoutBehavior = FlyoutBehavior.Locked;