At the end of May, Microsoft released the Xamarin.Forms Shell release – a shell aimed at simplifying the creation of cross-platform mobile applications and including the following functionality: side menu, tabs, navigation, search.

Let’s start by creating an empty Xamarin.Forms project in Visual Studio 2019. Please note, at the moment, Shell officially supports only 2 platforms: iOS and Android, UWP is still under development. I recommend immediately updating all nuget packages in the solution.

Next, we will create the AppShell class derived from Shell, for this we add the XAML file to the general project with the following contents:

AppShell.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="HelloShell.AppShell">

</Shell>

AppShell.xaml.cs

namespace HelloShell
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

then in the file App.xaml.cs we indicate that AppShell will act as MainPage:

public App()
{
    InitializeComponent();

    //MainPage = new MainPage();
    MainPage = new AppShell();
}

and a couple of ContentPage pages: Page1 and Page2. Also, images will be used in our test application, so we will add them to platform-dependent projects, for androids in the Resources => drawable folder, and for ios in the Resources folder.

The side menu (often called the hamburger menu) is a pop-up menu that can be called up by pressing a button or with a special gesture and includes a header (Header), a list of pages (Flyout Items) and a menu (Flyout Menu)

AppShell.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:HelloShell"
       x:Class="HelloShell.AppShell">

    <Shell.FlyoutHeader>
        <StackLayout BackgroundColor="White" Padding="10">
            <Image HeightRequest="100" Source="xamarin.png" />
            <Label Text="Header" />
            <Label Text="Привет Хабр!"/>
        </StackLayout>
    </Shell.FlyoutHeader>
    
    <FlyoutItem Title="MainPage" Icon="xamarin.png">
        <ShellContent ContentTemplate="{DataTemplate pages:MainPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Page1" Icon="xamarin.png">
        <ShellContent ContentTemplate="{DataTemplate pages:Page1}"/>
    </FlyoutItem>
    <FlyoutItem Title="Page2" Icon="xamarin.png">
        <ShellContent ContentTemplate="{DataTemplate pages:Page2}"/>
    </FlyoutItem>
    <MenuItem Clicked="MenuItem_Clicked" Text="Меню" IconImageSource="item.png" />

</Shell>

AppShell.xaml.cs

namespace HelloShell
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }

        private async void MenuItem_Clicked(object sender, System.EventArgs e)
        {
            await DisplayAlert("","Привет Хабр!","OK");
        }
    }
}

Xamarin.Forms Shell as a root template can support lower and upper tabs, as well as their combination:

AppShell.xaml.cs

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:HelloShell"
       x:Class="HelloShell.AppShell">

    <TabBar>
        <Tab Title="MainPage" Icon="xamarin.png">
            <ShellContent ContentTemplate="{DataTemplate pages:MainPage}" />
        </Tab>

        <Tab Title="Page1" Icon="xamarin.png">
            <ShellContent Title="Main Page"
                      Icon="xamarin.png"
                      ContentTemplate="{DataTemplate pages:MainPage}" />
            <ShellContent Title="Page2"
                      Icon="xamarin.png"
                      ContentTemplate="{DataTemplate pages:Page2}" />
        </Tab>

        <Tab IsEnabled="False" Title="Page2" Icon="xamarin.png">
            <ShellContent ContentTemplate="{DataTemplate pages:Page2}" />
        </Tab>
    </TabBar>

</Shell>