Shell in Xamarin Forms | How to Create Xamarin Forms App Using Shell?

Shell in Xamarin Forms | How to Create Xamarin Forms App Using Shell?

Hi Xamarin Developer, Today I will discuss about Shell, In this article we will see about How to Create Xamarin Forms App Using Shell?, Shell in Xamarin Forms, Shell Flyout Header, Shell FlyoutItem, Tab.

Let’s Start..

What is Shell in Xamarin Forms?

Basically, Shell is container that reduces Complexity mobile app development and provides features that any mobile  app requires.

Advantages :

• You can define your app view hierarchy in single place
• Supports URI based navigation
• Provides Common Navigation
• Provides the Integrated Search Handler
• Increases Rendering Speed
• Reduces Memory Consumption

How to Create Xamarin Forms App using Shell ?

Let’s Start,

Step 1: Create blank Xamarin Forms App in Visual Studio (I am using VS2019).

Here, I created Blank Xamarin Forms app, to start with shell you need to install Xamarin.Forms 4.X package from Nuget.

Note: you should install Xamarin.Forms 4.x version.

Step 2 : Add New Content Page (AppShell)

Here, I added a new page called AppShell.xaml

Step 3: Modify Xaml to take advantage of Shell.

Modifying AppShell.xaml 

Before :

After : 

Here i changed ContentPage class with Shell

Step 4: In Shell you can use Flyout and Tab 

What is Flyout ? 

Flyout means your app root menus which you can say (Master Page, Drawer Page) which will access by hamburger icon or swiping left.

In shell you can set below Flyout properties

• FlyoutIcon : you can set hamburger icon 
• FlyoutBehavior: you can set flyout behavior 
• Disabled : once you set FlyoutBehavior = Diasbled, Flyout will be disabled then user cannot access Flyout
• Flyout: once you set FlyoutBehavior = Flyout, user can open and closed 
• Locked: once you set FlyoutBehavior = Locked, flyout can't be closed by the user, and that it doesn't overlap content.

Let’s set Flyout Properties:

<Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FirstShellApp.AppShell" FlyoutBehavior="Flyout"> <!--Here i changed FlyoutBehavior--> </Shell>

Step 5: Let's define Flyout Header:

What is Flyout Header?

Flyout header means where you can set your header as logo or may be user details or image, like below:

Xaml Code:

You can set FlyoutHeaderBehavior like below:

1. FlyoutHeaderBehavior="CollapseOnScroll"  : header will collapse on scroll
2. FlyoutHeaderBehavior="Default"  : it will set platform default behavior
3. FlyoutHeaderBehavior="Scroll" : flyout header scrolls out of view as the user scrolls the items
4. FlyoutHeaderBehavior="Fixed" : header will not changed when user scroll

Step 6 : Let's define FlyoutItems:

here, i added a FlyoutItem which will appears in Flyout as Flyout menu, you can set icon and title using Icon and Title Property.

To define your view  used ShellContent , Whenever user clicked on menu your defined view will appear.

You can set below Properties to FlyoutItem:
1. FlyoutDisplayOptions="AsSingleItem"  : user will see single menu
2. FlyoutDisplayOptions="AsMultipleItems" : user will see group menu

What is ShellContent?
1. ShellContent represents ContentPage object in your shell app 
2. ShellContent object is child of Tab.
3. If you are defining more than one ShellContent in Tab then it navigating from top Tab

Step 7 : Set MainPage in your App.cs class

Let's see result:

Android:

iOS(iPhone):

You can also read about shell from Xamarin official site:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/