For enquiries call:

Phone

+1-469-442-0620

HomeBlogSoftware TestingXamarin Forms Shell: A Comprehensive Guide

Xamarin Forms Shell: A Comprehensive Guide

Published
05th Sep, 2023
Views
view count loader
Read it in
6 Mins
In this article
    Xamarin Forms Shell: A Comprehensive Guide

    Xamarin Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require. Shell has a declarative application structure and can easily create a consistent, dynamic, customized, and featured-filled UI. In other words, the shell is a new replacement for every one of your Xamarin forms pages.

    It provides the out-of-the-box infrastructure to deliver Xamarin forms features, a simplified navigation system, and customization.

    Advantages of Shell

    • Common navigation user experience 
    • Supports URI-based navigation (navigation to any page in the application) 
    • Integrated search handler 
    • Allows a single place to describe the visual hierarchy 
    • Reduces memory consumption 
    • Increases the rendering speed 

    Prerequisites

    Xamarin forms shell is available in Xamarin forms 4.0.0 and supports completely on Android and iOS. It is partially available and is in the experimental phase on UWP. In order to use it in UWP applications, the below code needs to be added in the App class before calling Forms.Init

    global::Xamarin.Forms.Forms.SetFlags("Shell_UWP_Experimental");

    Getting Started: Shell Requirements   

    The specialty of the shell is to have a built-in container that includes a flyout menu, tab page, and navigation page. So let's create a demo app having these features. 

    1. The visual studio also provides a shell template. But let's add a shell to our blank Xamarin forms application for better understanding. 

    Firstly create a blank Xamarin forms project in visual studio and name it “MovieBookingApp”. In this demo app, we are going to have two categories of movies i.e. comedy movies and thriller movies. With these two categories, let's create tabbed pages and a flyout menu. 

    2. Now let's add a new content page with code-behind class to our project and name it “MainShell”. Change a contentPage to Shell in the XAML page. It should look like the below code. 

    <?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:MovieBookingApp"   
x:Class="MovieBookingApp.MainShell"> 
</Shell>

    3. Once the above step is done, similarly change the content page to shell in MainShell.xaml.cs. Our code-behind class has to inherit from Shell.

    using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace MovieBookingApp
{
    public partial class MainShell : Shell
    {
        public MainShell()
        {
            InitializeComponent();
        }
    }
}
    • In the App.xaml.cs constructor, add the below code. Here we are making MainShell the root page. Once done, run the code to ensure your project builds successfully.
    public App()
        {
            InitializeComponent();
            MainPage = new MainShell();
        }

    Flyout Menu

    The flyout menu is also called a side drawer or hamburger menu. We have seen multiple applications having a flyout menu. A flyout menu consists of a header which is optional, menu items(optional), and flyout items, as shown in the below picture.

    Introduction to Xamarin Forms- Shell

    To create the flyout menu, add the below code in MainShell.xaml and you will see the flyout menu coming up after running the project.

    <?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:MovieBookingApp" x:Class="MovieBookingApp.MainShell"> 
    <FlyoutItem Title="Comedy Movies" > 
        <ShellContent ContentTemplate="{DataTemplate pages:ComedyMovies}"/> 
    </FlyoutItem> 
    <FlyoutItem Title="Thriller Movies" > 
        <ShellContent ContentTemplate="{DataTemplate pages:ThrillerMovies}"/> 
    </FlyoutItem> 
</Shell>

    We can set the background color to the flyout menu, which is a bindable property:

    Shell.Flyout.BackgroundColor= Color.Red

    To customise the flyout menu items, by adding the optional header, or adding an icon please read about it in the below link.

    Tabbed Bar

    The navigation in Xamarin forms shell can take place through tabs and does not make use of flyout navigation. In this case, each tab bar can consist of a single shellcontent object or multiple such objects; and each object represents a single content page. The reference image is shown below. 

    Introduction to Xamarin Forms- Shell

    Let's create a tab bar. Add two new content pages with code-behind class to the project and name them “Comedy Movies” and Thriller Movies. Since we don't want a flyout menu here, we are going to disable it as mentioned below.   

    FlyoutBehavior="Disabled"

    Add the below code to create the tab bar.

    <?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" FlyoutBehavior="Disabled" xmlns:pages="clr-namespace:MovieBookingApp" x:Class="MovieBookingApp.MainShell">
   <TabBar >
        <Tab  Title="Comedy Movies" >
            <pages:ComedyMovies Title="Comedy Movies />
        </Tab>
         <Tab Title="Thriller Movies" >
            <pages:ThrillerMovies Title="Thriller Movies" />
        </Tab>
    </TabBar>
</Shell>

    In the above-mentioned code, we can add <shellcontent> in the hierarchy. But we have omitted it because xamarin forms take care of it. The code looks like this:

    <TabBar >
        <Tab  Title="Comedy Movies" >
             <ShellContent ContentTemplate="{DataTemplate pages:ComedyMovies}"/>
        </Tab>
         <Tab Title="Thriller Movies" >
             <ShellContent ContentTemplate="{DataTemplate pages:ThrillerMovies}"/>
        </Tab>
    </TabBar>

    In case one of the tabs has content that you would wish to display, then it can be shown via the top tab bar. The following code shows an example. On clicking the  tab “OtherMovies”, two more sub-tabs display on the top showing “ThrillerMovies” and “DramaMovies”

    <TabBar >
        <Tab  Title="Comedy Movies" >
             <ShellContent ContentTemplate="{DataTemplate pages:ComedyMovies}"/>
        </Tab>
         <Tab Title="Other Movies" >
             <ShellContent ContentTemplate="{DataTemplate pages:ThrillerMovies}"/>
             <ShellContent ContentTemplate="{DataTemplate pages:DramaMovies}"/>
        </Tab>
    </TabBar>

    Navigation

    One of the other special features of the shell is the URI-based navigation system. This means that it allows you to navigate to any page without following the navigation hierarchy. In the same way, back navigation is also possible to any page without following the stack of the pages. 

    You may not worry about your existing navigation in the app because the shell adds route-based navigation to the existing navigation service. So it is still possible to navigate to any page of the application even if the page is not part of the shell. 

    These are shells navigation properties: 

    1. CurrentItem, of type(Flyout) ---> is the currently selected flyout item. 
    2. CurrentState, of type(ShellNavigationState) ---> is the current navigation state of the shell 
    3. BackButtonBehaviour, of type(BackButtonBehaviour)---> defines the back button behavior and is the attached property. 
    4. Current, of type(Shell)---> typed cast alias for Application.Current.MainPage 

    Let's add a new content page and name it as SettingsPage. Since we have not referenced SettingsPage anywhere in our shell, we need to define a route for it in our constructor. 

    public partial class ComedyMovies : ContentPage 
    { 
        public  ComedyMovies() 
        { 
           InitializeComponent(); 
            Routing.RegisterRoute("SettingsPage", typeof(SettingsPage)); 
        } 
}

    Once the route has been registered, here is how you can navigate to the newly created “SettingsPage” on any action you would like to do.

    await Shell.Current.GoToAsync("SettingsPage");

    Similarly, back navigation can be performed with the same piece of code.

    await Shell.Current.GoToAsync("ComedyMovies");

    Page Configuration

    We always like to give a good appearance to our mobile applications. Every developer likes to have control over the look and feel of the app while developing the applications. Shell offers multiple attached properties to do this. Let's see what those properties are. 

    1. Setting the page colors: We can set the page colors using the below-mentioned bindable properties. 

    • Background Color 
    • Foreground Color 
    • Disabled Color 
    • Title Color 
    • Unselected Color 

    Let's use these properties to set the page colors of the shell application. The code below applies colors to all the pages that are part of the shell.   

    <?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:MovieBookingApp" x:Class="MovieBookingApp.MainShell">
BackgroundColor="White"
       ForegroundColor="White"
       TitleColor="Black"
       DisabledColor="Yellow"
       UnselectedColor="IndianRed"
</Shell>

    We can also override them at the page level. Below is the code that shows how to set colors at the page level.

    <ContentPage  
            Shell.BackgroundColor="White" 
             Shell.ForegroundColor="White" 
             Shell.TitleColor="Black" 
             Shell.DisabledColor="Yellow" 
             Shell.UnselectedColor="IndianRed"> 
</ContentPage> 

    2. Enabling Navigation Bar Shadow: We can enable or disable the navigation bar shadow by using the bindable property “NarBarHasShadow”.

    Shell.NavBarHasShadow="False"

    Note: By default, this property is true in android and false in iOS.

    3. Disabling Navigation Bar: We can enable or disable the navigation bar by using the bindable property “NavBarIsVisible”. Setting true makes the navigation bar visible and setting false makes the navigation bar hidden.

    Shell.NavBarIsVisible=”True”  

    Note: By default, this property is true in both android and iOS.  

    4. Disabling Tab Bar: We can enable or disable the tab bar by using the bindable property “TabBarIsVisible”. Setting true makes the tab bar visible and setting false makes the tab bar hidden.

    Shell.TabBarIsVisible=”False”

    Note: By default, this property is true in both android and iOS.  

    5. Displaying Views in Navigation Bar: We can set the “TitleView” attached property to our navigation bar with the below code. However, to display views in the navigation bar,  the property “NavBarIsVisible” should be true.  

    <Shell.TitleView>
        <Image Source="Icon.png"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Shell.TitleView>

    Note: All the properties discussed so far in the page configuration topic can be set in pages that are part of the shell and even in content pages that are not part of the shell. 

    6. Page Visibility: Page visibility of the shell application can be set with “IsVisible” property. If the value is set to false, the page will not be visible and cannot even be navigated.  

    7. Setting Page Presentation Mode: We all know that whenever we navigate to a new content page, a small animation occurs. We can control this animation by setting the presentation mode. Below are a few presentation modes that can be used. 

    • Animated 
    • NotAnimated 
    • Modal 
    • ModalAnimated 
    • ModalNotAnimated 

     Here is how we can set the presentation mode.  

    Shell.PresentationMode="Modal"  

    Conclusion

    Shell offers multiple other features, like an integrated search handler and custom renderers which are not discussed in this article. Check out the reference links below for a better understanding of the shell and other new features.  

    You can always switch to shell if your existing application contains a flyout menu or a tab bar, or a search handler. Also, xamarin forms 4.0.0 has a lot more exciting features. So update your visual studio today! 

    Profile

    Mounika Rajapuram

    Module Lead

    Mounika calls herself a dynamic professional with expertise in developing mobile applications for iOS and Android. With C# and Xamarin as primary areas of expertise, she also likes to dwell in doodle art in her pastime.

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Select
    Your Message (Optional)

    Upcoming Software Testing Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon