Back in late 2018 I did a post on getting started with Shell where I did a “File-New-Project” with Xamarin.Forms Shell. In this post I’m going to do a quick update to that post looking at creating a new Shell application with Visual Studio 2019, and then upgrading to the preview of Xamarin.Forms Shell v4.
As all great projects start, let’s get going with the Create a new project dialog. Search for Xamarin and select the Mobile App (Xamarin.Forms) template.
Give some basic project information
Select Shell as the application template.
Note: The Windows (UWP) option has come back (removed in the initial release of Visual Studio 2019) when creating Xamarin.Forms applications. However, since Shell isn’t supported by UWP at the moment, the Windows (UWP) option is currently disabled.
And there you have it a new Xamarin.Forms application that you can build and run, that leverages Shell.
And looks a little like this with bottom tabs and an ADD button in the navigation bar.
But let’s see what v4 is going to give us. Select “Include prerelease” and update to the latest packages.
Xamarin.Forms Shell v4
One addition that is more of a cosmetic improvement is the naming of ShellItem and ShellSection – I think the initial intent of these were that they should be somewhat abstracted for the actual UI implementation. However, as Shell has matured, the reality is that ShellItem maps to an item that appears in the flyout and an ShellSection maps to a tab…..
Wow, hold on, what are these things ShellItem, ShellSection and ShellContent? If you haven’t been following what the Xamarin.Forms team have been working on then Shell might come as a bit of a surprise. However, as nearly every app developer will admit, one of the most painfully tedious parts of building an application is create and linking all the pages of the application so that the user can navigate between them. The cognitive load of how to do master-details or tabs even in Xamarin.Forms makes it hard for developers to get started. What Shell aims to achieve is to provide a declarative way for you to define how your application is structured.
Essentially Shell represents a hierarchy of navigation elements:
– Shell – this is represents the application as a whole
– ShellItem – these are the first level pages of the application. Currently if there are multiple ShellItems defined, they’ll automatically appear in a Flyout.
– ShellSection – a page can be broken into sections which essentially map to bottom tabs. If a ShellItem only has one ShellSection, no tabs will show.
– ShellContent – this is the actual page content that will be displayed within the bottom tabs. If a ShellSection has multiple ShellContent, tabs will appear at the top of the tab giving you a tab-sandwich display.
In v4, to make it easier for developers to clearly see what was going on, additional classes, FlyoutItem and Tab were added that sub-class ShellItem and ShellSection respectively. The following example layouts use the new element names – if you’re still on v3.6 of Xamarin.Forms you will need to stick with ShellItem and ShellSection.
Some examples:
Single Page Application
Notes:
– For a single ShellContent there’s no need to include a Tab element, simply nest it directly under the FlyoutItem.
– The FlyoutBehavior attribute can be used to hide/show the flyout on different pages in the application, or (as in this case) across the whole application. Use Shell.FlyoutBehavior on individual FlyoutItem elements to hide the flyout on those pages.
<Shell … FlyoutBehavior=”Disabled”>
<FlyoutItem … >
<ShellContent … />
</FlyoutItem>
</Shell>
Two Page Application With Flyout
<Shell …>
<FlyoutItem Title=”Home” … >
<ShellContent … />
</FlyoutItem>
<FlyoutItem Title=”Single Page” … >
<ShellContent … />
</FlyoutItem>
</Shell>
Looking at the different combination of FlyoutItem, Tab and ShellContent we can get different page behaviours:
Bottom Tabs
<FlyoutItem Title=”Bottom Tabs” … >
<Tab Title=”Home” >
<ShellContent … />
</Tab>
<Tab Title=”Activity” … >
<ShellContent … />
</Tab>
</FlyoutItem>
Top Tabs
<FlyoutItem Title=”Top Tabs” … >
<Tab Title=”Activity” … >
<ShellContent Title=”Shared” … />
<ShellContent Title=”Notifications” … />
</Tab>
</FlyoutItem>
Tab Sandwich
<FlyoutItem Title=”Tab Sandwich” … >
<Tab Title=”Activity” … >
<ShellContent Title=”Shared” … />
<ShellContent Title=”Notifications” … />
</Tab>
<Tab Title=”Updates” … >
<ShellContent Title=”Updates” … />
<ShellContent Title=”Home” … />
</Tab>
</FlyoutItem>
As you will have briefly seen, it’s possible to rapidly stand up the basics of an application using a combination of flyouts and tabs to structure your application. In this post we’ve referenced the preview of the next version of Xamarin.Forms Shell, so you can expect that some of the features, particularly around navigation are subject to change in the coming months.