Xamarin 4: Shell – Part 1

As Xamarin 4 is around the corner and set release pretty soon, let’s have a quick sneak peek 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 the visual structure of the app easily at a single place, eg Flyout screen, tabbed pages, and others. It also has 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 to install Xamarin 4 pre-release version in Xamarin Forms project

Install Nuget installation with Xamarin Forms 4 pre-release
Xamarin Forms version is pre-release 4 at the time of writing this blog

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

For iOS platform

For the Android platform

Traditionally, Xamarin forms the main page is set with the 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 is explicitly set.

To start, let’s create a 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 the current item is null.

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

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

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

Shell -> Shell item -> Content page

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.

Shell -> ShellItem -> Shell Section

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 what are the other ways we can layout UI using new Shell.

Here is the link to Github Happy coding.

Advertisements