How to Fix Blank Space with Locked Flyout in .NET MAUI Shell

When the Flyout in a Shell page is set to Locked, there is a blank space below the Flyout. To resolve this, dynamically adjust the Flyout type in the window events.
Add an event for window size changes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66


namespace RuiChao.App
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("Ngo9BigBOggjHTQxAR8/V1NHaF1cWWhIfEx1RHxQdld5ZFRHallYTnNWUj0eQnxTdEZiW35ccHdQR2VcUEN/Xw==");
        }

        protected override Window CreateWindow(IActivationState? activationState)
        {
            var size = WindowControl.GetOprationSystemResolution();
            if (Config.Desktop)
            {
                int width = 1380;
                int height = 768;

                DesktopShell? desktopShellService = Handler.MauiContext!.Services.GetService<DesktopShell>();
                if (desktopShellService != null)
                {
                    Window window = new Window(desktopShellService)
                    {
                        Width = width,
                        Height = height,
                        X = (size.Width - width) / 2,
                        Y = (size.Height - height) / 2
                    };
                    window.SizeChanged += Window_SizeChanged;
                    window.Destroying += (s, e) =>
                    {                        
                        // Custom logic
                    };
                    return window;
                } 
                else
                {
                    return new Window(new DesktopShell(null!))
                    {
                        Width = width,
                        Height = height,
                        X = (size.Width - width) / 2,
                        Y = (size.Height - height) / 2
                    };
                }
            }
            else
                return new Window(new MobileShell())
                {
                    Width = 700,
                    Height = 500,
                    X = 100,
                    Y = 100
                };
        }

        private void Window_SizeChanged(object? sender, EventArgs e)
        {
            Window window = (Window)sender!;
            DesktopShell shell = (DesktopShell)window.Page!;
            // The method below is defined in DesktopShell
            shell.DesktopShell_SizeChanged(window.Height);
            //window.Page!.HeightRequest = window.Height;
        }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


using RuiChao.App.ViewModels;
using RuiChao.Resource.Classes.Maui;

namespace RuiChao.App
{
    public partial class DesktopShell : BaseShell<DesktopShellViewModel>
    {
        public DesktopShell(DesktopShellViewModel desktopShellViewModel) : base(desktopShellViewModel)
        {
            InitializeComponent();
            Navigated += DesktopShell_Navigated;
            Navigating += DesktopShell_Navigating;
        }

        private void DesktopShell_Navigating(object? sender, ShellNavigatingEventArgs e)
        {
            CurrentPage.SizeChanged -= CurrentPage_SizeChanged;
        }

        private void DesktopShell_Navigated(object? sender, ShellNavigatedEventArgs e)
        {
            CurrentPage.SizeChanged += CurrentPage_SizeChanged;
        }

        private void CurrentPage_SizeChanged(object? sender, EventArgs e)
        {
            grid.HeightRequest = CurrentPage.Height;
        }

        public void DesktopShell_SizeChanged(double height)
        {
            Task.Delay(1000);
            if (CurrentPage != null)
            {
                grid.HeightRequest = CurrentPage.Bounds.Height;
            }
            if (FlyoutBehavior != FlyoutBehavior.Locked)
            {
                // May cause a "Converter failed" error
                FlyoutBehavior = FlyoutBehavior.Locked;
            }

            //CurrentPage.SizeChanged -= Button_Clicked_4;
            //CurrentPage.SizeChanged += Button_Clicked_4;
        }
    }
}