Question

I have a View / ViewModel where a ProductList is loaded. This list is not visible on the screen.

What I need to do is show a new View/ViewModel (e.g. SelectProductView / SelectProductViewModel), pass the ProductList to them, and after a user selects a particular Product, close this view, and make use of selected product.

What is the best way to achieve this?

I am using MVVMLight, but I guess the ideas should not be restricted just to it.
The easiest way is to create a view, and pass collection to it, but that doesn’t sound MVVM friendly. I was thinking of creating a SelectProductViewModel from the first ViewModel and pass the collection to it, but I don’t know how would I automatically create SelectProductView and bind it to created SelectProductViewModel.

Edit: in my application view structure is a bit complex. I have a main view, which basically needs to host a SelectProductView, since this view must cover whole screen. MainView contains lots of child and grandchild views (through tabs), so there could be 3 different child views or grand childViews that could issue a request for a product to be selected. Also, some view will not have products preloaded, so this task should probably be propagated to a SelectProductViewModel.

Example of Structure:

                              MainView
                        /                   \
         ChildViewA                                   ChildViewB
            /  \                                       /     \
GrandChildViewA1 GrandChildViewA2            GrandChildViewB1 GrandChildViewB2

So, GrandChildViewA1, ChildViewB and GrandChildViewB2 could issue a request for a product to be selected. Only the view that issued a request should get the selected product, others should not bother with it. GrandChildViewA1 will have loaded products in it, but GrandChildViewB2 will not have ProductList loaded in it. This means, for performance sake, that GrandChildViewA1 should pass product list to SelectProductViewModel, while GrandCHildViewB2 will not have Product list in it, so SelectProductViewModel should fetch data from database.

Answer 1

I would create a generic viewModel which defines a contract for receiving data.

public abstract class PassDataViewModel<T> : ObservableObject
{
    public T Data { get; }
}

I would then create a more general ViewModel for your product list like so:

public class SelectProductViewModel : PassDataViewModel<Product>
{
    private Product _selectedProduct;
    private ObservableCollection<Product> _products = new ObservableCollection<Product>();

    public SelectProductViewModel(IList<Product> products)
    {
        _selectedProduct = _products.First();
    }

    public IEnumerable<Product> Products
    {
        get { return _products; }
    }

    public Product SelectedProduct
    {
        get { return _selectedProduct; }
        set
        {
            _selectedProduct = value;
            OnPropertyChanged("SelectedProduct");
            OnPropertyChanged("Data");
        }
    }

    public Product Data
    {
        get { return _selectedProduct; }
    }
}

You would use this in the following way:

1. Your first viewModel can create an instance of the SelectProductViewModel (when a command is invoked, for example)
2. You pass your products list to the new SelectProductViewModel instance.
3. Use a DataTemplate to change the view on your screen (this post will show you how to do this).
4. Have a property in the parent viewModel that returns the product returned from the data property of the SelectProductViewModel (you will need to propagate the PropertyChanged event to your parent viewModel).