Xamarin Month: Fall in Love with Xamarin.Forms Shell

As part of the Xamarin Month celebration I want to share with you one of the features that you'll love about Xamarin.Forms 4 preview, no matter if you are starting with mobile development using Xamarin or you have experience working with it, this update will make you happy.

In the past weeks a new preview version of Xamarin.Forms was released which includes a lot of major updates changes for the Xamarin.Forms stack, and next I'll show you one of the new features that you'll help you to fall in love with Forms.

Xamarin.Forms Shell

Xamarin.Forms Shell is a brand new way to easily create and architect Xamarin Forms apps allowing you to focus on your app code workload.
Shell provides you a single place to configure your app visual structure, a common navigation user interface & a navigation service with deep linking support.

Shell structure:

Xamarin.Forms shell provides you 3 view levels Navigation flyout menu, bottom tab bars and top tab bars.

Adding Forms Shell into your project:

Is very easy to configure it basically you need to set the experimental flag into your MainActivity & AppDelegate before to Call the Forms Init method:

Also you'll need to replace your MainPage App definition to use a shell definition instead of the standard Pages definition:

Thats it now you're able to start using Shell in your application now lets see the new structure elements that you'll need to know in order to create your app structure definition.

ShellItem	One or more items in the flyout. Every ShellItem is a child of a Shell
ShellSection	Grouped content, navigable by bottom tabs. Every ShellSection is a child of a ShellItem.
ShellContent	The ContentPage instances in your application, which are navigable by top tabs. Every ShellContent is a child of a ShellSection.

Following the previous structure we can define that a very simple UI definition will be the next:

you can customize your flyout definition allowing you to enable/disable, add a header item and extra menu items, lets analyse the flyout menu structure

Header:
Allow us to set either a View by setting Header property or use a Template by using HeaderTemplate property.

Shell Items:
This section is generated automatically by Forms Shell and indicates all the Shell Items Childrens of the root Shell structure you can customize the items by using the ItemTemplate property.

Menu Items:
If you want to add any extra items beside that the ones that are created automatically by the Shell, you can add as many you want and create your own view view using MenuItemTemplate property.

Following with the shell structure now let talk about tabs which is the send and third place in the forms shell UI hierarchy and are represented as ShellSection & ShellContent:

ShellSection: Are represented as bottom navigation tabs

ShellContent: Host the content pages and represent the low level layer of the Shell, you can set one single item to the ShellSection and the top bar will be not displayed if you put 2 or more items top navigation tabs will be displayed by default.

with that simple configuration you're able to start creating the UI definition for your apps in a very simple way

Navigation:

Forms Shell allow you to navigate between pages by using simple uri shemas and sending parameters  as query strings and with a simple 5 steps tutorial you can setup you.

1) Setup your URI based navigation here a very simple example of how configure your navigation paths on your Shell definition:

2) If you have extra pages that dont belong to the Shell structure you can configure them by calling the RegisterRoute method.

3) Navigate to your desired page by calling Shell.GoToAsync("uri") and sending your desired page also you can send as many parameter as you want using the query string pattern

4) Intercept params in order to get the parameters you need to specify them on your content page level by using the QueryProperty decoration as follow:

5) You can control if the navigation is allowed by handling the Navigating handler of the Shell definition.

Now you're able to start working with Shell by creating awesome and fast UI.

Remember that Xamarin.Forms Shell was an effort between community and Microsoft to fill the developers needs to don't forgot to give feedback here: https://github.com/xamarin/Xamarin.Forms/issues/2415

GITHUB EXAMPLE: https://github.com/AlejandroRuiz/XamarinFormsShellDemo

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

TAILWIND TRADERS APP: https://github.com/Microsoft/TailwindTraders-Mobile/