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

[Repost: Apologies for those who have already read this but there were some issues with the link generated for the previous post, so I’ve reposted it]

Updated 16/4/2018: Reference to MvvmCross have been updated to v6.0.0

Yes, this is going to be a sequence of posts reworking the infamous N+1 series that Stuart Lodge did starting almost exactly 5 years ago. As we approach the 5 year anniversary of these posts I thought it only fitting to cover this series again as a way of introducing MvvmCross v6 which will be released very shortly has just been released. Unlike the original series that were YouTube videos accompanied by blog posts, this series will only contain the posts, mainly because I find generating videos to be time consuming. Anyhow, here goes:

We’ll start by creating a Blank Solution.

Into the solution we’ll add a Core Library that will contain an App class and our first ViewModel:

1. Add a Class Library (.NET Standard) called FirstDemo.Core
   
2. Add a reference to MvvmCross NuGet package (v6.0.0-beta.8 v6.0.0 at time of writing)
3. Rename the default Class1.cs to App.cs, and allow Visual Studio to rename class to App
4. Change App to inherit from MvxApplication
5. Add a folder, ViewModels, and add a class called FirstViewModel.
6. Change FirstViewModel to inherit from MvxViewModel
7. Add logic to FirstViewModel to include FirstName, LastName and a calculated FullName
8. Override Initialize method in App to call RegisterAppStart, specifying FirstViewModel as the startup ViewModel

Let’s start with a Universal Windows Platform UI:

1. Add a Blank App (Universal Windows) called FirstDemo.Uwp
   
2. Make sure Minimum and Target versions are set to at least the Fall Creators Update so that it supports .NET Standard 2.0
   
3. Update NuGet package Microsoft.NETCore.UniversalWindowsPlatform to the latest stable version (6.0.8 at time of writing)
4. Add a reference to MvvmCross NuGet package
5. Add reference to FirstDemo.Core project
6. Add a help class ProxyMvxApplication to the FirstDemo.Uwp project – this is a proxy class to compensate for the lack of generics support in XAML

public abstract class ProxyMvxApplication: MvxApplication<MvxWindowsSetup<Core.App>, Core.App> { }

7. Change App.xaml and App.xaml.cs to inherit from ProxyMvxApplication
8. Remove all code in App.xaml.cs other than the constructor which should contain a single call to InitializeComponent
9. Delete MainPage.xaml and MainPage.xaml.cs
10. Add a Views folder, and  add a FirstView based on the Blank XAML page template
11. Change FirstView.xaml and FirstView.xaml.cs to inherit from MvxWindowsPage
12. Add some TextBoxes and a TextBlock to the FirstView, complete with databinding
13. Hit F5 and run the application (you may have to set the FirstDemo.Uwp project as the startup project and make sure it’s set to build and deploy using the Configuration Manager)

Next let’s add the Android UI:

1. Add a Android App (Xamarin) called FirstDemo.Droid
   
2. Select the Blank App template, and the minimum Android version
3. Update the Xamarin.Android.Support.Design NuGet package (at time of writing the latest is 27.0.2)
4. Update the Android version to Use Latest Platform
   
5. Add a reference to MvvmCross NuGet package
6. Add a reference to MvvmCross.Droid.Support.V7.AppCompat package
7. Add reference to FirstDemo.Core project
8. Add a new class, MainApplication, that inherits from MvxAppCompatApplication
   public class MainApplication : MvxAppCompatApplication<MvxAppCompatSetup<App>, App>
   
9. Rename MainActivity.cs to SplashScreen.cs and let Visual Studio rename the class
10. Rename activity_main.axml to SplashScreen.axml, and adjust layout to indicate application loading
11. Adjust SplashScreen class to inherit from MvxSplashScreenAppCompatActivity and set NoHistory to true (since we don’t want the user to be able to press the back button and go back to the splash screen)

[Activity(Label = “@string/app_name”, Theme = “@style/AppTheme”, MainLauncher = true, NoHistory = true)]
public class SplashScreen : MvxSplashScreenAppCompatActivity

12. Add a folder, Views, and add a new Activity, FirstView.cs
13. Add a new Android Layout to the Resources/Layout folder, FirstView.axml, with a couple of EditText and a TextView, all data bound using MvxBind
14. You may run into an error: “error XA4210: You need to add a reference to Mono.Android.Export.dll when you use ExportAttribute or ExportFieldAttribute.” If you do, you just need to Add Reference to Mono.Android.Export (search in the Add Reference dialog).
15. Set the startup project to be FirstDemo.Droid and press F5 to run the application

Lastly, let’s add the iOS UI:

1. Add an iOS App (Xamarin) called FirstDemo.iOS
   
2. Select the Blank App template, Universal devices support and Minimum iOS Version of 11.2
3. Add a reference to MvvmCross NuGet package
4. Add reference to FirstDemo.Core project
5. Update AppDelegate class to inherit from MvxApplicationDelegate
   public class AppDelegate : MvxApplicationDelegate<MvxIosSetup<App>, App>
6. Add an Empty Storyboard, called Main.storyboard, to the root of the project
7. Add a ViewController to the Main.storyboard using the designer and set the Class and Storyboard ID to FirstView (also make sure the “User Storyboard ID” checkbox is set to true)
8. Move the generated FirstView.cs and FirstView.designer.cs files (from the previous step) into a new folder called Views, and adjust the namespace of the FirstView class to FirstView.iOS.Views
9. Add two UITextField and a UILabel to the FirstView ViewController using the Main.storyboard designer (make sure each element has a Name set so it can be referenced from code)
10. Update the FirstView class to inherit from MvxViewController
    [MvxFromStoryboard(“Main”)]
    public partial class FirstView : MvxViewController<FirstViewModel>
11. Add logic to FirstView to enable databinding using the CreateBindingSet extension method
12. Set the startup project to be FirstDemo.Droid and press F5 to run the application
    Update 16/4/2018: For some reason the iOS App (Xamarin) project template still uses a package.config. During the update to the stable v6.0.0 package the package.config file in FirstDemo.iOS was removed, the reference in FirstDemo.iOS.csproj to MvvmCross was manually removed and the following ItemGroup added:
    <ItemGroup>
       <PackageReference Include=”MvvmCross” Version=”6.0.0″ />
    </ItemGroup>

The final code is available at https://github.com/nickrandolph/MvxPlus1DaysOfMvvmCross/tree/master/Mvx-00-FirstDemo

To get this to work I would suggest running the latest Visual Studio for Mac or PC. Hit me up on Twitter or Slack if you have any issues following the steps or running the samples.