An Introduction to Xamarin Forms Shell Navigation

Home / Programming / An Introduction to Xamarin Forms Shell Navigation
An Introduction to Xamarin Forms Shell Navigation

What is Xamarin.Forms Shell?

 

  • Shell is a container that improves and simplifies the navigation complexity of an application.
  • Shell makes mobile application development less complex because it provides fundamental features that are most required in the complexity of the application.
  • It is introduced in the release of Xamarin.Forms 4.0.
  • The shell allows a single place to describe the visual hierarchy, provides the common navigation user experience, supports URI based navigation schema, it has an integrated search handler, it increases rendering speed, and reduces memory consumption.
  • Shell provides a backward option without visiting all pages of the navigation stack.
  • It is an evolution of the Master-Detail Page, Navigation Page, and Tabbed Page.
  • It defines navigation-related properties like
    • BackButtonBehavior: For Behavior of back button
    • CurrentItem: For Currently selected FlyoutItem /ShellItem
    • CurrentState: For the Current navigation state of the shell

These all are backed by bindable property objects.

Xamarin.Forms Shell Navigation

In application, Shell navigation is performed by specifying a URI. It uses a route to navigate any pages in the application without the following set of hierarchy. Navigation URI contains 3 components: Routes, Path, and Query Parameter. The structure of navigating URI is like: “//route/page?queryParameter” when all three components are included.

  • Route: Route defines the path to content that exists as a part of the visual hierarchy of the shell.
    • Absolute and Relative are types of Router.
    • In the Absolute route by specifying a valid absolute URI and in the relative route navigate by specifying a valid relative URI for both as an argument of the GoToAsync ().
    • Example: Relative await Shell.Current.GoToAsync(“Details”);

Absolute await Shell.Current.GoToAsync (“//user/Details”);

  • Page: Page is which does not exist in the visual hierarchy of the shell. It is pushed into the navigation stack from anywhere of shell application.
  • Query Parameter: These are a parameter that can be passed to the destination page while navigating.

 

Steps for Creating Shell Application:

  • Create a Xamarin.Forms application with appropriate name Like ShellNavigationDemo (Check Xamarin.Forms version it must above 4.0).
  • Create one XAML page name it AppShell.Xaml.
  • When AppShell.xaml created it contain pre-define structure, add <Shell> tag to this file it will look like

<?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:views=”clr-namespace:ShellNavigationSample.Views”

x:Class=” ShellNavigationDemo.AppShell”>

</Shell>

  • Now in code behind file which is AppShell.xaml.cs inherit class Shell.
  • Shell class defines attached properties that are used to construct the appearance of pages in Xamarin.Forms Shell. It contains Properties such as setting page colors, disabling the navigation bar, disabling the tab bar, and displaying views in the navigation bar.

public partial class AppShell : Shell

{         public AppShell()

{

InitializeComponent();

}

}

  • After that add components to the XAML file, it allows making navigation and design in the application.
  • Shell follows a hierarchical structure which contains

FlyoutItem/Tabbar

Tab

ShellContent

  • FlyoutItem: FlyoutItem means Items in the flyout

 

Flyout: Flyout is a component that is added to the page which facilitates navigation and design by menu. It is a root menu of the shell application. It is a drop-down menu that is accessed by the hamburger icon. Flyout Contains elements that are Header, Flyout item, and Menu item.

  • Tab: Tab is a group of contents in a tab. Each FlyoutItem contains one or more Tab and each tab contains one or more ShellContent.
  • ShellContent: It contains the content page of the application which navigates to another page.

Structure:

<Shell>

<FlyoutItem Route=”Users”>

<Tab Route=”RegisterUser”>

<ShellContent Route=”Admin” />

<ShellContent Route=”Employee” />

</Tab>

</FlyoutItem>

<ShellContent Route=”about” />

</Shell>

Example:

Here, we will create a mobile application called ShellDemo. In which a Login page, About page, and Shell structure page will be created. We are using Shell in this application.

In the Appshell page, we used <shell> and its hierarchy structure for navigation. <FlyoutItem> contain <shellContent> which route the various pages of the application and in the code behind the file, we inherited Shell class.

Login, Shell structure, about, and shell structure detail all are content pages.

AppShell

<?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:local=”clr-namespace:ShellDemo.Views”

Title=”ShellDemo”

x:Class=”ShellDemo.AppShell”>

 

<FlyoutItem FlyoutDisplayOptions=”AsMultipleItems”>

<ShellContent Title=”About” Icon=”tab_about.png”                                                       Route=”AboutPage” ContentTemplate=”{DataTemplate local:AboutPage}” />

<ShellContent Title=”Shell Structure” Icon=”tab_feed.png”                                                       ContentTemplate=”{DataTemplate local:ItemsPage}”                                                           Route=”ItemPage” />

</FlyoutItem>

<MenuItem Text=”Logout” StyleClass=”MenuItemLayoutStyle”                                                   Clicked=”OnMenuItemClicked”>

</MenuItem>

<ShellContent Route=”LoginPage” Shell.FlyoutBehavior=”Disabled”                                           ContentTemplate=”{DataTemplate local:LoginPage}” />

</Shell>

Appshell(cs file)

using ShellDemo.Views;

using Xamarin.Forms;

namespace ShellDemo

{

public partial class AppShell : Shell

{

public AppShell()

{

InitializeComponent();

Routing.RegisterRoute(nameof(ItemDetailPage),typeof(ItemDetailPage));

Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));

}

private async void OnMenuItemClicked(object sender, EventArgs e)

{

await Shell.Current.GoToAsync(“//LoginPage”);

}

}

}

Shell App

Image: Appshell

Login

<?xml version=”1.0″ encoding=”utf-8″ ?>

<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms”

xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”

xmlns:d=”http://xamarin.com/schemas/2014/forms/design”

xmlns:mc=”http://schemas.openxmlformats.org/markup compatibility/2006″

mc:Ignorable=”d”

x:Class=”ShellDemo.Views.LoginPage”

Shell.NavBarIsVisible=”False”>

<ContentPage.Content>

<StackLayout Padding=”10,0,10,0″ VerticalOptions=”Center”>

<Entry Placeholder=”Enter email…” Keyboard=”Email” VerticalOptions=”Center”/>

<Entry Placeholder=”Enter password…” IsPassword=”True” VerticalOptions=”Center”/>

<Button VerticalOptions=”Center” Text=”Login” Command=”{Binding LoginCommand}”/>

</StackLayout>

</ContentPage.Content>

</ContentPage>

                                                         Image: Login Screen

About

<ContentPage.BindingContext>

<vm:AboutViewModel />

</ContentPage.BindingContext>

 

<ContentPage.Resources>

<ResourceDictionary>

<Color x:Key=”Accent”>#96d1ff</Color>

</ResourceDictionary>

</ContentPage.Resources>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto” />

<RowDefinition Height=”*” />

</Grid.RowDefinitions>

<StackLayout BackgroundColor=”{StaticResource Accent}” VerticalOptions=”FillAndExpand” HorizontalOptions=”Fill”>

<StackLayout Orientation=”Horizontal” HorizontalOptions=”Center” VerticalOptions=”Center”>

<ContentView Padding=”0,40,0,40″ VerticalOptions=”FillAndExpand”>

<Image Source=”xamarin_logo.png” VerticalOptions=”Center” HeightRequest=”64″ />

</ContentView>

</StackLayout>

</StackLayout>

<ScrollView Grid.Row=”1″>

<StackLayout Orientation=”Vertical” Padding=”30,24,30,24″ Spacing=”10″>

<Label Text=”Xamarin.Forms Shell” FontSize=”Title”/>

<Label Text=”Xamarin.Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require. This includes a common navigation user experience,a URI-based navigation scheme, and an integrated search handler.” FontSize=”16″ Padding=”0,0,0,0″/>

<Label FontSize=”16″ Padding=”0,24,0,0″>

<Label.FormattedText>

<FormattedString>

<FormattedString.Spans>

<Span Text=”Learn more at “/>

<Span Text=”https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/” FontAttributes=”Bold”/>

</FormattedString.Spans>

</FormattedString>

</Label.FormattedText>

</Label>

<Button Margin=”0,10,0,0″ Text=”Learn more”

Command=”{Binding OpenWebCommand}”

BackgroundColor=”{StaticResource Primary}”

TextColor=”White” />

</StackLayout>

</ScrollView>

</Grid>

                                Image: About Screen

ShellStructure

<RefreshView x:DataType=”local:ItemsViewModel” Command=”{Binding LoadItemsCommand}” IsRefreshing=”{Binding IsBusy, Mode=TwoWay}”>

<collectionView x:Name=”ItemsListView”

ItemsSource=”{Binding Items}”

SelectionMode=”None”>

<CollectionView.ItemTemplate>

<DataTemplate>

<StackLayout Padding=”10″ x:DataType=”model:Item”>

<Label Text=”{Binding Text}”

LineBreakMode=”NoWrap”

Style=”{DynamicResource ListItemTextStyle}”

FontSize=”16″ />

<Label Text=”{Binding Description}”

LineBreakMode=”NoWrap”

Style=”{DynamicResource ListItemDetailTextStyle}”

FontSize=”13″ />

<StackLayout.GestureRecognizers>

<TapGestureRecognizer

NumberOfTapsRequired=”1″

Command=”{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}”

CommandParameter=”{Binding .}”>

</TapGestureRecognizer>

</StackLayout.GestureRecognizers>

</StackLayout>

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</RefreshView>

                                    Image: Shell Structure

Shell Structure Detail

<?xml version=”1.0″ encoding=”utf-8″ ?>

<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms”xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”x:Class=”ShellDemo.Views.ItemDetailPage”Title=”{Binding Title}”>

<StackLayout Spacing=”20″ Padding=”15″>

<Label Text=”Component:” FontSize=”Medium” />

<Label Text=”{Binding Text}” FontSize=”Small”/>

<Label Text=”Description:” FontSize=”Medium” />

<Label Text=”{Binding Description}” FontSize=”Small”/>

</StackLayout>

</ContentPage>

 

Image: Shell Structure Detail

Conclusion:

In the update of Xamarin.Forms 4.0 Shell is introducing and it can develop mobile applications less complex with fundamental features and improves memory consumption and rendering speed. By specifying URI, we can use shell navigation. Navigation is done by using a route.

Author Bio: Ajay Patel – Technical Director, iFour Technolab Pvt Ltd

A seasoned technocrat with years of experience building technical solutions for various industries using Microsoft technologies. Wish sharp understanding and technical acumen, have delivered hundreds of Web, Cloud, Desktop, and Mobile solutions and is heading the technical department at Xamarin Mobile App development company – iFour Technolab Pvt Ltd.

Leave a Reply

Your email address will not be published.

  • Partner links