XAMARIN FORMS: NAVIGATION SERVICE

WELCOME BACK Y’ALL!

Let’s catch up a bit. My Final Year Project is more or less complete and maybe I’ll blog about it soon! Good news is, I find myself suddenly unburdened and free to resume blogging again (YAY!).

Our topic for today will be: Xamarin Navigation Service.


GITHUB

 

WHY, YOU ASK?

Let’s just say: A friend in need helps me blog indeed.

XF-Navigation-Request

To be fair, this is my way of implementing it (derived from some research and after working with on a whole bunch of application samples and side projects). I’m sure there are other techniques and approaches to implement a good navigation.

 

We’ll be creating a simple application a basic flow for this tutorial.

APPLICATION FLOW

NAVIGATION APPLICATION FLOW


 

AGENDA

STEP 1: SETUP THE SOLUTION

STEP 2: ENHANCED MVVM PATTERN

STEP 3: RESOURCE LOCATOR

STEP 4: CREATE MODELS-VIEWMODELS

STEP 5: CREATE THE VIEWS

STEP 6: NAVIGATION CONTRACT

STEP 7: NAVIGATION SERVICE

STEP 8: WRAPPING UP

 


STEP-1: SETUP THE SOLUTION

Before we get to the actual Navigation Service, there are some prerequisites.

 

1. MODEL-VIEW-VIEWMODEL (MVVM)

This is a no-brainer. In my opinion, if you’re coding in Xamarin, MVVM is by far the way to go. It is an amazing development pattern that helps structure your codes properly and allows for easy upgrades.

Get started here: XAMARIN FORMS: MODEL-VIEW-VIEWMODEL

 

2. NUGET: UNITY (APPLICATION BLOCK)

UNITY NUGET

UNITY NUGET PACKAGE

This nifty little package helps resolve instances of services and classes to avoid re-instantiating them over and over again – and also provides for Dependency Injection.

 


STEP-2: ENHANCED MVVM PATTERN

In this section, we will attempt to improve on the basic MVVM implementation. We will create a couple of classes to decouple the logic even more. Notice that some codes may still be missing – we’ll complete those in the coming steps.

1. PROPERTYCHANGED: Handles INOTIFYPROPERTYCHANGED features.


 

2. VIEWMODELBASE: Contains features common to all VIEWMODELS.

Note that some codes are missing in there – we’ll complete that soon enough.


 


STEP-3: RESOURCE LOCATOR

Remember that UNITY NUGET we added in STEP-1? Well, we’ll need a class to operate it. Notice that some codes are missing in here too – all will be completed in time.


 


STEP-4: CREATE MODELS-VIEWMODELS

This application does not really need a MODEL – but we’ll create one just to test the completeness of the Navigation Service with a full MVVM solution.


 

Next up are our VIEWMODELS for each of our VIEWS (as per the Application Flow described above): the WELCOME VIEW and the MAIN VIEW. Notice that we are leaving the Navigation Commands blank for now – we don’t have a Navigation Service yet.



 


STEP-5: CREATE THE VIEWS

Now we implement the actual Pages (Views) for the application – with MVVM Binding and all! For this tutorial (as in the Application Flow above), we’ll have two VIEWS: the WELCOMEVIEW and the MAINVIEW.



 


STEP-6: NAVIGATION CONTRACT

The first step to creating any Service is to define its contract (interface) first. It’s a handy way to abstract the implementation from the classes that will use it later. So we need a Navigation Service that can:

+ Navigate to a new VIEW.

+ Navigate to a new VIEW with a Parameter.

+ Navigate back from a VIEW.

And we’ll throw in a couple of extras just in case.


 


STEP-7: NAVIGATION SERVICE

This is the final lap. The Navigation Service Interface has been defined and integrated everywhere in the project – even though the service hasn’t been coded yet! The implementation has been completely abstracted and the application doesn’t care about how the job is being done.

Let’s get back to it and code that Navigation Service!


 


STEP-8: WRAPPING UP

The Service is pretty much complete. Time to tie up some loose ends.

First, we need to finalize the RESOURCELOCATOR. There were some class and service registrations missing there from STEP-3.


 

Secondly, we need to complete the VIEWMODELBASE.


 

Next, we need to modify our WELCOME VIEWMODEL to actually perform the Navigation now.


 

Finally, while everything has been coded, we never initialized the service – so it won’t work. Let’s do that in the APP.XAML.CS (or APP.CS) Class so that the Service is created as soon as the Application is launched.


 

CONGRATULATIONS!

And that’s pretty much it.

You now have a simple Navigation Service running for your Application.

 

There are some tiny Social Media buttons down there – maybe click on them once or twice. And do share your thoughts in the comments – it always helps.

Cheers!

 


GITHUB

Leave a Reply