MvvmCross - Mvvm Across WP7, MonoDroid and MonoTouch

This is just a quick intro post for now... a more full story will follow when I get a bit more of that "spare time" thing, including time to write a few more samples.

I've recently been working on a big cross-platform mobile project targeting Wp7, Android and iPhone. As an inspiration for this we started using the MonoCross platform (http://code.google.com/p/monocross/) although we quickly discovered that MVVM rather than MVC was the way we wanted to go, especially as we were working WP7-first.

To enable this project, we've built our own MVVM framework - MvvmCross - available under a MS-PL license on GitHub at https://github.com/slodge/MvvmCross 

Explaining the framework is going to take a little time... and so will have to wait for a longer series of posts. However, as a quick introduction, the Customer Management sample currently builds and runs across the three major platforms -  https://github.com/slodge/MvvmCross/tree/master/Sample%20-%20CustomerManagement 

This sample has:

• a shared ViewModel and Model project -  https://github.com/slodge/MvvmCross/tree/master/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement - this allows us to use the exact same C# logic across all 3 platforms, with our Dependency Injection framework providing platform specific implementations and optimisations where absolutely necessary.
• separate UI projects for each of the WP7, Touch and Droid projects - so that each UI can take advantage of platform-specific UI look and feel, user controls, etc.

As a detailed example, consider the details view for a Customer.

• In the shared project, this ViewModel is just a set of INotifyPropertyChanged properties and some IMvxCommand properties - see: https://github.com/slodge/MvvmCross/blob/master/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement/ViewModels/DetailsCustomerViewModel.cs
  
  
• In the WP7 UI, the ViewModel is represented purely in XAML - e.g. in DataBinding statements like:
  

  [TextBlock Text="{Binding Customer.Name}"/]

  
  https://github.com/slodge/MvvmCross/blob/master/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement.WindowsPhone/Views/CustomerView.xaml
  
  
• In the Android UI, the ViewModel is represented purely in Android XML - e.g. in Mvx DataBinding attributes like
  

  [TextView
  android:layout_height="wrap_content" 
  android:layout_width="fill_parent" 
  android:textAppearance="?android:attr/textAppearanceLarge" 
  customermanagement:mvxbind="{'Text':{'Path':'Customer.Name'}}"/]
  

  
  https://github.com/slodge/MvvmCross/blob/master/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement.Droid/Resources/Layout/Page_DetailsCustomerView.axml
  
  
• And in the Touch UI, the ViewModel is represented using a slightly modified version of the MonoTouch.Dialog UI
  
  

  new StringElement("Name").Bind(this, "{'Value':{'Path':'Customer.Name'}}"),
  

  
  https://github.com/slodge/MvvmCross/blob/master/Sample%20-%20CustomerManagement/CustomerManagement/CustomerManagement.Touch/Views/CustomerView.cs
  
  
• If that's not enough for you.... there is also a (not yet fully formed) port of MvvmCross to the full .Net framework - so you can run your viewmodels through a Console UI... with MonoMac, WPF, Silverlight and WinRT/Metro UIs also possible.

Interested? Confused? Want to know more?

Well the source code is there to play with... and I will post some more samples and some more info soon... possibly on a blog with better code formatting!

One warning though... some of the code still needs a little finishing... especially the Touch/Dialog integration - only a few Elements are currently bound. If anyone wants to help... please let me know!