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

Further to some feedback on the first couple of posts in the MVX+1 series (MVX=0, MVX=0F and MVX=1), I’ve gone back and added WPF and Mac support to the FirstDemo to show just how powerful MvvmCross is. I’ll cover very briefly here how to add these project types and then I’ll be updating the TipCalc post to include the basics for WPF and Mac setup in there too.

Let’s start with WPF:

1. Add a WPF App (.NET Framework) called FirstDemo.Wpf
   
2. Add a reference to MvvmCross NuGet package
3. Add reference to FirstDemo.Core project
4. Add ProxyMvxApplication to App.xaml.cs
   public abstract class ProxyMvxApplication : MvxApplication<MvxWpfSetup<Core.App>, Core.App> { }
5. Update App class in both App.xaml and App.xaml.cs to inherit from ProxyMvxApplication
6. Remove all code in the App class (in App.xaml.cs) except for the constructor with call to InitializeComponent
   public App()
   {
        InitializeComponent();
   }
7. Update MainWindow in both MainWindow.xaml and MainWindow.xaml.cs to inherit from MvxWindow
8. Create Views folder
9. Add new User Control (WPF) called FirstView.xaml
10. Update FirstView in both FirstView.xaml and FirstView.xaml.cs to inherit from MvxWpfView
11. Add XAML to FirstView.xaml
    <StackPanel Margin=”12,12,12,12″>
         <TextBox Text=”{Binding FirstName, Mode=TwoWay}”></TextBox>
         <TextBox Text=”{Binding LastName, Mode=TwoWay}”></TextBox>
         <TextBlock Text=”{Binding FullName}”></TextBlock>
    </StackPanel>

You should now be able to build and run the WPF application – notice how little code we have to add/change in order to get MvvmCross to work!

Next up is Mac which at the moment can only be done on a Mac (almost no surprises there – it’s the same as not being able to do UWP development on a Mac I guess):

1. Add a Cocoa App called FirstDemo.Mac
   
2. Add a reference to MvvmCross NuGet package
3. Add reference to FirstDemo.Core project
4. At this point I would recommend unloading your project, editing the csproj file manually to removed the legacy nuget reference and add the following ItemGroup. Also remove the reference to package.config, remove the actual package.config file and delete both bin and obj folders. Reload the Mac project and force a rebuild.
   <ItemGroup>
      <PackageReference Include=”MvvmCross” Version=”6.0.0″ />
   </ItemGroup>
5. Update AppDelegate to inherit from MvxApplicationDelegate
   [Register(“AppDelegate”)]
   public class AppDelegate: MvxApplicationDelegate<MvxMacSetup<App>, App>
   {
        public override void DidFinishLaunching(NSNotification notification)
        {
            MvxMacSetupSingleton.EnsureSingletonAvailable(this, MainWindow).EnsureInitialized();
            RunAppStart();
           // Due to a bug, do not call base DidFinishLaunching
            //base.DidFinishLaunching(notification);
        }
   }
   Note: There is a bug at the moment where if you don’t override DidFinishLaunching the application will crash on startup
6. Open main.storyboard – this should open the storyboard in the XCode designer
7. Select the existing view controller and set the Class and Storyboard ID to FirstView
   
8. Make sure the FirstView name change has been saved; return to VS for Mac and confirm that files FirstView.cs and FirstView.designer.cs have been created. If these have not been created, I would suggest doing a rebuild of your project to make sure the changes to the storyboard have been processed and the appropriate designer files created.
9. From the Object Library drag two TextField and a Label across onto the design surface
   
10. Open Project navigator and make sure you have FirstView.h and FirstView.m. If you don’t I would suggest closing both XCode and VS for Mac, deleting the bin and obj folder from within the FirstDemo.Mac folder and reopening the solution in VS for Mac. Rebuild the Mac project and then launch XCode by double clicking on main.storyboard.
    
11. Hide both Project navigator (left pane) and Utilities (right pane) and show the Assistant Editor (the icon button that has linked circles in top right corner of XCode)
12. From the navigator bar in the Assistant Editor, select Manual –> FirstView.Mac –> FirstView.h
    
13. Right-click on the first TextField
    
14. Click and drag the circle next to New Referencing Outlet across onto the FirstView.h immediately before the @End. When you release, you should be prompted to complete information about the new Outlet where you can specify the Name, textEditFirst, which will be the name of the backing variable you’ll be able to use to reference the TextField in code
    
15. Repeat the previous step for the second TextField, textEditSecond, and the Label, labelFull.
16. Update FirstView.cs to add the MvxFromStoryboard attribute, change the base class to MvxViewController and add data binding using the CreateBindingSet extension
    [MvxFromStoryboard(“Main”)]
    public partial class FirstView : MvxViewController<FirstViewModel>
    {
         public FirstView(IntPtr handle) : base(handle)
         {
         }




    public override void ViewDidLoad()
     {
         base.ViewDidLoad();
         var set = this.CreateBindingSet<FirstView, FirstViewModel>();
         set.Bind(textEditFirst).To(vm => vm.FirstName);
         set.Bind(textEditSecond).To(vm => vm.LastName);
         set.Bind(labelFull).To(vm => vm.FullName);
         set.Apply();
     }
}

And there you have it – build and run your Mac FirstDemo application