Who owns the Message Box, the View or the ViewModel?

Question

I'm developing a WPF application using Mahapps.Metro, a Nuget package that provides "modern" UI styling.

I have created a dialog that is one of those selection dialogs where you select an item on the left hand side, click the right arrow button, and the item moves to the right hand side.

One of the validation rules in my dialog is that at least one item has to be selected before you push the button, so (in the Code Behind of my view) I open a message box and notify the user if he doesn't select at least one item:

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    if (!IsAnySelected(Users))
    {
        // MetroWindow call
        this.ShowMessageAsync("Permissions", "Please select a User.");
        return;

        // Call ViewModel `AddPermissions()` method here.
    }
}

bool IsAnySelected(DataGrid dataGrid)
{
    foreach(dynamic d in dataGrid.ItemsSource)
    { 
        if (d.IsSelected) return true;
    }
    return false;
}

^{(The DataGrid is bound to an ObservableCollection in the ViewModel)}

Because ordinary message boxes in WPF are not stylable, Mahapps provides its own. It was here that I discovered that MahApps throws a null reference exception when I try to open a message box in my View. It has something to do with my setup, because their demo works just fine.

It turns out that someone provided a way to open a Mahapps message box in the View Model instead of the view. My question is, why would you want to do this?

Doesn't the View own responsibility for any visual elements (including message boxes), and isn't validation the one thing that's permissible to do in the View's Code Behind?

Note that this approach causes a new wrinkle, which is that you now need a way to fire the View Model's method or ICommand from CodeBehind:

(DataContext as SecurityDialogViewModel).AddPermissions();

Answer 1

I've always taken the approach of exposing user dialogs via a callback interface. OpenFileDialog, SaveFileDialog, MessageBox, FolderSelectionDialog, etc are defined by an interface:

public interface IMainViewCallbacks
{
        bool GetPathViaOpenDialog(out string filePath, string szFilter, 
                 string szDefaultExt, string szInitialDir);
        bool GetPathViaSaveDialog(out string filePath, string szFilter, 
                 string szDefaultExt, string szInitialDir);
        bool GetFolderPath(out string folderPath);
        MessageBoxResult MessageBox(string messageBoxText, string caption, 
                  MessageBoxButton button, MessageBoxImage icon);
}

Then, implement the interface in the view codebehind.

When creating the viewmodel in the view ctor, pass this:

public class MainViewMode : IMainViewCallbacks
{
   private vm = null;
   public MainWindow()
   {
      vm = new MainViewModel(this);
      this.DataContext = vm;
   }
}

Finally, add an argument to your viewmodel ctor to receive the interface:

public class MainViewModel
{
    IMainViewCallbacks Calllbacks = null;
    public MainViewModel(IMainViewCallbacks cb)
    {
       // stash the callbacks for later.
       this.Callbacks = cb;
    }

    // pseudocode for the command that consumes the callback
    public ICommand .... 
    {
        Execute() { this.Callbacks.GetPathViaOpenDialog(); }
    } 
}

This is unit-testable; the interface provided by the unit test view can fake having received user input and just return a constant value.

Answer 2

What you want to do is not that different than enabling a button and upon clicking, saving something. In your case it is enabling the dialog and showing it. The challenge is how would you do it from the ViewModel without coupling to a dialog window.

There are 2 things you would need to take care of:

1. Is it okay to show the dialog?
2. Show the dialog

In your ViewModel you would do this:

public class MainViewModel
{
    private IDialog dialog;
    private ICommand showCommand;
    public MainViewModel() : this(null)
    {
    }

    public MainViewModel(IDialog dialog)
    {
        this.dialog = dialog;
        this.showCommand = new ShowCommand(this.ShowCommandHandler);
    }

    private void ShowCommandHandler(object sender, EventArgs e)
    {
        this.dialog.Show();
    }

    public ICommand ShowCommand { get { return this.showCommand; } }
}

Please note the ShowCommandHandler and the constructor overload in the above which takes an IDialog. Here is IDialog:

public interface IDialog
{
    void Show();
}

In my example, the IDialog has show but in your case it will be some method which shows the sliding dialog. If it is Show, great! Otherwise change it so it matches the method in your dialog.

Here is the command:

public class ShowCommand : ICommand
{
    public event EventHandler CanExecuteChanged;
    public EventHandler handler;
    public ShowCommand(EventHandler handler)
    {
        this.handler = handler;
    }

    public bool CanExecute(object parameter)
    {
        // Decide whether this command can be executed. 
        // Check if anything is selected from within your collection
        throw new NotImplementedException();
    }

    public void Execute(object parameter)
    {
        this.handler(this, EventArgs.Empty);
    }
}

Finally in your main view, do this:

public partial class MainView : Window
{
    public MainView()
    {
        this.InitializeComponent();
        this.DataContext = new MainViewModel(/*pass your dialog here*/);
    }
}

Please note this is no different than if you had a save Button on your view and the button's Enabled property will be bound to IsEnabled in the command. Then once the button is enabled, the user clicks it and the object is saved. In this case, it sliding ability (or showing ability) is bound but instead of saving, it simply calls Show on the IDialog.

Answer 3

Everything you're trying to accomplish can be done from the view, with no need to consider ViewModel, unless you have more advanced requirements. The ShowMessageAsync method is async yet you do not have your method signature as an async and you are not awaiting the return.

You can also get rid of the IsAnySelected method altogether and use just Linq. Below:

private async void AddButton_Click(object sender, RoutedEventArgs e)
{

var IsAnySelectedUsers = dataGrid.ItemsSource.Cast<User>().Any(p => p.IsSelected);

if (!IsAnySelectedUsers)
{
    await this.ShowMessageAsync("Permissions", "Please select a User.");
}

}

I am using Linq to query the Datagrid ItemsSource(My datagrid is using a collection of User, so if that's not what your underlying class is, you would need to replace it with whatever underlying class is used for your datagrid)