Xamarin.Forms Shell – Expanding with tabs

In my previous post, I set up a Xamarin Forms Shell project and had the basic Flyout Menu working. Now I want to expand on that. This post will look at how tabs are implemented with Shell.

I’ve fleshed out my Flyout Menu items to include the remaining categories for the puzzles, adding the associated Page Views, and created a few icons to start with. Starting with the Maps category, I have 3 puzzles that fall into this category. By adding these within a Tab in the Flyout, I can associate them with the category and get the tabs autogenerated.

This gives me the following code in my AppShell.xaml:-

And looks like this:-

One thing to note is that I have created a sub folder within Views to hold the Map View pages. This means when that when I specify the DataTemplate I need to ensure the sub folder is included. So I have ContentTemplate="{DataTemplate views:Maps.ThePitPage}" etc.

I can see an issue when I select the Rune Wheel tab, but I’m guessing that’s something I can resolve once I start looking at adding my own styles. I am curious to see what happens to the top tabs on the Map screen. Will they double up, become scrollable or just mash together in a mess? Let’s see.

That looks OK to me! Let me add all the pages based on the current app and see what happens. The code ends up looking something like this:-

It’s nicely structured and easy to see how each page relates to it’s parent category. When I run it I get:-

It’s interesting to see that a secondary tab hasn’t been added in the Mirrors category, which only has one sub page. Also, I have not needed to register routes in the AppShell code behind for any of these pages. These routes are used to allow you to navigate between pages. At the moment I don’t need this. It’s handled the additional primary tab elements (displayed at the bottom of the app) by providing an overflow.

Next post I shall start adding some basic content and see if Shell is the way I want to go with the app layout.

Thanks for reading.