Tabbed Page In Xamarin.Forms Using Fresh MVVM

Mushtaq M A

7y18.1k4100Article

Xamarin Xamarin.FormsFresh MVVMTabbed PageTabbed Page In Xamarin.Forms

4 Comments

Join the conversation! Your thoughts help the community grow.

Neetin Narendra7y ago
In App.xaml.cs public App() { InitializeComponent(); //MainPage = new MainPage(); var loginPage = FreshPageModelResolver.ResolvePageModel<LoginPageModel>(); var basicNavContainer = new FreshNavigationContainer(loginPage); MainPage = basicNavContainer; } After Login is successful in the LoginPageModel i do this: private void Login() { if (!LoginSuccessful) { DisplayInvalidLoginPrompt(); } else { var tabbedNavigation = new FreshTabbedNavigationContainer(); tabbedNavigation. tabbedNavigation.AddTab<FirstPageModel>("First Tab", null); tabbedNavigation.AddTab<SecondPageModel>("Second Tab", null); App.Current.MainPage = tabbedNavigation; CoreMethods.PushPageModel<QuoteListPageModel>(); } }
- Mushtaq M A7y ago
  Please explain the need in detail
Neetin Narendra7y ago
I achieved it using following way:
Neetin Narendra7y ago
Hi , i i need a Login Page as the first page. Once login is succesful then i should launch a tabbed page as shown above how can i do this ?

Tabbed Page in Xamarin.Forms using Fresh MVVM

Introduction

In this tutorial, we will learn how to create a Tabbed Page in Xamarin.Forms using Fresh MVVM. We already learned how to create a master details page in my previous tutorials. If you are new to Fresh MVVM, you can read my previous articles here:

Article on FreshMVVM

Coding Part

Steps

I have split this part into 3 steps as in the following.

Step 1: Creating new Xamarin.Forms Projects.
Step 2: Setting up the plugin for Xamarin.Forms Application.
Step 3: Implementing Fresh MVVM.

Step 1

Create a new project by selecting New - Project - Xamarin Cross-Platform App and click "OK".

Tabbed Page in Xamarin.Forms using Fresh MVVM

Select Android and iOS Platforms as shown below with Code-Sharing Strategy as PCL or .NET Standard and click "OK".

Step 2

We will start coding for Fresh MVVM. Create a new Xamarin.Forms Project. Open NuGet Package Manager against the solution and do search for Fresh MVVM plugin or paste the following NuGet Installation.

Install-Package FreshMvvm -Version 2.2.3

Click "Install" to install this plugin against your PCL Project or .NET Standard Project.

Step 3

I have created two pages for creating a tabbed navigation as “Detail1Page” and “Detail2Page” with two respective page models “Detail1PageModel” and “Detail2PageModel”. We should follow the same set of rules we followed for our previous articles.

Set MainPage

To create a Fresh MVVM Tabbed Page as MainPage, we should use Fresh Tabbed Navigation Container with the following code.

Open xaml.cs or App.cs and set MainPage.
1. var tabbedNavigation = new FreshTabbedNavigationContainer();
2. tabbedNavigation.AddTab<Detail1PageModel>("First Tab", null);
3. tabbedNavigation.AddTab<Detail2PageModel>("Second Tab", null);
4. MainPage = tabbedNavigation;

Then Click Run, your Tabbed Page will be look like the below screenshot.

Here, we will not discuss about navigation between pages. If you want to know, you can see my previous article on Fresh MVVM.

Full code for App.xaml.cs

You can find the code for App.xaml.cs below

public partial class App : Application
{
public App()
{
try
{
InitializeComponent();
var tabbedNavigation = new FreshTabbedNavigationContainer();
tabbedNavigation.AddTab<Detail1PageModel>("First Tab", null);
tabbedNavigation.AddTab<Detail2PageModel>("Second Tab", null);
MainPage = tabbedNavigation;
}
catch (Exception ex)
{
}
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}

Download Code

You can download the code from GitHub. If you have doubts, feel free to post a comment. If you like this article and it is useful to you, do like, share the article & star the repository on GitHub.