EventToCommandBehavior

The EventToCommandBehavior is a behavior that allows the user to invoke a Command through an Event. It is designed to associate Commands to events exposed by controls that were not designed to support Commands. It allows you to map any arbitrary event on a control to a Command.

Wichteg

The .NET MAUI Community Toolkit Behaviors do not set the BindingContext of a behavior, because behaviors can be shared and applied to multiple controls through styles. For more information refer to .NET MAUI Behaviors

Syntax

The following examples show how to add an EventToCommandBehavior to a Button control and then handle the clicked event.

XAML

Including the XAML namespace

In order to use the toolkit in XAML the following xmlns needs to be added into your page or view:

XAML

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Therefore the following:

XAML

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Would be modified to include the xmlns as follows:

XAML

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Using the EventToCommandBehavior

The EventToCommandBehavior can be used as follows in XAML:

XAML

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="MyLittleApp.MainPage"
    x:Name="Page">
    
    <Button x:Name="MyButton">
        <Button.Behaviors>
            <toolkit:EventToCommandBehavior
                EventName="Clicked"
                BindingContext="{Binding Path=BindingContext, Source={x:Reference MyButton}, x:DataType=Button}"
                Command="{Binding Source={x:Reference Page}, Path=BindingContext.MyCustomCommand, x:DataType=ContentPage}" />
        </Button.Behaviors>
    </Button>
</ContentPage>

C#

The EventToCommandBehavior can be used as follows in C#:

C#

class EventToCommandBehaviorPage : ContentPage
{
    public EventToCommandBehaviorPage()
    {
        var button = new Button();

        var behavior = new EventToCommandBehavior
        {
            EventName = nameof(Button.Clicked),
            Command = new MyCustomCommand()
        };

        button.Behaviors.Add(behavior);

        Content = entry;
    }
}

C# Markup

Our CommunityToolkit.Maui.Markup package provides a much more concise way to use this Behavior in C#.

C#

using CommunityToolkit.Maui.Markup;

class EventToCommandBehaviorPage : ContentPage
{
    public EventToCommandBehaviorPage()
    {
        Content = new Button()
        .Behaviors(new EventToCommandBehavior
        {
            EventName = nameof(Button.Clicked),
            Command = new MyCustomCommand()
        });                 
    }
}

Accessing the EventArgs from the event

It is possible to have the EventArgs of the specific event passed into the Command. There are two ways to achieve this:

1. Use the generic implementation

By using the EventToCommandBehavior<T> implementation the EventArgs will be passed into the Command property if both the CommandParameter and Converter properties are not set. In order to refer to the generic type in XAML we need to make use of the x:TypeArguments directive.

The following example shows how to use the generic implementation to pass the WebNavigatedEventArgs into the command.

XAML

<WebView 
    Source="https://github.com"
    x:Name="MyWebView">
    <WebView.Behaviors>
        <toolkit:EventToCommandBehavior
            x:TypeArguments="WebNavigatedEventArgs"
            EventName="Navigated"
            BindingContext="{Binding Path=BindingContext, Source={x:Reference MyWebView}, x:DataType=WebView}"
            Command="{Binding WebViewNavigatedCommand}" />
    </WebView.Behaviors>
</WebView>

2. Use the Converter property

When using this behavior with selection or tap events exposed by ListView an additional converter is required. This converter converts the event arguments to a command parameter which is then passed onto the Command. They are also available in the .NET MAUI Community Toolkit:

• ItemTappedEventArgsConverter
• SelectedItemEventArgsConverter

Properties

Property	Type	Description
EventName	string	The name of the event that should be associated with a Command.
Command	ICommand	The Command that should be executed.
CommandParameter	object	An optional parameter to forward to the Command.
EventArgsConverter	IValueConverter	An optional IValueConverter that can be used to convert EventArgs values to values passed into the Command.

Examples

You can find an example of this behavior in action in the .NET MAUI Community Toolkit Sample Application.

API

You can find the source code for EventToCommandBehavior over on the .NET MAUI Community Toolkit GitHub repository.