Working with FlyoutPage in .NET MAUI

Introduction

In this blog, we are going to learn about how to add FlyoutPage in .Net MAUI.

Prerequisites

Before starting to develop .Net MAUI apps, Visual Studio 2022 version 17.3 or greater needs to be installed with .NET Multi-platform App UI development workload with its default optional installation options.

For .Net iOS apps MAC machine is required along with XCode and Apple Id along with paid Apple Developer program.

Launch Visual Studio 2022 and "Create a new project" in the start window.

Implementation & Code

Add a new page as FlyoutSamplePage (XAML Content Page)inside the Views folder and add the following code,

In FlyoutSamplePage.xaml

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:MauiSampleAppFirst.Views"
            x:Class="MauiSampleAppFirst.Views.FlyoutSamplePage">
            <FlyoutPage.Flyout>
                <local:FlyoutMenuPage x:Name="flyoutPage" />
            </FlyoutPage.Flyout>
            <FlyoutPage.Detail>
                
            </FlyoutPage.Detail>
</FlyoutPage>

In FlyoutSamplePage.xaml.cs page

public partial class FlyoutSamplePage : FlyoutPage

Now we will add a Details page for Flyout,

Add a new page as FlyoutDetailsPage (XAML Content Page)inside the Views folder and add the following,

<StackLayout>
        <Label 
            Text="Welcome to FlyoutDetailsPage!"
            TextColor="White" FontAttributes="Bold" FontSize="Large"
            VerticalOptions="CenterAndExpand"    
            HorizontalOptions="CenterAndExpand" />
</StackLayout>

Add details page to FlyoutSamplePage.Xaml page, add the following code under <FlyoutPage.Detail> tag to set details page,

<FlyoutPage.Detail>
      <NavigationPage>
          <x:Arguments>
                <local:FlyoutDetailsPage />
          </x:Arguments>
      </NavigationPage>
</FlyoutPage.Detail>

Add a new model class as FlyoutPageItem and add the following code,

public class FlyoutPageItem
{
  public string Title { get; set; }
  public string MenuIcon { get; set; }
}

Now, we will add a Flyout menu page to show menu items,

Add a new page as FlyoutMenuPage (XAML Content Page)inside the Views folder and add the following code,

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiSampleAppFirst.Models"
             xmlns:pages="clr-namespace:MauiSampleAppFirst.Views"
             x:Class="MauiSampleAppFirst.Views.FlyoutMenuPage"
             xmlns:system="clr-namespace:System;assembly=netstandard"
             Padding="0" BackgroundColor="#f1f1f1"
             IconImageSource="hamburger.png"
             Title=" ">
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                Spacing="10" Margin="10,20">

        <HorizontalStackLayout HorizontalOptions="FillAndExpand" Spacing="5" >
        <Image Aspect="AspectFit" Source="dotnet_bot.png"
               HeightRequest="50" WidthRequest="50"
               VerticalOptions="Center" HorizontalOptions="Start" />

            <Label
               FontSize="Large" TextColor="Black"
               FontAttributes="Bold" VerticalOptions="Center">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Welcome"/>
                            <Span Text="{x:Static system:Environment.NewLine}"/>
                            <Span Text="Virendra Thakur"/>
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </HorizontalStackLayout>
    
        <BoxView HeightRequest="1" BackgroundColor="White"/>

        <CollectionView x:Name="collectionViewFlyout"
                    x:FieldModifier="public"
                    SelectionMode="Single">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                    <Grid Padding="5,10" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding MenuIcon}" />
                    <Label Grid.Column="1"
                           Margin="20,0"
                           Text="{Binding Title}"
                           FontSize="20" TextColor="Black"
                           FontAttributes="Bold"
                           VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
        
        <BoxView HeightRequest="1" BackgroundColor="White"/>

        <StackLayout VerticalOptions="EndAndExpand">
            <Label Text=".Net MAUI Virendra Thakur"
               TextColor="Black"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
            <Label Text="{Binding Source={x:Static system:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
               TextColor="Black"
               HorizontalOptions="Center" />
        </StackLayout>

    </StackLayout>
</ContentPage>

Create ObservableCollection and add data to FlyoutMenuPage.xaml.cs page,

ObservableCollection<FlyoutPageItem> flyoutPageItems = new ObservableCollection<FlyoutPageItem>();
public ObservableCollection<FlyoutPageItem> FlyoutPageItems { get { return flyoutPageItems; } }

Add data to ObservableCollection,

flyoutPageItems.Add(new FlyoutPageItem { Title = "Home", MenuIcon = "Home.png" });
flyoutPageItems.Add(new FlyoutPageItem { Title = "Contacts", MenuIcon = "Contacts.png" });
flyoutPageItems.Add(new FlyoutPageItem { Title = "Settings", MenuIcon = "Settings.png" });

add item source to CollectionView,

collectionViewFlyout.ItemsSource = flyoutPageItems;

Add two pages as we have added in flyoutPageItems,

Add a new page as ContactsPage and SettingsPage (XAML Content Page)inside the Views folder.

We have completed the design part, now we will add navigation to selected menu items,

Go to FlyoutSamplePage.xaml.cs and add the following code,

flyoutPage.collectionViewFlyout.SelectionChanged += OnSelectionChanged;

void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var item = e.CurrentSelection.FirstOrDefault() as FlyoutPageItem;
    if (item != null)
    {
       
        if (!((IFlyoutPageController)this).ShouldShowSplitMode)
            IsPresented = false;

        switch (item.Title)
        {
            case "Home":
                break;
            
            case "Contacts":
                Detail = new NavigationPage(new ContactsPage());
                break; 
            
            case "Settings":
                Detail = new NavigationPage(new SettingsPage());
                break;
        }
    }
}

Now set main page as Flyout page.