Question

I am a little confused on how to implement an event as a command in my particular situation. I want to honour MVVM, but don’t get how in this case.

I have a WPF ‘view’ – viewCustomerSearch. This has some text boxes on it, and when the user clicks ‘Search’ the results are populated in ListView. viewCustomerSearch is bound to viewmodelCustomerSearch, and it works great.

viewCustomerSearch is hosted on viewCustomer.

I want to know have viewCustomerSearch expose a custom command – CustomerSelectedCommand – that is ‘fired’ whenever the ListView in viesCustomerSearch is double clicked, and then handled by the viewmodel behind viewCustomer (which is viewmodelCustomer). This seems the theoretical MVVM pattern implemented correctly.

I have broken down the main problem into three smaller problems, but hopefully you can see they are all components of the same challenge.

FIRST PROBLEM: in order to have viewCustomerSearch expose a custom command I seem to have to put this code in viewCustomerSearch – which seems to ‘break’ MVVM (no code in the view code behind).

public readonly DependencyProperty CustomerSelectedCommandProperty = DependencyProperty.Register("CustomerSelectedCommand", typeof(ICommand), typeof(viewCustomerSearch));

public ICommand CustomerSelectedCommand
{
    get { return (ICommand)GetValue(CustomerSelectedCommandProperty); }
    set { SetValue(CustomerSelectedCommandProperty, value); }
}

SECOND PROBLEM (and this is the one that is really getting to me): Best explained by showing what I would do which breaks MVVM. I would have an event handler in the view:

private void lstResults_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
    if (CustomerSelectedCommand != null) CustomerSelectedCommand.Execute(((ViewModels.viewmodelCustomerSearchResult)this.lstResults.SelectedItem).CustomerId);
}

Well … I know that you shouldn’t put this event handler here; rather it should have a Command to handle it in the viewmodelCustomerSearch. The two problems here are

• because the ‘CustomerSelectedCommand’ ICommand is implemented in
  viewCustomerSearch, viewmodelCustomerSearch can’t see it to fire it.

• I cannot see how to bind the MouseDoubleClick event to a command, instead of an event handler in the view code behind. I am reading about Attached Properties, but cannot see how they are to be applied here.

(Please note: I am using the common ‘RelayCommand’ elsewhere in the application; does this come into play here??)

THIRD PROBLEM: When I do use the non-MVVM way of firing the command in the code behind event handler, you can see that I am passing in the Selected Customer Id as an arguement into the command. How do I see that argument in the Command handler in viewCustomer? I create a new RelayCommand to handle it, but it seems the Execute method does not take arguments?

Given all of the above, I have to say that I do NOT personally subscribe to the ‘MVVM means NO CODE IN THE VIEW’. That seems crazy to me; code that is entirely to do with the view, and the view only, should not – IMHO – go in the viewmodel. That said, though, this does seem like logic-y stuff (not view stuff).

Many thanks for some insight. Sorry for the long post; trying to balance enough information for you to help me with ‘War and Peace’.

DS

Answer 1

In your view you can add a “Command” property in xaml and bind it to your ViewModel’s command

Command="{Binding CustomerSelectedCommand}"

Parameters can be passed in multiple ways. Most of the time, I just have other items bound to my ViewModel and I can just use them directly. However there is also a property called CommandParameter, here’s an example of specifying it in XAML.

 CommandParameter="{Binding ElementName=txtPassword}"

then in my ViewModel the definition of my Command looks like this

private void UserLogonCommandExecute(object parameter)
{
...
       var password_box = parameter as PasswordBox;
...
}

It sounds like you already know how to set up a RelayCommand in your ViewModel so I won’t go into that. I found How Do I: Build Data-driven WPF Application using the MVVM pattern helpful when I was getting started.

Per Comment Request Command Property Example

I’m just going to grab some working code, here’s how you add a Command property to a button in XAML.

<Button Command="{Binding ConnectCommand}">
//Your button content and closing </Button> here

This assume you have set your DataContext to a ViewModel that has a Command called ConnectCommand. Here’s an example for ConnectCommand. You’ll need to replace the contents of ConnectCommandCanExecute and ConnectCommandExecute with whatever work you want done.

public ICommand ConnectCommand
{
    get
    {
        if (_connectCommand == null)
        {
            _connectCommand = new RelayCommand(param => ConnectCommandExecute(),
                                               param => ConnectCommandCanExecute);
        }
        return _connectCommand;
    }
}

private bool ConnectCommandCanExecute
{
    get { return !_instrumentModel.IsConnected; }
}

private void ConnectCommandExecute()
{
    if (TcpSettingsChanged()) SaveTcpSettings();
    _instrumentModel.Connect(_tcpData);
}

RelayClass

One part of making this simple is the RelayClass I have in one of my core library .dlls. I probably got this from one of the videos I watched. This can be cut and pasted in it’s entirety, there is nothing here you need to customize, except you’ll probably want to change the namespace this is in.

using System;
using System.Diagnostics;
using System.Windows.Input;

namespace Syncor.MvvmLib
{
public class RelayCommand : ICommand
{
private readonly Action<object> _execute;
private readonly Predicate<object> _canExecute;

public event EventHandler CanExecuteChanged
{
  add
  {
    CommandManager.RequerySuggested += value;
  }
  remove
  {
    CommandManager.RequerySuggested -= value;
  }
}

public RelayCommand(Action<object> execute)
  : this(execute, (Predicate<object>) null)
{
  this._execute = execute;
}

public RelayCommand(Action<object> execute, Predicate<object> canExecute)
{
  if (execute == null)
    throw new ArgumentNullException("execute");
  this._execute = execute;
  this._canExecute = canExecute;
}

[DebuggerStepThrough]
public bool CanExecute(object parameter)
{
  if (this._canExecute != null)
    return this._canExecute(parameter);
  else
    return true;
}

public void Execute(object parameter)
{
  this._execute(parameter);
}
}
}