Xamarin.Forms - Bottom Tabbed Page using Shell

In this blog post, you will learn how to create a Tabbedpage and sub tabs using shell in Xamarin.Forms.

Introduction

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

Shell

Xamarin.Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require. This includes a common navigation user experience, a URI-based navigation scheme, and an integrated search handler.

Prerequisites

• Visual Studio 2019 (Windows or Mac)
• Xamarin.Forms 4.0 Updated

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You wíll learn more by going through the steps yourself.

Visual Studio 2019 has more options in the opening window. Clone or check out the code from any repository or, open a project or solution for your computer.

Now, you need to click "Create a new project".

Now, filter by Project Type: Mobile

Choose the Mobile App (Xamarin. forms) project under C# and Mobile.

Name your app. You probably want your project and solution to use the same name as your app. Put it on your preferred location for projects and click "Create".

Now, select the blank app and target platforms - Android, iOS and Windows (UWP).

Subsequently, go to the solution. In there, you get all the files and sources of your project (.NET Standard). Now, select the XAML page and double-click to open the MainPage.Xaml page.

You now have a basic Xamarin.Forms app. Click the Play button to try it out.

Note : Your Xamarin.forms version should be updated 4.0

Bottom Tabbed Page

This code example is Bottom Tabbed Page

Method #1

AppShell.Xaml



Method #2

AppShell.Xaml


Method #3

AppShell.xaml


Try it out.

Sub Tab view

AppShell.xaml

This code example is Sub Tabbed Page


Click the "Play" button to try it out.

I hope you have understood how to create a Tabbedpage and sub tabs using shell in Xamarin.Forms..

Thanks for reading. Please share your comments and feedback. Happy Coding :)