MVX=0F: A first MvvmCross Application (MVX+1 days of MvvmCross)

One of the awesome things about MvvmCross is that you can take the exact same set of ViewModels that you used for your UWP, iOS, Android applications and use them in a Xamarin Forms application. As we go through the MVX+1 series, I’ll make some space for talking about Xamarin Forms as well.

In this post we're going to extent what we started in the previous post by adding a Xamarin Forms interface – this means creating new head projects for iOS, Android and UWP too. All up we’re adding four new projects but fear not, most of the heavy lifting is done by Visual Studio:

Into our existing solution we’re going to add a new Xamarin Forms project:

1. Add a new Mobile App (Xamarin.Forms) project called FirstDemo.Forms
   
2. When prompted, select Blank App, make sure all three Platforms are checked and make sure you select the .NET Standard option (Do NOT use the Share Project option).
   
3. Upgrade the Xamarin.Forms NuGet to latest for all four Forms projects (at time of writing is 2.5.1.444934)
4. Add MvvmCross NuGet Package to all Forms projects (Forms, Forms.iOS, Forms.Android and Forms.UWP)
5. Add MvvmCross.Forms NuGet Package to all Forms projects (Forms, Forms.iOS, Forms.Android and Forms.UWP)

Note: You may need to upgrade to latest NuGet packages for all Forms projects before you can add references to the MvvmCross packages.

Update the FirstDemo.Forms project

1. Remove all code in App class except for constructor with a call to InitializeComponent
2. Create Views folder
3. Move MainPage into Views folder and rename to FirstView
4. Adjust FirstView.xaml and FirstView.xaml.cs to change class name to FirstView and to make it inherit from MvxContentPage
5. Add two Entry and a Label with data binding to FirstView.xaml

Update the FirstDemo.Forms.Uwp project

1. Update Microsoft.NETCore.UniversalWindowsPlatform (v6.0.8 at time of writing)
2. Add reference to FirstDemo.Core
3. Change MainPage to inherit from MvxFormsWindowsPage
4. Remove all code other than the InitializeComponent method call in the constructor of MainPage
5. Add ProxyMvxApplication
   public abstract class ProxyMvxApplication : MvxWindowsApplication<MvxFormsWindowsSetup<Core.App, FirstDemo.Forms.App>, Core.App, FirstDemo.Forms.App, MainPage>
6. Change App.xaml and App.xaml.cs to inherit from ProxyMvxApplication
7. Remove all code other than the constructor, with a single call to InitializeComponent, in App.xaml.cs

Update the FirstDemo.Forms.Android project

Note: If you run into the following error, you may need to rename your project. In this case we renamed it to Forms.Droid (as well as the folder the project resides in)
1>C:\Program Files (x86)\Microsoft Visual Studio\Preview\Enterprise\MSBuild\Xamarin\Android\Xamarin.Android.Common.targets(2088,3): error MSB4018: System.IO.PathTooLongException: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.

1. Change Forms.Android project to target latest Android SDK (v8.1 at time of writing)
2. Upgrade Xamarin.Android.Support.* to latest for the Forms.Android project
3. Add reference to FirstDemo.Core
4. Add an additional class, MainViewModel, to FirstDemo.Core that inherits from MvxViewModel [NB: This is required because of a bug in the current beta]
5. Add custom setup class [NB: This is required because of a bug in the current beta]
   public class CustomSetup : MvxFormsAndroidSetup<Core.App, FirstDemo.Forms.App> { }
6. Change MainActivity inheritance, remove code except for a constructor:
   public class MainActivity : MvxFormsAppCompatActivity<MainViewModel>
   {
        public MainActivity() : base()
        {
            this.RegisterSetupType<CustomSetup>();
        }
   }

Update the FirstDemo.Forms.iOS project

1. Add reference to FirstDemo.Core
2. Changed inheritance of AppDelegate
   public class AppDelegate : MvxApplicationDelegate<MvxIosSetup<App>, App>

And there you have it – you should be able to build and run all three Forms projects utilising the same view models that the non-Forms projects used.