How to bind view model to a UserControl in MVVMCROSS?

Question

I am using the excellent Mvvmcross and Ninja Coder for Mvvmcross for building a cross platform app. For my windows store app I have created a view and a view model using Ninja coder. I have also created a UserControl which will be referenced in the view. Hence I need to bind the same viewmodel to the User control also. I have been trying to set the Data context of the user control to the singleton instance of viewmodel. I have set the data context of the user control like below.

public sealed partial class SearchResultsGridViewControl : UserControl
{
    private SearchresultsViewModel _viewModel;

    public SearchResultsGridViewControl()
    {
        this.InitializeComponent();

        _viewModel = Mvx.IocConstruct<SearchresultsViewModel>();

        this.DataContext = _viewModel;
    }
}

But when I refer this User Control in my main view, it throws an error in XAML saying "Object Reference not set to an instance of an object. Cannot create an instance of SearchResultsGridViewControl".

This is my viewmodel:

    public class SearchresultsViewModel : BaseViewModel
{
    private ISearchResultsService _searchResultsService;

    public SearchresultsViewModel(ISearchResultsService searchResultsService)
    {
        _searchResultsService = searchResultsService;
        var items = _searchResultsService.DisplaySearchResults();
        SchoolDetails = new ObservableCollection<School>(items);            
    }

    private ObservableCollection<School> _schoolDetails;

    public ObservableCollection<School> SchoolDetails
    {
        get { return _schoolDetails; }
        set
        {
            _schoolDetails = value;
            RaisePropertyChanged(() => SchoolDetails);
        }
    }

    public ICommand RefineCommand
    {
        get
        {
            refineCommand = refineCommand ?? new MvxCommand(FilterSearchResultsBasedOnRefine);
            return refineCommand;
        }
    }

    public void FilterSearchResultsBasedOnRefine()
    {           
        SchoolDetails = new ObservableCollection<School>(_searchResultsService.FilterSchoolsBasedOnRefine(MidDayMeals, PlayGround, DigitalClassroom, DayBoarding, TransportationFacility));
    }
}

The grid view in my usercontrol is getting populated when it loads for the first time. But when RefineCommand is called to update the collection from the main view, the grid view in usercontrol is not getting updated. And I am guessing its because of that error earlier in setting the data context of the user control to view model. Please let me know what could be going wrong. I have been banging my head about it for days.

Answer 1

I've been using MVVMCross with Windows Store fairly recently. Without looking back at my code, I'm pretty sure that the Datacontext will inherit from it's parent unless overridden.

So as long as the MvxPage that you have presented has a viewmodel, any user control that you add to it, either in XAML or in code-behind, should share the same data context. If you are looking at doing some MVVMCross data-binding from the User Control, you should probably make sure your User Control implements IMvxStoreView, and ensure that the ViewModel property is set to the value of DataContext.

Hope that help.

Cheers, Tristan

Answer 2

I think your first problem "Object Reference not set to an instance of an object" is a design time only issue - because you are trying to set the viewmodel using Mvx. at design time. You can workaround this issue if you want to by using design time viewmodels and possibly also by using one of the design time helpers (see https://github.com/MvvmCross/MvvmCross/blob/v3.1/CrossCore/Cirrious.CrossCore.Wpf/Platform/MvxDesignTimeHelper.cs).

---

I've no idea what your second problem is "The grid view in my usercontrol is getting populated when it loads for the first time. But when RefineCommand is called to update the collection from the main view, the grid view in usercontrol is not getting updated" - this sounds like an issue either in your xaml or in the results returned from FilterSearchResultsBasedOnRefine. From the current level of detail, I can't see what it is. My "gut feeling" is that the problem won't be MvvmCross specific - it'll just be a general Mvvm/data-binding issue.