{"id":941,"date":"2013-12-19T12:10:54","date_gmt":"2013-12-19T12:10:54","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=941"},"modified":"2013-12-19T12:10:54","modified_gmt":"2013-12-19T12:10:54","slug":"mvvm-cross-getting-started","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/mvvm-cross-getting-started\/","title":{"rendered":"MVVM Cross – Getting Started"},"content":{"rendered":"

As the primary aim of MVVM cross is to supply a cross platform MVVM framework, our primary goal must be to try to ensure that all cross platform compatible code is separated from non-cross platform. Ideally all non-UI code would be cross platform in a perfect world.<\/p>\n

So this and any other posts on MVVM cross will assume and aim to ensure that the non-UI code is as portable as possible between platforms. The example code etc. will assume that Xamarin tools have been installed in Visual Studio, but this is not a requirement for the examples to work.<\/p>\n

Creating the view model<\/strong><\/p>\n

    \n
  1. So to begin with we need to create a PCL (Portable Class Library). Give the project a name (i.e. I named mine Common) and then press OK, then select all the platforms you want the library to be compatible with – as I have Xamarin tools for Visual Studio installed the selected platforms include Windows, Windows 8, Windows Phone 8, Xamarin.Android and Xamarin.iOS<\/li>\n
  2. Delete Class1.cs as we’re not going to be needing it<\/li>\n
  3. Using NuGet, add MVVM cross to the project<\/li>\n
  4. Now, MVVM cross uses IoC and a naming based convention approach to wiring views and view models together, so you’ll notice that by default NuGet created a ViewModels folder with a FirstViewModel.cs. Whilst you can move the location or change the namespace of the view model file, it’s name and that of the corresponding view need to map to one another. Like Caliburn Micro a XXXViewModel is mapped to an XXXView.<\/li>\n
  5. For this sample we’ll implement the FirstViewModel implemented in Stuart Lodge’s N+1 youtube video on using MVVM cross. So edit the FirstViewModel to look like the following\n
    \r\npublic class FirstViewModel : MvxViewModel\r\n{\r\n   private string firstName;\r\n   private string lastName;\r\n\r\n   public string FirstName\r\n   {\r\n      get { return firstName; }\r\n      set\r\n      {\r\n         firstName = value; \r\n         RaisePropertyChanged(() => FirstName);\r\n         RaisePropertyChanged(() => FullName);\r\n      }\r\n   }\r\n\r\n   public string LastName\r\n   {\r\n      get { return lastName; }\r\n      set\r\n      {\r\n         lastName = value;\r\n         RaisePropertyChanged(() => LastName);\r\n         RaisePropertyChanged(() => FullName);\r\n      }\r\n   }\r\n\r\n   public string FullName\r\n   {\r\n      get { return String.Format("{0} {1}", firstName, lastName); }\r\n   }\r\n}\r\n<\/pre>\n
    Note: Our view model inherits from MvxViewModel\n<\/li>\n<\/ol>\n
    And that’s it for now.<\/p>\n
    So to review the above, we create a PCL library, add the MVVM cross assemblies (in this case we used NuGet), derive any view models from MvxViewModel and we’re done.<\/p>\n
    Note however that we kept the default FirstViewModel class, had we changed this name we’d also need to change the code in App.cs to reflect this change. The view model we created is basically the app view model so it’s registered in the App.cs file. But you’d get a compile time error if you didn’t make this change so that’s easy to fix.<\/p>\n
    Creating the view<\/strong><\/p>\n
    Whilst it’s probably more interesting to now create an iOS or Windows Phone 8 app. I want to start with a WPF application, so here’s the process for creating a WPF app and connecting it to our view model.<\/p>\n
      \n
    1. Create a new WPF Application project (I’m using the same solution as my PCL project created above)<\/li>\n
    2. I’m set this project as the start StartUp project<\/li>\n
    3. Using NuGet add MVVM cross to the references<\/li>\n
    4. Add a reference to our PCL project<\/li>\n
    5. Now remember that the view and view model are mapped by a naming convention, so in the Views folder you should find FirstView.xaml. Notice the view is an MvxWpfView, so similarly new views should also be derived from this class.<\/li>\n
    6. Again, as per Stuart Lodge’s N+1 video we’ll simply add the following to the XAML for the FirstView.xaml\n
      \r\n<TextBox Text="{Binding FirstName, Mode=TwoWay}"\/>\r\n<TextBox Text="{Binding LastName, Mode=TwoWay}"\/>\r\n<TextBlock Text="{Binding FullName, Mode=OneWay}"\/>\r\n<\/pre>\n<\/li>\n
    7. \nFinally and before we can run this code. I named my PCL assembly Common and thus we need to change the Setup.cs file to reflect this. the method CreateApp<\/em> needs to look like this<\/p>\n
      \r\nprotected override IMvxApplication CreateApp()\r\n{\r\n   \/\/ uses the App object in our PCL assembly\r\n   return new Common.App();\r\n}\r\n<\/pre>\n<\/li>\n<\/ol>\n
      Now this should run – no need to assign any views to the MainWindow, MVVM cross will handle this for you based upon your App class in the PCL assembly.<\/p>\n","protected":false},"excerpt":{"rendered":"
      As the primary aim of MVVM cross is to supply a cross platform MVVM framework, our primary goal must be to try to ensure that all cross platform compatible code is separated from non-cross platform. Ideally all non-UI code would be cross platform in a perfect world. So this and any other posts on MVVM […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-941","post","type-post","status-publish","format-standard","hentry","category-mvvm-cross"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=941"}],"version-history":[{"count":6,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/941\/revisions"}],"predecessor-version":[{"id":947,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/941\/revisions\/947"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}