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

Xamarin Forms version is pre-release 4 at the time of writing this blog

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

For iOS platform
For Android platform

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

Here is the link to Github Happy coding.

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

About the author

Divi Ravela is the Technical lead & Senior Developer at XAM. Divi has worked with Microsoft technologies for over 11+ years building software for various private sector companies, applying both technical knowledge and managerial expertise. He is a hands-on, Microsoft C# Analyst Programmer using Xamarin, AWS, Azure, and MVC as his preferred tools

Design-led problem solving delivering digital solutions.

Learn more about us.

Good at what you do?

We’re looking for the right superstars to join our team and work on growing our clients’ businesses.