EventToCommand

• Mar 02, 2021
• 4 minutes to read

The EventToCommand class is a Behavior that allows you to bind an event to a command. This way, the bound command is invoked like an event handler when the event is raised.

This topic describes how to use the EventToCommand behavior.

Specify an Event

Use the EventName property to specify an event for the EventToCommand behavior:

XAML

<UserControl
    ...
    xmlns:dxmvvmi="using:DevExpress.WinUI.Mvvm.UI.Interactivity"
    xmlns:dxmvvm="using:DevExpress.WinUI.Mvvm.UI"
    xmlns:dxe="using:DevExpress.WinUI.Editors">

    <dxe:TextEdit>
        <dxmvvmi:Interaction.Behaviors>
            <dxmvvm:EventToCommand Command="{Binding LoadedCommand}" EventName="Loaded" />
        </dxmvvmi:Interaction.Behaviors>
    </dxe:TextEdit>
</UserControl>

Specify a Source Object

The source object is an object that has the event for processing by the EventToCommand. By default, the EventToCommand processes the defined event for the associated control. This scenario is shown below.

XAML

<UserControl ...>
    ...
    <dxmvvmi:Interaction.Behaviors>
        <dxmvvm:EventToCommand EventName="Loaded" Command="{Binding InitializeCommand}"/>
    </dxmvvmi:Interaction.Behaviors>
    ...
</UserControl>

If necessary, you can manually specify the source object for the EventToCommand. To do this, bind the EventTriggerBase<T>.SourceObject property, or specify the object’s name using the EventTriggerBase<T>.SourceName property.

XAML

<UserControl ...>
    ...
    <dxmvvmi:Interaction.Behaviors>
        <dxmvvm:EventToCommand SourceName="list" EventName="DoubleTapped" Command="{Binding InitializeCommand}"/>
        <dxmvvm:EventToCommand SourceObject="{Binding ElementName=list}" EventName="DoubleTapped" Command="{Binding InitializeCommand}"/>
    </dxmvvmi:Interaction.Behaviors>
    ...
        <ListBox x:Name="list" ... />
    ...
</UserControl>

Pass a Parameter to the Bound Command

You can add a parameter to the bound command using the EventToCommandBase.CommandParameter property.

XAML

<ListBox x:Name="list" ...>
    <dxmvvmi:Interaction.Behaviors>
        <dxmvvm:EventToCommand EventName="DoubleTapped" Command="{Binding EditCommand}" CommandParameter="{Binding ElementName=list, Path=SelectedItem}"/>
    </dxmvvmi:Interaction.Behaviors>
</ListBox>

Alternatively, you can pass the event’s arguments to the command as a parameter by setting the EventToCommand.PassEventArgsToCommand property to true.

XAML

<ListBox x:Name="list" ...>
    <dxmvvmi:Interaction.Behaviors>
        <dxmvvm:EventToCommand EventName="DoubleTapped" Command="{Binding EditCommand}" PassEventArgsToCommand="True"/>
    </dxmvvmi:Interaction.Behaviors>
</ListBox>

If you have a clean MVVM architecture, you may not want to pass event arguments to View Models. In this case, you can convert the event arguments to an object suitable for the command. To do this, specify a converter using the EventToCommand.EventArgsConverter property.

XAML

<ListBox x:Name="list" ...>
    <dxmvvmi:Interaction.Behaviors>
        <dxmvvm:EventToCommand EventName="DoubleTapped" Command="{Binding EditCommand}">
            <dxmvvm:EventToCommand.EventArgsConverter>
                <Common:CustomEventArgsConverter/>
            </dxmvvm:EventToCommand.EventArgsConverter>
        </dxmvvm:EventToCommand>
    </dxmvvmi:Interaction.Behaviors>
</ListBox>

The defined EventArgsConverter should implement the IEventArgsConverter interface. You can also derive the converter from the EventArgsConverterBase<TArgs> class, which already implements the IEventArgsConverter interface.

C#

public interface IEventArgsConverter {
    object Convert(object sender, object args);
}
public abstract class EventArgsConverterBase<TArgs> : IEventArgsConverter {
    protected EventArgsConverterBase();
    protected abstract object Convert(object sender, TArgs args);
}

VB.NET

Public Interface IEventArgsConverter
    Function Convert(sender As Object, args As Object) As Object
End Interface
Public MustInherit Class EventArgsConverterBase(Of TArgs)
    Implements IEventArgsConverter
    Protected Sub New()
    Protected MustOverride Function Convert(sender As Object, args As TArgs) As Object
End Class

When you implement the converter, use the LayoutTreeHelper class that has useful functions to search nodes in the visual tree. For instance:

C#

using DevExpress.WinUI.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();
        return clickedListBoxItem != null ? clickedListBoxItem.DataContext : null;
    }
}

VB.NET

Imports DevExpress.WinUI.Mvvm.UI
Imports System.Linq
Public Class ListBoxEventArgsConverter
    Inherits EventArgsConverterBase(Of MouseEventArgs)
    Protected Overrides Function Convert(sender As Object, args As MouseEventArgs) As Object
        Dim parentElement As ListBox = DirectCast(sender, ListBox)
        Dim clickedElement As DependencyObject = DirectCast(args.OriginalSource, DependencyObject)
        Dim clickedListBoxItem As ListBoxItem = 
            LayoutTreeHelper.GetVisualParents(child := clickedElement, stopNode:= parentElement)
            .OfType(Of ListBoxItem)()
            .FirstOrDefault()
        Return If(clickedListBoxItem IsNot Nothing, clickedListBoxItem.DataContext, Nothing)
    End Function
End Class

Specify Modifier Keys as an Additional Condition of the Command Execution

The EventToCommand behavior allows you to invoke a command only when modifier keys are pressed. Use the EventToCommand.ModifierKeys property to specify modifier keys.

XAML

<UserControl x:Class="Example.View.MainView" ...
    xmlns:ViewModel="using:Example.ViewModel"
    xmlns:Common="using:Example.Common"
    xmlns:dxmvvm="using:DevExpress.WinUI.Mvvm.UI"
    xmlns:dxmvvmi="using:DevExpress.WinUI.Mvvm.UI.Interactivity"
    DataContext="{dxmvvm:ViewModelSource Type=ViewModel:MainViewModel}">
    ...
        <ListBox ItemsSource="{Binding Persons}">
            <dxmvvmi:Interaction.Behaviors>
                <dxmvvm:EventToCommand EventName="MouseLeftButtonUp" Command="{Binding EditCommand}" ModifierKeys="Alt">
                    <dxmvvm:EventToCommand.EventArgsConverter>
                        <Common:ListBoxEventArgsConverter/>
                    </dxmvvm:EventToCommand.EventArgsConverter>
                </dxmvvm:EventToCommand>
            </dxmvvmi:Interaction.Behaviors>
            ...
        </ListBox>
    ...
</UserControl>

In the example above, the bound EditCommand is invoked when an end user clicks a ListBoxItem while pressing the Alt key.

Mark Routed Events as Handled

Set the EventToCommandBase.MarkRoutedEventsAsHandled property to True to mark routed events as handled when the bound command is executed.

XAML

<dxmvvm:EventToCommand MarkRoutedEventsAsHandled="True" .../>

In this case, the EventToCommand sets the e.Handled parameter of corresponding event arguments to True immediately after the bound command is executed.

Disable a Control When a Command Cannot be Executed

The EventToCommand class has the EventToCommand.AllowChangingEventOwnerIsEnabled property, which is False (the default setting). If you set this property to True, the EventToCommand disables (sets the IsEnabled property to False) the associated control when the bound command cannot be executed (when the ICommand.CanExecute method returns False).

Process Events of a Disabled Control

The EventToCommand class has the EventToCommandBase.ProcessEventsFromDisabledEventOwner property, which is True (the default setting). This means that the EventToCommand processes events for the associated control even if the associated control is disabled. If you need to prevent this behavior, set the ProcessEventsFromDisabledEventOwner property to False.