Shell Flyout in .NET MAUI

Introduction

In this blog, we will learn how to Shell Flyout 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 ShellFlyoutSamplePage (XAML Content Page)inside the Views folder and add the following code,

ShellFlyoutSamplePage.xaml

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:MauiSampleAppFirst.Views"
       xmlns:sys="clr-namespace:System;assembly=netstandard"
       xmlns:system="clr-namespace:System;assembly=netstandard"
       x:Class="MauiSampleAppFirst.Views.ShellFlyoutSamplePage">
       
      //Add your code here

</Shell>

In ShellFlyoutSamplePage.xaml.cs page 

public partial class FlyoutSamplePage : Shell

Now we will add FlyoutItems,

Go to ShellFlyoutSamplePage.xaml and add,

<FlyoutItem Title="Contacts"  Icon="icon.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate views:ContactListPage}" />
        </Tab>
</FlyoutItem>

<FlyoutItem Title="Settings" Icon="icon.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate views:SettingsPage}" />
        </Tab>
</FlyoutItem>

Adding flyout header,

<!--FlyoutHeader-->
    <Shell.FlyoutHeader>
        <Grid BackgroundColor="Black">
            <Image Aspect="AspectFill"
               Source="icon.jpg"
               Opacity="0.5" />
            <Label
               FontSize="Large" TextColor="White"
               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>
        </Grid>
    </Shell.FlyoutHeader>

Add Flyout footer,

 <!--FlyoutFooter-->
    <Shell.FlyoutFooter>
        <StackLayout BackgroundColor="#c1c1c1">
            <Label Text=".Net MAUI Virendra Thakur"
               TextColor="Black"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
            <Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
               TextColor="Black"
               HorizontalOptions="Center" />
        </StackLayout>
    </Shell.FlyoutFooter>

Now set MainPage in App.xaml.cs file,

MainPage = new ShellFlyoutSamplePage();

Additional Properties

Show flyout backdrop,

FlyoutBackdrop="Black"

Open/Close flyout,

FlyoutIsPresented = true/false;

or

Shell.Current.FlyoutIsPresented = true/false;

Output

Android:

Windows

Git url: https://github.com/Virendra3112/MauiSampleAppFirst.App