Basic Structure Of A Mobile App Using Xamarin MVVM - Part Two

Hello everyone, this is part 2 of this series. In the previous part, we discussed how to create a new project and set the home page. In this part, we'll discuss how to perform navigation in Xamarin forms.

Introduction 

 

This is part 2 of the MVVM Mobile App development series.

 

In this part, we'll discuss navigation in Xamarin forms. We already set up our home page in the previous part. So far, if you haven't seen part 1, you can easily visit the link here.

 

Okay, so now we'll start part 2.

 

Step 1

 

Go to the root directory where you saved your app, open the project, and run your app in the Android emulator. I'm using 'API 29 (Android 10.0)'. You can use any version, but my suggestion is to use this version for better performance. Even though you can use your external Android device, for this you will have to do some configuration. For sure I'll write one blog to set up an external android device with the visual studio when we will discuss Web API and how to connect them to the client-side using the localhost. Finally, we are running our application as shown in the below image.

 

 

Step 2

 

Create a new XAML page and ViewModel class for the existing HomePage.xaml because we have to navigate from the home page to another page. Follow the below steps.

 

Right-click on Views Folder -> Add -> New Item, under 'visual c# items' Select 'Content Page' and give it a name. I named it NewNavigationPage.xaml.

 

To create a ViewModel class for the respective XAML page, follow these steps:

 

Right click on ViewModels folder -> Add -> New Item, under 'visual c# items' select class and name it as HomeViewModel.cs

 

Follow the same step to create ViewModel class(NewNavigationViewModel.cs) for NewNavigationPage.xaml.

 

Step 3

 

Now register the route for the NewNavigationPage in AppShell.xaml.cs

 

Open AppShell.xaml.cs and update it with the below code:

using System;
using System.Collections.Generic;
using MvvmApp.ViewModels;
using MvvmApp.Views;
using Xamarin.Forms;

namespace MvvmApp
{
    public partial class AppShell : Xamarin.Forms.Shell
    {
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(ItemDetailPage), typeof(ItemDetailPage));
            Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));
            Routing.RegisterRoute(nameof(NewNavigationPage), typeof(NewNavigationPage));
        }

    }
}

Step 4

 

Create a Command to bind it with a button on the XAML page and create one method to perform navigation action in HomeViewModel.cs . Open HomeViewModel.cs and update it with the below code:

using MvvmApp.Views;
using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using Xamarin.Forms;

namespace MvvmApp.ViewModels
{
    public class HomeViewModel
    {
        public ICommand NewNavigationCommand { get; set; }

        public HomeViewModel()
        {
            NewNavigationCommand = new Command(async () => await NewNavigationAction());
        }

        async Task NewNavigationAction()
        {
            await Shell.Current.GoToAsync(nameof(NewNavigationPage));
        }
    }
}

Step 5

 

Now create a button in HomePage.xaml and bind it with the Command of HomePageViewModel.cs 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MvvmApp.Views.HomePage"
             xmlns:vm="clr-namespace:MvvmApp.ViewModels">
    <ContentPage.BindingContext>
        <vm:HomeViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Content>

        <StackLayout>
            <Label Text="Welcome to Home Page of MVVM App!"
                   TextColor="Black" FontSize="20"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
            <Button Text="Click to Navigate" Command="{Binding NewNavigationCommand}"
                    HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

In this step, we bind our ViewModel with View. There are several ways to do this, but personally, I always prefer to bind it in view as I did in the above code. This is because if you created properties and command in the ViewModel class, the intelliSence will always show that props and commands while you are binding any content of ViewModel. As shown below:

<ContentPage.BindingContext>
   <vm:HomeViewModel/>
</ContentPage.BindingContext>

Step 6

 

Open NewNavigationPage.xaml and update with the below code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MvvmApp.Views.NewNavigationPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to New Navigation Page"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Step 7

 

Now run your app in the Android emulator. It will look like this:

 

 

Now click on the button and it will navigate you to the NewNavigationPage.xaml:

 

 

Thanks for giving your precious time, if it won't work for you or you are stuck somewhere, just let me know in the comments section.