Previous posts in this sequence:
Getting Started with Xamarin.Forms and Multi-Targeting in Visual Studio
Getting Started with Xamarin.Forms and SDK Versions
Getting Started with Xamarin.Forms with MvvmCross
Getting Started with Xamarin.Forms and Authenticating with ADAL
Getting Started with Xamarin.Forms, Refactoring MvvmCross and Services
Getting Started with Xamarin.Forms and Effects
Xamarin.Forms has a built in mechanism for navigating between pages. Let’s start with navigating from the MainPage to a new ProfilePage, based on the Content Page item template, added to the Pages folder of the UI project.
To trigger the navigation, we’ll add a new Button to the MainPage and add logic to navigate to the ProfilePage.
<Button Text=”Profile” Clicked=”ProfileClicked”/>
private async void ProfileClicked(object sender, System.EventArgs e)
{
await Navigation.PushAsync(new ProfilePage());
}
Navigation between pages includes adding a back button and handles any hardware back button
The limitation with the built in navigation model for Xamarin.Forms is that it is triggered in the UI layer (i.e. in the code behind of the MainPage). Using MvvmCross we can move the navigation logic into the domain of the view model, meaning it can be tested independently of the UI.
To do this, we need to add a ProfileViewModel class, which corresponds to the ProfilePage.
The ProfileViewModel should inherit from MvxViewModel:
public class ProfileViewModel: MvxViewModel
{
}
The ProfilePage also needs to be updated to inherit from MvxContentPage.
We can now update the MainViewModel to expose a command that can be used to navigate to the ProfileViewModel:
private IMvxCommand profileCommand;
public IMvxCommand ProfileCommand => profileCommand ?? (profileCommand = new MvxAsyncCommand(ShowProfile));
private async Task ShowProfile()
{
var navService = Mvx.IoCProvider.Resolve<IMvxNavigationService>();
await navService.Navigate<ProfileViewModel>();
}
The code in the MainPage can now be changed to connect the button to the ProfileCommand in MainViewModel.
<Button Text=”Profile” Command=”{Binding ProfileCommand}”/>
Navigation is now triggered from the ProfileViewModel.
Refactoring to use MvxNavigationViewModel
The code added to the ShowProfile method uses the Mvx IoC container to look up the IMvxNavigationService. This isn’t great as it is a hidden dependency. An alternative would be to add the IMvxNavigationService as a parameter to the MainPage constructor, which would be injected automatically
public MainViewModel(IMvxNavigationService navigationService, ICredentialService credentialService)
Adding the IMvxNavigationService as a parameter in the constructor means that the view model has to maintain a reference to it until it’s used by the ShowProfile method. Alternatively, we can change the base class to use the MvxNavigationViewModel which already exposes a NavigationService property.
public MainViewModel(IMvxLogProvider logProvider, IMvxNavigationService navigationService, ICredentialService credentialService) : base(logProvider, navigationService)
and the updated ShowProfile method is:
private async Task ShowProfile()
{
await NavigationService.Navigate<ProfileViewModel>();
}
Navigation using MvvmCross provides a nice abstraction away from the UI layer. It can also be customised to display master-detail, tabbed and other page types.