A Comprehensive Guide to Creating a Xamarin.Forms App with MvvmCross (Part 4 of 5)

July 13, 2015 // By Brent Edwards

This is the fourth part in a 5 part series. We’ve looked at Xamarin.Forms and why you should use MvvmCross, how to create your Xamarin.Forms project (Part 1), how to include MvvmCross in your Xamarin.Forms project (Part 2), and how to get your app running on Android (Part 3). In this part, we’ll look at what it takes to get your app up and running on Windows Phone.

Open your solution from the first three parts and carry on.

In the WinPhone project:

35. Add the following to the constructor in App.xaml.cs:

    // Xamarin.Forms setup
    var setup = new Setup(RootFrame);
    setup.Initialize();
    

36. Add the following to App.xaml.cs Application_Launching:

    RootFrame.Navigating += RootFrameOnNavigating;
    

37. Add the following to App.xaml.cs:

    private void RootFrameOnNavigating(object sender, NavigatingCancelEventArgs args)
    {
    	args.Cancel = true;
    	RootFrame.Navigating -= RootFrameOnNavigating;
    	RootFrame.Dispatcher.BeginInvoke(() =>
    	{
    		Mvx.Resolve<IMvxAppStart>().Start();
    	});
    } 
    

38. Delete the ToDo-MvvmCross folder
39. Add the Helpers/MvxFormsWindowsPhonePagePresenter class
1. This class came from a comment in the Xamarin forums: http://forums.xamarin.com/discussion/comment/76871/#Comment_76871

   public sealed class MvxFormsWindowsPhonePagePresenter : IMvxPhoneViewPresenter
   {
   	public static NavigationPage NavigationPage;
   
   	private PhoneApplicationFrame _rootFrame;
   
   	public MvxFormsWindowsPhonePagePresenter(
   		PhoneApplicationFrame rootFrame)
   	{
   		_rootFrame = rootFrame;
   	}
   
   	public async void Show(MvxViewModelRequest request)
   	{
   		if (await TryShowPage(request))
   			return;
   
   		Mvx.Error("Skipping request for {0}",
   			request.ViewModelType.Name);
   	}
   
   	private async Task<bool> TryShowPage(MvxViewModelRequest request)
   	{
   		var page = MvxPresenterHelpers.CreatePage<Page>(request);
   		if (page == null)
   			return false;
   
   		var viewModel = MvxPresenterHelpers.LoadViewModel(request);
   
   		if (NavigationPage == null)
   		{
   			Xamarin.Forms.Forms.Init();
   			NavigationPage = new NavigationPage(page);
   			_rootFrame.Navigate(new Uri("/MainPage.xaml",
   				UriKind.Relative));
   		}
   		else
   		{
   			await NavigationPage.PushAsync(page);
   		}
   
   		page.BindingContext = viewModel;
   		return true;
   	}
   
   	public async void ChangePresentation(MvxPresentationHint hint)
   	{
   		if (hint is MvxClosePresentationHint)
   		{
   			await NavigationPage.PopAsync();
   		}
   	}
   }
   

40. Update Setup to override CreateViewPresenter method and return the newly created presenter:

    protected override IMvxPhoneViewPresenter CreateViewPresenter(PhoneApplicationFrame rootFrame)
    {
    	var presenter = new MvxFormsWindowsPhonePagePresenter(rootFrame);
    	return presenter;
    }
    

41. In Main.xaml.cs, replace the previously commented out call to LoadApplication with:

    var navigationPage = MvxFormsWindowsPhonePagePresenter.NavigationPage;
    Content = navigationPage.ConvertPageToUIElement(this);
    

That’s it! You should now have your app up and running on both Android and Windows Phone. We’re almost there! In the final part of the series, we’ll get your app up and running on iOS.

You’ve just read part 4 of the “Comprehensive Guide to Creating a Xamarin.Forms App with MvvmCross” blog series. To read part 5, click here. If you’d like to contact Magenic, email us or call us at 877-277-1044.

Categories // Mobile
Tags Xamarin , Xamarin.Forms , MvvmCross , MVVM , Android , iOS , WindowsPhone