Handle long press, pressed and released gestures in MVUx

[igiona]

In MVUX it's pretty straight forward to handle button clicks by binding the Command to a async Task in the model.
How about handing other types of events like long press, button pressed and button released?

[dr1rrb]

Hey @igiona : unfortunately no there is no specific helpers for events handling.

This is a common binding problem, the two common way to workaround that are:

1. Create a behavior that will invoke the ICommand.Execute() when a given event is raised;
2. Flag you method with [Command(false)] and use x:Bind
   WARNING: unlike when using the ICommand generation, your method will be invoked from the UI thread.

BTW about the "button pressed" you can also set ClickMode = "Press", this property also determines when the Command is being invoked ... but you won't be able to handle multiple events on the same button that way..

[igiona]

Thank you for your reply @dr1rrb, It's weird that such a basic gesture handling is not well covered in Uno...

I'm not sure I understand what you mean with "use x:Bind" .
How can I, let's say, bind a "holding" event using x:Bind?

I implemented the following approach which I guess is somewhat your refer to in 1.?
Every feedback on it is appreciated :)

public enum Gestures
{
    Tapped,
    DoubleTapped,
    Holding,
    Pressed,
    Released
}

In the code-behind my page then I created

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        ConfigureButtonEventsPropagation(MyButton);
    }

    void ConfigureButtonEventsPropagation(Button button)
    {
        button.AddHandler(UIElement.PointerPressedEvent, new PointerEventHandler(Button_PointerPressed), true);
        button.AddHandler(UIElement.PointerReleasedEvent, new PointerEventHandler(Button_PointerReleased), true);

#if HAS_UNO
        button.EventsBubblingInManagedCode = Uno.UI.Xaml.RoutedEventFlag.Tapped | Uno.UI.Xaml.RoutedEventFlag.DoubleTapped | Uno.UI.Xaml.RoutedEventFlag.PointerPressed | Uno.UI.Xaml.RoutedEventFlag.PointerReleased | Uno.UI.Xaml.RoutedEventFlag.Holding;
#endif
    }

    // List of routed events https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/events-and-routed-events-overview
    private void Button_Tapped(object sender, Microsoft.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        if (sender is Button button && button.Command != null)
        {
            button.Command.Execute(Gestures.Tapped);
            e.Handled = true;
        }
    }

    private void Button_DoubleTapped(object sender, Microsoft.UI.Xaml.Input.DoubleTappedRoutedEventArgs e)
    {
        if (sender is Button button && button.Command != null)
        {
            button.Command.Execute(Gestures.DoubleTapped);
            e.Handled = true;
        }
    }

    private void Button_Holding(object sender, Microsoft.UI.Xaml.Input.HoldingRoutedEventArgs e)
    {
        if (sender is Button button && button.Command != null)
        {
            button.Command.Execute(Gestures.Holding);
            e.Handled = true;
        }
    }

    private void Button_PointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
    {
        if (sender is Button button && button.Command != null)
        {
            button.Command.Execute(Gestures.Pressed);
            e.Handled = true;
        }
    }

    private void Button_PointerReleased(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
    {
        if (sender is Button button && button.Command != null)
        {
            button.Command.Execute(Gestures.Released);
            e.Handled = true;
        }
    }
}

In the XAML of the page I simply add the events I want the button to listen to:

<Button Grid.Row="0" Grid.Column="1" Name="MyButton" Content="Click" Command="{Binding MyButtonGesture}" CommandParameter="!" PointerPressed="Button_PointerPressed" PointerReleased="Button_PointerReleased"/>

In my model then:

    public async Task MyButtonGesture(object p)
    {
        var g = p as Gestures;
        // react on the gesture
    }

I don't like too much because one "has to remember" how the event methods are called and indeed it feels a bit hacky, but it works...

[francoistanguay]

Giona, this has nothing to do with MVUX. This is how WinUI works. The Button.Command happens by default when the button is clicked.

If you want various events to map to various commands, you could define your own set of "behaviors" similar to what we do in our Toolkit: https://platform.uno/docs/articles/external/uno.toolkit.ui/doc/helpers/command-extensions.html

And then figure out a syntax that works out for you like ButtonExtensions.Tapped = {Binding MyTappedCommand}

It will obviously work with MVUX.

For reference on implementation: https://github.com/unoplatform/uno.toolkit.ui/blob/main/src/Uno.Toolkit.UI/Behaviors/CommandExtensions.cs

I think you might also be able to leverage XamlBehaviors' EvenTriggerBehavior https://github.com/Microsoft/XamlBehaviors/wiki

Let us know if it helps.

[igiona]

@francoistanguay thank you for the hints, the extensions approach looks promising!

Giona, this has nothing to do with MVUX. This is how WinUI works. The Button.Command happens by default when the button is clicked.

Agreed 👍, I somewhat believe that button-events handling is such a common use case that should be part of the UI framework.
As soon as I find a bit of time I'll look into the extension as you mentioned, and provide the code to you.

It will be then up to you to decide if it's worth/interesting enough to be part of the framework or not.

[francoistanguay]

I agree... But as we're doing our best to be WinUI-API compatible, we tend to put all the other possible helpers in our Toolkit, either as new Controls or new Extensions (mainly Attached Properties / Behaviors)

Keep us posted. If it's something that could make it in the Uno Toolkit, we could end up working on it together!