Composite views in MvvmCross

8
votes

I have a WPF MVVM application that I'd like to refactor to use MvvmCross to support a WPF and Mono for Android implementations.

Our application's views consists of:

  • A toolbar that is always visible
  • A navigation bar region
  • A main view region
  • A popup window region

Each of these regions is a UserControl on the main application window and a UiService simply swaps out the views in each region. In the case of the pop-up window, it too is just a UserControl on the main window that's visibility changes on Show or Hide calls to the UiService. The UiService also accepts a context parameter which allows state information to be passed into the view model to be shown.

The main views are typically a composite of several child views. In these cases, the main view model creates the child view models which are exposed as properties. The main view sets these properties as the data context of the child views.

I would think that MvvmCross would certainly support this style composite views, but I couldn't find an example of such. Are there any relevant MvvmCross examples? What would be the recommended approach for implementing in MvvmCross?

3
mvvmcross

3 Answers

6
votes

I would think that MvvmCross would certainly support this style composite views, but I couldn't find an example of such. Are there any relevant MvvmCross examples? What would be the recommended approach for implementing in MvvmCross?

This style of view isn't the default one for mobile apps - most mobile apps are page-based.

However, composite views are becoming increasingly common in tablet apps - and even mobile apps have their exceptions - e.g. tabs, panoramas, flyouts, etc

To allow for different kinds of display, each MvvmCross UI platform provides a presenter which you can customise as you need to.

This presenter class is where you can choose how you want to present your ViewModels and Views. Also, as it's just a C# class, it can delegate this responsibility to as many other objects as it wants to, allowing you to build up increasingly complex patterns of panels, flyouts, tabs, embedded navigationstacks, etc.

For some info on this, including links to some samples, see this slide deck - https://speakerdeck.com/cirrious/presenters-in-mvvmcross

The WPF and iOS TwitterSearch examples might be a good place to start on this - https://github.com/slodge/MvvmCross-Tutorials/tree/master/Sample%20-%20TwitterSearch

3
votes

Remember that you can Show 2 ViewModels on any given command.

For example, if a user completes a Login form and you which to load a composite UI then Show the navigation bar view model and the main view model.

You can then create a custom presenter to handed the layout of the corresponding views.

This sounds simple (and it is) but it took me a while to figure it out. The solution demonstrated in the TwitterSearch tutorial as Stuart mentions

2
votes

I've created a plugin that uses a custom presenter to allow multiple ViewModels to be shown on the same page as UserControls. It also allow the usual View navigation, so you can use the exact view models to have a composite views on Wpf, Andoid Tablets, Windows Store or iPad, and pages navigation on mobile devices:

https://github.com/ChristianRuiz/MvvmCross-ControlsNavigation