Xamarin 4 : Shell – Part 1

As Xamarin 4 is around the corner and set release pretty soon, let’s have quick sneak peak into Shell, we will try to understand What and Why Shell.

I personally see this as an answer to Hybrid mobile technologies that making app development faster, it is the kind of template that helps you write visual structure of the app easily at a single place, eg Flyout screen, tabbed pages and others. It also have some builtin feature such as integrated search handlers.

At the time of writing this blog, Xamarin 4 is on preview, so to test this feature you have install Xamarin 4 pre-release version in Xamarin Forms project

Install Nuget installation with Xamarin Forms 4 pre-release

Since Shell is currently experimental, we have set forms flags in both iOS and Android as below, just before the Xamarin.Forms.Forms.Init()

Traditionally, Xamarin forms main page is set with content page (main page) or with a tabbed page, but instead this time it’s going to be a Shell, which gives App a structure that it stands out. According to me Shell is very opinionated navigation that forces you to do things in its way. We can set all the contents pages in Flyout menu here and in this case not all pages are fired on app start except the one that are explicitly set.

To start, lets create content page and change its structure to Shell and change MainPage in App.cs to AppShell class as above in code sample. Now change the AppShell xml tags to match shell as below. If you run the app now, it will complain about current item is null.

To set current item, Shell have to defined in hierarchical fashion with its three main elements.

1. Shell Item
2. Shell Section
3. Shell Content

Shell item display as menu in the flyout, where can write title of the item that needs to be displayed, a shell can contain multiple shell items in similar fashion.

Shell item can also contain optional ShellSection with the content page inside it. It should still work as Xamarin Forms will add it automatically to the hierarchy at runtime.

And we also have optional Shell content after shell section, all this hierarchy helps us when we have to set route in the app.

In the next part we will discuss about what are the other ways we can layout UI using new Shell.

Here is the link to Github Happy coding.