EventToCommandBehavior

The EventToCommandBehavior allows you to bind an event to an ICommand in the view model.

When working in more advanced development scenarios we often find ourselves leaning towards the MVVM pattern for producing cleaner, loosely coupled, easier to test code, but along with this comes the responsibility of ensuring that all controls we are using can follow this pattern. While it is very easy to work with the event-based model that exists across the .NET framework, events do not play well into the mindset of reducing traditional code-behind and instead handling logic within a viewmodel. This is where the Telerik EventToCommandBehavior class comes into use to allow your events to fire and your code to respond accordingly, all in the ViewModel without touching the code-behind of the UserControls.

Getting Started

The following example shows how to setup a RadListView control and bind its PointerPressed event to a command in the view model.

Example 1: Declare the RadListView control

<telerikData:RadListView ItemsSource="{Binding Items}" /> 

Example 2: Create the view model class

public class ViewModel: ViewModelBase 
{ 
    public ICommand CustomCommand { get; set; } 
    public BindableCollection<string> Items { get; set; } 
 
    public ViewModel() 
    { 
        this.Items = new BindableCollection<string> { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" }; 
        this.CustomCommand = new DelegateCommand(OnCustomCommandExecuted); 
    } 
 
    private void OnCustomCommandExecuted(object obj) 
    { 
    } 
} 

To bind the command to the corresponding event, define a new EventBinding element and set its EventName and Command properties. The EventName points to the name of associated event of the parent control. The Command property points to the command in the view model. The EventBinding element is added in the EventToCommandBehavior.EventBindings collection. The collection is accessed through an attached property used with the associated control.

Example 3: Bind a specific event to a desired command

<Grid> 
    <Grid.Resources> 
        <local:ViewModel x:Key="viewModel" /> 
    </Grid.Resources> 
    <telerikData:RadListView x:Name="ListView" ItemsSource="{Binding Items}"> 
        <telerikCore:EventToCommandBehavior.EventBindings> 
            <telerikCore:EventBinding Command="{Binding CustomCommand, Source={StaticResource viewModel}}" EventName="PointerPressed" /> 
        </telerikCore:EventToCommandBehavior.EventBindings> 
    </telerikCore:RadListView> 
</Grid> 

telerikCore points to xmlns:telerikCore="using:Telerik.Core"

RaiseOnHandledEvents

In case the event is RoutedEvent and it has been handled by the associated control, the command bound to the EventBinding won't be executed. To change this, set the RaiseOnHandledEvents property of the EventBinding to True.

Example 4: Set the RasedOnHandledEvents property

<telerikCore:EventToCommandBehavior.EventBindings> 
    <telerikCore:EventBinding Command="{Binding CustomCommand, Source={StaticResource viewModel}}" EventName="PointerPressed" RaiseOnHandledEvents="True" /> 
</telerikCore:EventToCommandBehavior.EventBindings> 

Command Parameters

To pass a parameter to the method that executes the command, set the CommandParameter property of the EventBinding object.

Example 5: Set the CommandParameter

<telerikCore:EventToCommandBehavior.EventBindings> 
    <telerikCore:EventBinding Command="{Binding CustomCommand, Source={StaticResource viewModel}}"  
                              EventName="PointerPressed" RaiseOnHandledEvents="True" 
                              CommandParameter="This is a command parameter!"/> 
</telerikCore:EventToCommandBehavior.EventBindings> 

Example 6: Modify the method in the ViewModel class

private void OnCustomCommandExecuted(object obj) 
{ 
    string commandParameter = (string)obj; // this will be the "This is a command parameter!" string 
} 

In case, you need to provide the event arguments as a parameter, set the PassEventArgsToCommand property.

Example 7: Set the PassEventArgsToCommand property

<telerikCore:EventToCommandBehavior.EventBindings> 
    <telerikCore:EventBinding Command="{Binding CustomCommand, Source={StaticResource viewModel}}"  
                              EventName="PointerPressed" RaiseOnHandledEvents="True" 
                              PassEventArgsToCommand="True" /> 
</telerikCore:EventToCommandBehavior.EventBindings> 

Example 8: Modify the method to use the event arguments

private void OnCustomCommandExecuted(object obj) 
{ 
    var arguments = (PointerRoutedEventArgs)obj; 
} 

If both properties are set, CommandParameter has a higher priority than PassEventArgsToCommand.

Multiple Commands

The EventToCommandBehavior gives you the ability to add multiple EventBindings. You can easily bind multiple commands to a single event as well as a single command to multiple events. For example we can execute two commands in the ViewModel when the PointerPressed event of RadListView is fired:

Example 9: Set multiple event bindings

<telerikCore:EventToCommandBehavior.EventBindings> 
    <telerikCore:EventBinding Command="{Binding CustomCommand, Source={StaticResource viewModel}}"  
                          EventName="PointerPressed" RaiseOnHandledEvents="True" /> 
    <telerikCore:EventBinding Command="{Binding AnotherCommand, Source={StaticResource viewModel}}" 
                          EventName="PointerPressed" RaiseOnHandledEvents="True" /> 
</telerikCore:EventToCommandBehavior.EventBindings> 

If you have multiple commands attached to a single event, the commands will be executed in the order they are defined in the EventBindings collection (from top to bottom).

Adding EventBinding Programmatically

The following example shows how to add an EventBinding object in code.

Example 10: Add the EventBinding programmatically

public void AddEventBinding() 
{ 
    EventToCommandBehavior.GetEventBindings(this.listView).Add(new Telerik.Core.EventBinding() 
    { 
        EventName = "PointerPressed", 
        Command = ((ViewModel)this.listView.DataContext).CustomCommand, 
        PassEventArgsToCommand = true 
    }); 
}