Xamarin Shell App

Nowadays, swift upgrades is neccessary for mobile app development. To achieve this, Xamarin.Forms have introduced Xamarin Shell in the latest version 4.0.

A basic app can be quickly created using the xamarin shell. Apps created using Shell include basic designs/features like Tabs, Flyout, Navigation, and Page configuration.

Below are the brief description of the basic features introduced in the shell

When we swipe from the side of the screen,menu with the list of options will appear. It may also contain a menu with image icons.

Same to flyout, In tabs bar, we can show multiple menu icons in the bottom. It may also contain images as icons.

The basic setting related to the app like page colors, disabling the navigation bar, etc can be configured using the configuration page.

Previously we have to follow the navigation hierarchy to navigate from one page to another. In shell application, we can use a URL based navigation scheme.

All the above features are the basic features which are essential in most of the mobile application. Development through Xamarin Shell is facile as compared to previous developments. We can quickly set up the basic functionality of the app using the shell app. Below we are going to demonstrate the demo app using the xamarin shell.

Now we are going to see how easy it is to set up the new Xamarin.Forms Shell with different types of navigation schemes and how to navigate to sub-pages.

In the visual studio 2019 project, the shell is introduced as the new template. This will be the starting place to start the shell app development. We can try to quickly add a shell to an existing application.

We are going to start with a blank project. Then add a new XAML file to your library project named AppShell.xaml and extend the Shell type instead of ContentPage.

Previously in the app, we were using the mainpage.cs as the start-up page. After creating the AppShell.xaml/cs we are going to use it on the start-up page.

Now to use this in the application set the MainPage in App.xaml.cs:

Shell provides three types of common mobile navigation: flyout menu, bottom tabs, and top tabs. we have integrated all the three in the single app as shown in the below code.

The given below few lines of code will integrate the three features introduced in the xamarin shell its flyout menu, bottom tabs, and top tabs. Previously to implement this feature in-app we were needed to write the hundreds line of code.

Here in the flyout menu we have defined Home, Service, About Us and Contact Us menu which will redirect us to the respective pages.

Within the elements added custom pages. And we can navigate all-around using Shell’s brand new URI-based navigation.

This is how we are done with the basic functionality app with xamarin shell.

Here is the code to integrate three features using the shell in xamarin forms.

Here is how the app is going to look like