Use the EventToCommand Behavior to Execute Commands when an Event is Raised

The EventToCommand behavior allows you to bind an event to a command. When used, the bound command is invoked like an event handler when the event is raised.

In this example, the EventToCommand is used (to call an event) to display an edit form when a user clicks an item in the ListBox.

The code snippet below defines the EventToCommand that processes the ListBox's MouseDoubleClick event. When the event is raised, the EventToCommand invokes the bound EditCommand. This command requires a parameter: a Person object to be edited.

<UserControl x:Class="Example.View.MainView" ...
    xmlns:ViewModel="clr-namespace:Example.ViewModel"
    xmlns:Common="clr-namespace:Example.Common"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
    DataContext="{dxmvvm:ViewModelSource Type=ViewModel:MainViewModel}">
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox ItemsSource="{Binding Persons}">
            <dxmvvm:Interaction.Behaviors>
                <dxmvvm:EventToCommand EventName="MouseDoubleClick" Command="{Binding EditCommand}">
                    <dxmvvm:EventToCommand.EventArgsConverter>
                        <Common:ListBoxEventArgsConverter/>
                    </dxmvvm:EventToCommand.EventArgsConverter>
                </dxmvvm:EventToCommand>
            </dxmvvm:Interaction.Behaviors>
            <ListBox.ItemTemplate>
                ...
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

The code below illustrates an implementation of the EditCommand in both the Runtime POCO ViewModel and the common ViewModel.

//POCO ViewModel
[POCOViewModel]
public class MainViewModel {
	public void Edit(Person person) {
		...
	}
	public bool CanEdit(Person person) {
		return person != null;
	}
}
//Common ViewModel
public class MainViewModel {
	public ICommand<Person> EditCommand { get; private set; }
	public MainViewModel() {
		EditCommand = new DelegateCommand<Person>(Edit, CanEdit);
	}
	public void Edit(Person person) {
		... 
	}
	public bool CanEdit(Person person) {
		return person != null;
	}
}

In this specific instance, you must obtain the DataContext for the clicked ListBoxItem. This is what the EventToCommand should pass to the EditCommand as a parameter. This operation is performed by the custom ListBoxEventArgsConverter:

using DevExpress.Mvvm.UI;
using System.Linq;
public class ListBoxEventArgsConverter : EventArgsConverterBase<MouseEventArgs> {
    protected override object Convert(object sender, MouseEventArgs args) {
        ListBox parentElement = (ListBox)sender;
        DependencyObject clickedElement = (DependencyObject)args.OriginalSource;
        ListBoxItem clickedListBoxItem = 
            LayoutTreeHelper.GetVisualParents(child: clickedElement, stopNode: parentElement)
            .OfType<ListBoxItem>()
            .FirstOrDefault();
        if(clickedListBoxItem != null)
            return (Person)clickedListBoxItem.DataContext;
        return null;
    }
}

The ListBoxEventArgsConverter class inherits from the EventArgsConverterBase class and contains the Convert method. The EventToCommand uses this method to convert event arguments.

In this scenario, the EventToCommand passes a MouseEventArgs object to the ListBoxEventArgsConverter. The converter uses the LayoutTreeHelper class to locate the clicked ListBoxItem and then returns its DataContext (which contains the underlying Person object). The resulting Person object is then passed to the bound EditCommand.

Files to Look At

• MouseEventArgsConverter.cs (VB: MouseEventArgsConverter.vb)
• MainView.xaml (VB: MainView.xaml)
• MainViewModel.cs (VB: MainViewModel.vb)

Documentation

• EventToCommand Behavior
• Behaviors

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)