Xamarin.Forms - Bottom Tabbed Page Using Shell

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.

 

Creating a Bottom Tabbed Page Using Xamarin.Forms Shell

 

Let us now learn how we can use Xamarin.Forms Shell to create a bottom tabbed page. We will also create some subtabs in it.

 

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 many 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 for Bottom Tabbed Page.

 

Method #1 - AppShell.Xaml

<TabBar>
        <Tab Title="Feed"
             Icon="tab_feed.png">
            <ShellContent Icon="tab_feed.png">
                <views:FeedPage/>
            </ShellContent>

        </Tab>
        <Tab Title="About"
             Icon="tab_about.png">
            <ShellContent>
                <views:AboutPage />
            </ShellContent>
        </Tab>
</TabBar>

Method #2 - AppShell.Xaml

<TabBar>
        <Tab Title="Feed Page" Icon="tab_feed.png">
            <ShellContent  ContentTemplate="{DataTemplate views:FeedPage}">
                </ShellContent>
        </Tab>
        <Tab Title="About Page" Icon="tab_about.png" >
            <ShellContent ContentTemplate="{DataTemplate views:AboutPage}">
                </ShellContent>
        </Tab>
</TabBar>

Method #3 - AppShell.xaml

<TabBar>
        <views:FeedPage Icon="tab_feed.png" Title="Feed Page"/>
        <views:AboutPage Icon="tab_about.png" Title="About Page"/>
</TabBar>

Try it out.

 

 

 

Sub Tab view

 

This is the code example for Sub Tabbed page.

 

AppShell.Xaml

<TabBar>
        <Tab Title="Feed Page" Icon="tab_feed.png">
            <ShellContent Title="Feed"  ContentTemplate="{DataTemplate views:FeedPage}">
                </ShellContent>
            <ShellContent Title="News"  ContentTemplate="{DataTemplate views:NewsPage}">
                </ShellContent>
        </Tab>
        <Tab Title="About Page" Icon="tab_about.png" >
            <ShellContent ContentTemplate="{DataTemplate views:AboutPage}">
                </ShellContent>
        </Tab>
        </TabBar>

Click the "Play" button to try it out.

 

 

I hope you have understood how to create a Tabbed page and build subtabs in it using Shell in Xamarin.Forms.

 

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