Flyout Page in MAUI

 1) Add New page FlyoutPageEXP1.xaml & update code as below , and change "ContentPage" to " FlyoutPage " in below highlighted in yellow color places

<?xml version="1.0" encoding="utf-8" ?>

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiApp1.FlyoutPageEXP1"

             Title="FlyoutPageEXP1" FlyoutLayoutBehavior="Default">

    <FlyoutPage.Flyout>

        <ContentPage Title="My App">

            <Label Text="Hello from Flyout" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"

                    BackgroundColor="Red">

            </Label>

        </ContentPage>

    </FlyoutPage.Flyout>

    <FlyoutPage.Detail>

        <ContentPage>

            <Label Text="Hello from Detail" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"

              BackgroundColor="Blue">

            </Label>

        </ContentPage>

    </FlyoutPage.Detail>

</FlyoutPage>

2) Update FlyoutPageEXP1.xaml.cs page as below & change "ContentPage" to " FlyoutPage " in below highlighted in yellow color places

namespace MauiApp1;

public partial class FlyoutPageEXP1 :FlyoutPage

{

public FlyoutPageEXP1()

{

InitializeComponent();

}

}

3) Go to MainPage.xaml page and add below code

 <Button

                x:Name="BtnFlyoutPageEXP"

                Text="Go to Flyout Page EXP"

               Clicked="BtnFlyoutPageEXP_Clicked"

                HorizontalOptions="Center" />

4) Go to MainPage.xaml.cs page and add below code

private void BtnFlyoutPageEXP_Clicked(object sender, EventArgs e)

{

        Navigation.PushAsync(new FlyoutPageEXP1());

    }

Output:

Then run the application. it will display Main page then click on "Go to Flyout Page EXP" button. it will redirect to Flyout page.

In Flyout page just drag from left side to right side Flyout Section will display as below image. 

Code in Github: https://github.com/adi501/MAUI