Xamarin.Forms Shell – Getting Started

With the release of Xamarin Forms 4.0 and Shell enabling developers to build a navigable app more quickly, I thought I’d take the opportunity to convert one of my apps written in Apache Cordova into Xamarin Forms and see whether Shell would make things simpler.

To start with, I create a new Xamarin Forms project in Visual Studio (I’m using VS 2019). You are given the option of 4 templates, the 3rd being Shell. I immediately notice that UWP is not supported.

Hmmm…. since my app is currently deployed to Google and Windows that could be an issue. A quick Google shows that there is a pull request asking for UWP support of Shell, so I’m going to stick with it for now in the hope that it is brought in.

OK, the app is created, with the usual structure of Android & iOS solutions and a shared code solution which will hold the majority of my code.

When I open the AppShell.xaml, which is the glue that will hold this structure together, I can see the default set up using tabs.

When I run this in my Android emulator I get:-

Great – but I don’t want tabs. Or at least not just tabs. I’d like the flyout menu. I’ve downloaded the Xaminals project referenced in the Microsoft Getting Started pages, so I have a look at that.

OK I can see the Flyout code, but why are they all highlighted as errors?

I’m not sure if this is a ReSharper issue or a teething problem with Shell and Visual Studio, but the project builds and runs fine.

Fine, I’ll see what happens.

The app I am re-writing is my DDO Puzzle App. I’d like to group the puzzles by type, and have those types on the flyout menu for the main navigation.

I start with 2 areas – maps and lights. Under Views in the Shared Code I create a LightsMenuPage and MapsMenuPage. I’m not bothered about setting up the View Models just yet. In the AppShell I add the flyout entries and in the code behind I register the routes.

I’m still seeing those syntax errors. But again, it builds and runs.

It’s working. It looks extremely basic – but it’s working 🙂

In the next post I shall look at expanding on the navigation structure.

Thanks for reading.