Needs enlightenment on the new TouchBehavior

[UlriCode]

The new TouchBehavior just arrived to fill the regretted TouchEffect but I'm having a hard time understanding its usefulness, so please enlighten me!

I was using TouchEffect because it is really quick to implement, adds a small animation and makes a cleaner, easier-to-read XAML compared to the GestureRecognizers.

But the new TouchBehavior is very cumbersome to use, and the custom animation that we can add cannot be stylized, so it has to be repeated every time?!

Example:

<!-- Using GestureRecognizers -->
<Grid>
    <!-- Grid content -->
    <Grid.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding PizzaCommand}" />
    </Grid.GestureRecognizers>
</Grid>
                
<!-- Using TouchEffect -->
<Grid touch:TouchEffect.Command="{Binding PizzaCommand}"
      touch:TouchEffect.NativeAnimation="True">
    <!-- Grid content -->
</Grid>

<!-- Using TouchBehavior -->
<Grid>
    <!-- Grid content -->
    <Grid.Behaviors>
        <toolkit:TouchBehavior DefaultAnimationDuration="250"
                               DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
                               PressedOpacity="0.6"
                               Command="{Binding PizzaCommand}"/>
    </Grid.Behaviors>
</Grid>

Am I using it right?
It is possible to have a usage as concise as the TouchEffect?
Is it possible to define a default animation for all the app?

Thank you 🙂

[yurysemv]

This is very important when upgrading from Forms to MAUI!

[bijington]

The usage has changed, it is a little bit more verbose because it now uses PlatformBehavior rather than an Attached Behavior. That said there are a number of options that you can use to simplify the usage:

Create your own subclass

Something like:

public class GridTouchBehavior : TouchBehavior
{
    public GridTouchBehavior()
    {
        DefaultAnimationDuration = 250;
        DefaultAnimationEasing = Easing.CubicInOut;
        PressedOpacity = 0.6;
    }
}

Then you can use it like:

<!-- Using TouchBehavior -->
<Grid>
    <!-- Grid content -->
    <Grid.Behaviors>
        <local:GridTouchBehavior Command="{Binding PizzaCommand}"/>
    </Grid.Behaviors>
</Grid>

Styling

You can define a Style to include the TouchBehavior for Grids or whatever control type you like. The only tricky issue is around the Command binding. You could go with a general purpose OnTouchCommand in all of your view models but that is a bit yucky as it wouldn't allow for compiled bindings.

Submit a PR

I quite like the idea of expanding our Options to allow for defining default values for all of the behavior properties, this concept could even apply to all other behaviours if we get it right.

[UlriCode]

Thank you @bijington for you great reply.
I dont believe I didn't think of inheritance insert facepalm emoji. It is still a little bit less practical to use than an Attached Behavior but at least there is no code duplication for the animation settings, I'll implement this right now.

And I agree with you about the styling!

[bijington]

Happy to help. I've just had a thought... you might be able to write your own AttachedBehavior that attaches a TouchBehavior and therefore gets you much closer to the original usage.

[UlriCode]

Thank you @bijington for your suggestion, I managed to create a custom attached behavior and it's working great :-)
If it can help others, here is my code below.

Usage

<Grid beh:TapBehavior.Command="{Binding PizzaCommand}"
      beh:TapBehavior.CommandParameter="{Binding Calzone}"
      beh:TapBehavior.IsEnabled="{Binding PizzaCommandIsEnabled}"
      beh:TapBehavior.ShouldMakeChildrenInputTransparent="false"/>

Custom behavior

public class CustomTouchBehavior : TouchBehavior
{
    public CustomTouchBehavior()
    {
        DefaultAnimationDuration = 250;
        DefaultAnimationEasing = Easing.CubicInOut;
        PressedOpacity = 0.6;
    }
}

Attached behavior

public class TapBehavior
{
    #region Bindable properties

    public static readonly BindableProperty CommandProperty =
        BindableProperty.CreateAttached(
            "Command",
            typeof(ICommand),
            typeof(TapBehavior),
            defaultValue: null,
            propertyChanged: OnCommandChanged);

    public static ICommand GetCommand(BindableObject view)
    {
        return (ICommand)view.GetValue(CommandProperty);
    }

    public static void SetCommand(BindableObject view, ICommand value)
    {
        view.SetValue(CommandProperty, value);
    }

    public static readonly BindableProperty CommandParameterProperty =
        BindableProperty.CreateAttached(
            "CommandParameter",
            typeof(object),
            typeof(TapBehavior),
            defaultValue: null,
            propertyChanged: OnCommandParameterChanged);

    public static object GetCommandParameter(BindableObject view)
    {
        return view.GetValue(CommandProperty);
    }

    public static void SetCommandParameter(BindableObject view, object value)
    {
        view.SetValue(CommandProperty, value);
    }

    public static readonly BindableProperty IsEnabledProperty =
        BindableProperty.CreateAttached(
            "IsEnabled",
            typeof(bool),
            typeof(TapBehavior),
            defaultValue: true,
            propertyChanged: OnIsEnabledChanged);

    public static bool GetIsEnabled(BindableObject view)
    {
        return (bool)view.GetValue(IsEnabledProperty);
    }

    public static void SetIsEnabled(BindableObject view, bool value)
    {
        view.SetValue(IsEnabledProperty, value);
    }

    public static readonly BindableProperty ShouldMakeChildrenInputTransparentProperty =
        BindableProperty.CreateAttached(
            "ShouldMakeChildrenInputTransparent",
            typeof(bool),
            typeof(TapBehavior),
            defaultValue: true,
            propertyChanged: OnShouldMakeChildrenInputTransparentPropertyChanged);

    public static bool GetShouldMakeChildrenInputTransparent(BindableObject view)
    {
        return (bool)view.GetValue(ShouldMakeChildrenInputTransparentProperty);
    }

    public static void SetShouldMakeChildrenInputTransparent(BindableObject view, bool value)
    {
        view.SetValue(ShouldMakeChildrenInputTransparentProperty, value);
    }

    #endregion

    static void OnCommandChanged(BindableObject view, object oldValue, object newValue)
    {
        if (view is VisualElement visualElement)
        {
            var newCommand = newValue is ICommand command ? command : null;

            if (visualElement.Behaviors.FirstOrDefault(b => b is TouchBehavior) is TouchBehavior touchBehavior)
            {
                touchBehavior.Command = newCommand;
                return;
            }

            visualElement.Behaviors.Add(new CustomTouchBehavior() { Command = newCommand });
        }
    }

    static void OnCommandParameterChanged(BindableObject view, object oldValue, object newValue)
    {
        if (view is VisualElement visualElement)
        {
            if (visualElement.Behaviors.FirstOrDefault(b => b is TouchBehavior) is TouchBehavior touchBehavior)
            {
                touchBehavior.CommandParameter = newValue;
                return;
            }

            visualElement.Behaviors.Add(new CustomTouchBehavior() { CommandParameter = newValue });
        }
    }

    static void OnIsEnabledChanged(BindableObject view, object oldValue, object newValue)
    {
        if (view is VisualElement visualElement)
        {
            var isEnabled = newValue is bool boolean ? boolean : false;

            if (visualElement.Behaviors.FirstOrDefault(b => b is TouchBehavior) is TouchBehavior touchBehavior)
            {
                touchBehavior.IsEnabled = isEnabled;
                return;
            }

            visualElement.Behaviors.Add(new CustomTouchBehavior() { IsEnabled = isEnabled });
        }
    }

    static void OnShouldMakeChildrenInputTransparentPropertyChanged(BindableObject view, object oldValue, object newValue)
    {
        if (view is VisualElement visualElement)
        {
            var shouldMakeChildrenInputTransparent = newValue is bool boolean ? boolean : false;

            if (visualElement.Behaviors.FirstOrDefault(b => b is TouchBehavior) is TouchBehavior touchBehavior)
            {
                touchBehavior.ShouldMakeChildrenInputTransparent = shouldMakeChildrenInputTransparent;
                return;
            }

            visualElement.Behaviors.Add(new CustomTouchBehavior() { ShouldMakeChildrenInputTransparent = shouldMakeChildrenInputTransparent });
        }
    }
}

[bijington]

That's great to hear! Thanks for the update. I'm going to add the needs-discussion label to this and see what the team/community think to adding something like this into the toolkit to simplify the usage.

[yurysemv]

Thanks!