xamarin forms working with mvvmcross

Question

Does anybody have any code samples that show an IOS and/or Android native app using both xamarin forms and mvvmcross views in the same project?

I found plenty of sample apps with one or the other but none using both

For example in a ViewModel when I call:

this.ShowViewModel<MyCustomViewModel>();

In my iOS project I want to be able to have the ability to create a xamarin forms ContentPage OR an mvvmcross MvxViewController.

i.e. in my common project I will have both XForm views and, for my more complex views where XForms isn't rich enough, mvvmcross views

Any code samples or github projects would be great. I have searched everywhere already!

Answer 1

I had the exact same thoughts couple of months ago, as I really liked the MvvmCross concept, and of course the advantage of using XForms for unified UI.

MvvmCross is great for building app with common logic (the shared project), and having the UI in different projects (iOS & Android).

However, this is not needed, as all the UI is stored in a single shared project, and the navigation and all other Mvvm patterns can be easily achieved with MvvmLight (check out this post).

In cases where you want to have a different UI in a specific platform, Xamarin forms introduced a new concept called Renderers - where you can invoke the native UI capabilties, as you would have done in two different UI components before XForms.

An example of usage in Renderer (taken from Xamarin sample):

In your shared project, you'd like to have a custom Entry with different look in iOS, then you'll create this class :

public class MyEntry : Entry {}

And in Your iOS code, you'd like to do something like this:

[assembly: ExportRenderer (typeof (MyEntry), typeof (MyEntryRenderer))]
public class MyEntryRenderer : EntryRenderer
{
  // Override the OnElementChanged method so we can tweak this renderer post-initial setup
  protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
  {
    base.OnElementChanged (e);

    if (Control != null) {   // perform initial setup
      // do whatever you want to the UITextField here!
      Control.BackgroundColor = UIColor.LightGray;
      Control.BorderStyle = UITextBorderStyle.Line;
    }
  }
}

After you'll get familiar with Mvvm light, you'll see that the navigation between viewModels is done by a component called INavigationService

Here is a code snippet from my app:

_navigationService.NavigateTo("UserDetailsPage", user);

I'm in a context of a view model, which represents a page that contains a users list, and when a specific user is selected, I'm calling to NavigationService, with the key 'UserDetailsPage', which is registered in the configuration for a page, which also receives a parameter 'user'.

I would also like to recommend this video for capturing the best of MvvmLight has to offer.