MvvmCross: Programmatically adding a view to CollectionView's subview

Question

Depending on user action, I want to dynamically add a view (within MvxViewController) to the subviews collection of a CollectionView. Here's what I'm doing:

Does NOT work: SubviewThree inherits MvxViewController

var mvxViewController = new SubviewThree();  // SubviewThree inherits MvxViewController
var uiView = mvxViewController.View;
uiView.ClipsToBounds = true;
uiView.Hidden = false;
uiView.Frame = new RectangleF(0, 0, 320, 200);
CollectionView.AddSubview(uiView);
CollectionView.BringSubviewToFront(uiView);

Works: SubviewThree inherits UIViewController

var mvxViewController = new SubviewThree();  // SubviewThree inherits UIViewController
var uiView = mvxViewController.View;
uiView.ClipsToBounds = true;
uiView.Hidden = false;
uiView.Frame = new RectangleF(0, 0, 320, 200);
CollectionView.AddSubview(uiView);
CollectionView.BringSubviewToFront(uiView);

Works:

var label = new UILabel();    // All simple controls work just fine
label.Text = "Test Label";
label.ClipsToBounds = true;
label.Hidden = false;
label.Frame = new RectangleF(0, 0, 320, 200);
CollectionView.AddSubview(label);
CollectionView.BringSubviewToFront(label);

What's the best way to achieve this in MvvmCross? Note that I cannot use data binding (and add it via view model's ObservableCollection) here since the view to be added depends on user action - it may not be of same type.

Here's what I'm trying to do:

Nested views in collection view

On right/left button touch, I want to swap views. The views are bound to different view models. The swapped view can either be either of V1 type (having a bar and another UIView) or some other type (just a UIView).

Here's my github link with sample project, just in case if the above image is not clear. You can just run the app and click on Add button. The code for adding view to subview is in BarCell.cs, line 158. There I've commented the above mentioned lines of code.

Github Link

I don't see any difference between the first two does not work and works. I also don't really understand why you want to add subviews to the collection view apart from supplementary views and collection item views. Perhaps a real example of the visual display that you are trying to achieve might help. — Stuart
Thanks for the prompt reply Stuart. I have updated my post with more information. Hope that helps. — MiHiR
So it wasn't working because the way I was creating view and view model to accommodate my structure, the MvxViewModelRequest of the view controller was not being set . I have updated the code so you can now see that work. First click Add, and then right button. — MiHiR

Stuart Stuart · Accepted Answer · 2013-09-13T11:57:17

In order for MvvmCross to create a View and to hook it up with it's ViewModel, MvvmCross uses a MvxViewModelRequest object. In iOS this is connected to the View using a Request property.

You can hook this up yourself if you want to - it's just a get/set property that has to be set before ViewDidLoad occurs - see IMvxTouchView.cs

Alternatively:

if you want MvvmCross to create the View (including doing the ViewModel-View lookup) then there are some extension methods in https://github.com/slodge/MvvmCross/blob/v3/Cirrious/Cirrious.MvvmCross.Touch/Views/MvxCanCreateTouchViewExtensionMethods.cs
if you don't need a viewController, then the MvxView class may be sufficient for you - see the N=32 video for an example of its use - http://slodge.blogspot.co.uk/2013/06/n32-truth-about-viewmodels-starring.html

MvvmCross: Programmatically adding a view to CollectionView's subview

1 Answers