How to bind a command to an event?

[NekrasovaLera]

I want to bind a reactive command to an event so I tried using the attached properties. I copied this code from the official Avalonia documentation about creating and binding attached properties but I get this error: Argument 5:cannot convert from 'method group' to 'Func<ICommand, bool>' for ValidateCommand when I identify the CommandProperty. How do I make this work?

/// <summary>
/// Container class for attached properties. Must inherit from <see cref="AvaloniaObject"/>.
/// </summary>
public class DoubleTappedBehav : AvaloniaObject
{
    /// <summary>
    /// Identifies the <seealso cref="CommandProperty"/> avalonia attached property.
    /// </summary>
    /// <value>Provide an <see cref="ICommand"/> derived object or binding.</value>
    public static readonly AttachedProperty<ICommand> CommandProperty = AvaloniaProperty.RegisterAttached<DoubleTappedBehav, Interactive, ICommand>(
        "Command", default(ICommand), false, BindingMode.OneTime, ValidateCommand);

    /// <summary>
    /// Identifies the <seealso cref="CommandParameterProperty"/> avalonia attached property.
    /// Use this as the parameter for the <see cref="CommandProperty"/>.
    /// </summary>
    /// <value>Any value of type <see cref="object"/>.</value>
    public static readonly AttachedProperty<object> CommandParameterProperty = AvaloniaProperty.RegisterAttached<DoubleTappedBehav, Interactive, object>(
        "CommandParameter", default(object), false, BindingMode.OneWay, null);


    /// <summary>
    /// The coerce value function. Returns the final (probably corrected result).
    /// can be used to perform actions during assign.
    /// </summary>
    private static ICommand ValidateCommand(Interactive element, ICommand commandValue)
    {
        Interactive interactElem = element;
        if (interactElem != null)
        {
            if (commandValue != null)
            {
                // Add non-null value
                interactElem.AddHandler(InputElement.DoubleTappedEvent, Handler);
            }
            else
            {
                // remove prev value
                interactElem.RemoveHandler(InputElement.DoubleTappedEvent, Handler);
            }
        }

        return commandValue;

        // local handler fcn
        void Handler(object s, RoutedEventArgs e)
        {
            // This is how we get the parameter off of the gui element.
            object commandParameter = interactElem.GetValue(CommandParameterProperty);
            if (commandValue?.CanExecute(commandParameter) == true)
            {
                commandValue.Execute(commandParameter);
            }
        }
    }


    /// <summary>
    /// Accessor for Attached property <see cref="CommandProperty"/>.
    /// </summary>
    public static void SetCommand(AvaloniaObject element, ICommand commandValue)
    {
        element.SetValue(CommandProperty, commandValue);
    }

    /// <summary>
    /// Accessor for Attached property <see cref="CommandProperty"/>.
    /// </summary>
    public static ICommand GetCommand(AvaloniaObject element)
    {
        return element.GetValue(CommandProperty);
    }

    /// <summary>
    /// Accessor for Attached property <see cref="CommandParameterProperty"/>.
    /// </summary>
    public static void SetCommandParameter(AvaloniaObject element, object parameter)
    {
        element.SetValue(CommandParameterProperty, parameter);
    }

    /// <summary>
    /// Accessor for Attached property <see cref="CommandParameterProperty"/>.
    /// </summary>
    public static object GetCommandParameter(AvaloniaObject element)
    {
        return element.GetValue(CommandParameterProperty);
    }
}

[wieslawsoltes]

You can use Behaviors

• https://github.com/wieslawsoltes/AvaloniaBehaviors
• https://www.nuget.org/packages/Avalonia.Xaml.Behaviors

Example:

<UserControl x:Class="BehaviorsTestApplication.Views.Pages.InvokeCommandActionView"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="using:Avalonia.Xaml.Interactivity"
             xmlns:ia="using:Avalonia.Xaml.Interactions.Core"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="600" d:DesignHeight="450">
    <Grid RowDefinitions="*,Auto" ColumnDefinitions="30*,5,30*,5,30*">
        <Canvas Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="5" Margin="5" Background="{DynamicResource GrayBrush}">
            <Ellipse Canvas.Left="{Binding Position, Mode=TwoWay}" Canvas.Top="200" Fill="{DynamicResource RedBrush}" Stroke="{DynamicResource YellowBrush}" StrokeThickness="5" Height="100" Width="100"/>
        </Canvas>
        <Button x:Name="MoveLeftButton" Content="Move Left" Grid.Row="1" Grid.Column="0" Margin="5,0,0,5">
            <i:Interaction.Behaviors>
                <ia:EventTriggerBehavior EventName="Click" SourceObject="{Binding #MoveLeftButton}">
                    <ia:InvokeCommandAction Command="{Binding MoveLeftCommand}"/>
                </ia:EventTriggerBehavior>
            </i:Interaction.Behaviors>
        </Button>
        <Button x:Name="ResetMoveButton" Content="Reset Move" Grid.Row="1" Grid.Column="2" Margin="0,0,0,5">
            <i:Interaction.Behaviors>
                <ia:EventTriggerBehavior EventName="Click" SourceObject="{Binding #ResetMoveButton}">
                    <ia:InvokeCommandAction Command="{Binding ResetMoveCommand}"/>
                </ia:EventTriggerBehavior>
            </i:Interaction.Behaviors>
        </Button>
        <Button x:Name="MoveRightButton" Content="Move Right" Grid.Row="1" Grid.Column="4" Margin="0,0,5,5">
            <i:Interaction.Behaviors>
                <ia:EventTriggerBehavior EventName="Click" SourceObject="{Binding #MoveRightButton}">
                    <ia:InvokeCommandAction Command="{Binding MoveRightCommand}"/>
                </ia:EventTriggerBehavior>
            </i:Interaction.Behaviors>
        </Button>
    </Grid>
</UserControl>

Sample app: https://github.com/wieslawsoltes/AvaloniaBehaviors/tree/master/samples/BehaviorsTestApplication

[NekrasovaLera]

yes, I did.

[NekrasovaLera]

Nvm I fixed it. Thank you for the help!

[ShrutiJaiswal1494]

@NekrasovaLera I am getting the same error. Can please tell me how did you fix it?

[maxkatz6]

@ShrutiJaiswal1494 use full "clr-namespace" syntax for namespaces to this library

[NekrasovaLera]

@ShrutiJaiswal1494 I had to rewrite some code so I'm not sure if that's the case but the binding to a command inside <ia:InvokeCommandAction> was incorrect in the code I posted above. It must be Command={Binding $parent[Window].DataContext.DeleteItem} instead of Command={Binding DeleteItem}.

[maxkatz6]

@NekrasovaLera hi, I updated docs page. There was out of dated example.
Behaviors SDK is nice addition to Avalonia, but attached properties work without it too.

[NekrasovaLera]

Great, thank you! I'll check it out as well.

[IAbstract]

Where? A link would be great.

[NekrasovaLera]

@IAbstract https://docs.avaloniaui.net/docs/data-binding/creating-and-binding-attached-properties