CODEWITHSUNDEEP
mvvmcross
jeremy303
jeremy303

Reputation: 9241

Composite views in MvvmCross

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:

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?

Upvotes: 8

Views: 4285

Answers (3)

user769263
user769263

Reputation: 21

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

Upvotes: 2

Chris Koiak
Chris Koiak

Reputation: 1059

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

Upvotes: 3

Stuart
Stuart

Reputation: 66882

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

Upvotes: 6

Related Questions