Handling of multiple forms

Question

New to MVVM. I haven't used any MVVM framework (WAF/MVVM Light) .I use relayCommand class from Josh Smith.

Got two forms , Win_Login (btnCancel and btnNext),Other one a selection form with combobox and two buttons(btnBack,btnNext) - Where user select stockticker like GOOG,MSFT etc.

I wrote a basic skeleton of View, and ViewModel for login and selection form.

What I want to achieve is on succesfull login , close the Login view and open Selection form, and click on (btnBack) should show loginForm again.Windows being Singleton.

I set view's dataContext like

<Window         
    x:Class="Ticker.Win_Login"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Ticker"
    Title="Ticker-Login"  Height="312" Width="394" WindowStartupLocation="CenterScreen" Background="#F9FBF4" >   

<Window.DataContext>
    <local:Win_LoginViewModel/>
</Window.DataContext>

<Grid></Grid

in the Win_LoginViewModel

private void LoginExecute()
    {
        if (!CanLoginExecute()) return;

        try
        {  
        //how I'll call close the current view

            //how I'll call selectTicker view

        }
        catch (Exception)
        {
            throw;
        }
    }

in Win_SelectTickerViewModel

 private Boolean CanBackExecute()
    {
        return true;
    }

    private void BackExecute()
    {
        if (!CanCancelExecute())
        {
            return;
        }

    //how I'll implement back here.
    }

I'd really appreciate if anyone can help me with some simple solution for given scenario (pbbly with some sample code).

Answer 1

I can't write a complete solution at this moment, but I know how it can be done.

In the most simple scenario you should create a parent view model for both the view models and bind methods of this model to commands of the child view models.

Something like this:

MainViewModel:

public class MainViewModel
{
    // store instances of child view models so that the entered data aren't lost
    private Win_LoginViewModel _loginViewModel;
    private Win_SelectTickerViewModel _selectTickerViewModel;

    private UserControl _currentView;
    // will be bound to the view and dynamically changed
    public UserControl CurrentView
    {
        get { return _currentView; }
        set 
        {
            _currentView = value;
            RaisePropertyChanged("CurrentView");
        }
    }

    public void GoToSelectTickerView()
    {
        // create _selectTickerViewModel if it is necessary

        this.CurrentView = new SelectTickerView { DataContext = _selectTickerViewModel };
    }

    public void GoToLoginView()
    {
        // create _loginViewModel if it is necessary

        this.CurrentView = new LoginView { DataContext = _loginViewModel };
    }
}

SelectTickerViewModel:

public Win_SelectTickerViewModel
{
    private MainViewModel _parentModel;

    private void BackExecute()
    {
        //...
        _parentModel.GoToLoginView();
    }
}

And the xaml code will be like this:

<Window x:Class="Ticker.MainWindow" ...>
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>

    <ContentControl Content="{Binding CurrentView}" />
</Window>

You can improve this code by using the DataTemplateSelector class so that there is no user controls in view model: https://stackoverflow.com/a/5310213/427225

Also you can look at possible ways to organize communication between parent and child view models: https://stackoverflow.com/a/8551832/427225