Tabbed Page In Xamarin.Forms Using FreshMvvm

Introduction

Today I am going to post my first article on C# Corner. Being a developer I have been thinking to do a write up here as this is the place where people can get things out of the box for every technology.

In this article we are going see how to make Tabbed Page in Xamarin.Forms using FreshMvvm.

FreshMvvm

According to Github, FreshMvvm is a super light Mvvm Framework designed specifically for Xamarin.Forms. It's designed to be simple and flexible. It has many built-in features, for example automatic wiring up of Binding Context and PageModel to PageModel Navigation, just to name a few. I hope I do not need to mention about Xamarin.Forms J.

Requirement

Using Microsoft Visual Studio Enterprise 2017 (VS Community as well can be used) along with the installed latest version of Xamarin.
Using Windows 10 & macOS Mojave machine in order to see output in for both Android & iOS platforms (Mac is not mandetory)

Detailed description

Open VS Goto ---File—New –Project

Tabbed Page In Xamarin.Forms Using FreshMvvm

Afer clicking Ok button you will see Cross platform app screen. Select the same options as the below screenshot & press the ok button.

In the above screenshot, in Platform option I am not including Windows (UWP) option; if you wish to select that option you can do so. It doesn’t take anything extra.

Now that your projects have been created sucessfully, add FreshMvvm packages. Right click on solution, select Manage NuGet packages. By going to NuGet Package manager a window would appear. Search & add the FreshMvvm Package. Refer to the screenshot below,

Now in your Common project (Shared project) add the below folders

Pages
PageModels

Note: In FreshMvvm Pages folder has all the Pages (Views) and suffix Page & PageModel folder have all the PageModels(ViewModel) with suffix PageModel.

All FreshMvvm all pages should end with rge name Page, and PageModels class should end with PageModel. This is required for automatic event wiring up. FreshMvvm recognizes PageModel by its naming convention.

Example

If your page name is FirstPage then the relevent PageModel name should be FirstPageModel.

Now in Pages folder add two Content Pages (.xaml) for two tabs:

HomeTabPage
AboutTabPage

In PageModels folder add two .cs classes with names:

HomeTabPageModel
AboutTabPageModel

After adding these new items your solution would look like this

To use FreshMvvm Funcationality we need to extend every PageModel class with FreshBasePageModel by importing FreshMvvm. Write the code below in your relevant files

HomeTabModel.cs

public class HomeTabPageModel:FreshBasePageModel
{
public string HomeLabel
{
get { return "Hi, this is home page"; }
}
}

HomeLabel is a public property which I am going to bind in Label in xaml file.

AbouTabPageModel.cs

public class AboutTabPageModel:FreshBasePageModel
{
public string AboutLabel
{
get { return "Hi, this is about page"; }
}
}

HomeTabPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FreshMvvmTab.Pages.HomeTabPage"
Title="Home">
<ContentPage.Content>
<StackLayout>
<Label Text="{Binding HomeLabel}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

I bound the above label with HomeLabel, FreshMvvm automatic detects the relevant page model class & binding data.

AbouTabPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FreshMvvmTab.Pages.AboutTabPage"
Title="About">
<ContentPage.Content>
<StackLayout>
<Label Text="{Binding AboutLabel}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Below we are setting our pages to Tabbed page & Tabbed page to startup page.

App.xaml.cs

public App()
{
InitializeComponent();
var mainPage = new FreshTabbedNavigationContainer();
mainPage.AddTab<HomeTabPageModel>("Home",null);
mainPage.AddTab<AboutTabPageModel>("About",null);
mainPage.BarTextColor = Color.Red;
mainPage.BarBackgroundColor = Color.LightBlue;
//mainPage.BarBackgroundColor = Color.Red;
MainPage = mainPage;
}

In the code above the AddTab method accepts first param as Tab Text of tab & second is Icon which I am sending null as of now, but you can have the Icon name there. Finally I am setting instance of FreshTabbedNavigationContainer to MainPage. For more information about FreshMvvm visit the link I have given in the beginning of this article.

Have a look at the output:

If you have any doubts please comment below, I will respond as soon as possible.

Happy coding!