[Bug] [MauiCompat] TouchEffect not working

[jonakirke94]

Hi,

I am struggling to get the TouchEffect to work in a brand new Maui project.

Description

I have created a brand new project and installed the following two nuget packages:

Xamarin.CommunityToolkit.MauiCompat 2.0.2-preview1013
CommunityToolkit.Maui 1.2.0

The app compiles fine and everything else appear to work as intended

I have confirmed that other effects such as xct:CornerRadiusEffect works in my repro so I believe I am importing the correct namespaces.

Just the touch effects seem to do nothing.

In my reproduction I followed the tutorial on https://www.youtube.com/watch?v=2QKFsI7zcts

I have added the effects and compatibility renderers in my MauiProgra.cs

public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>()
        .UseMauiCompatibility()
        .ConfigureMauiHandlers(handlers =>
        {
            // Register ALL handlers in the Xamarin Community Toolkit assembly
            handlers.AddCompatibilityRenderers(typeof(Xamarin.CommunityToolkit.Effects.TouchEffect).Assembly);
        })
        .ConfigureEffects(effects =>
        {
            effects.AddCompatibilityEffects(typeof(Xamarin.CommunityToolkit.Effects.TouchEffect).Assembly);
        
            // Attempt to just add the touch effect
            // effects.Add(typeof(TouchEffect), typeof(PlatformTouchEffect));
        })
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });
        
        return builder.Build();
    }
    ```
    
A small snippet from MainPage.xaml:
    
    ```
    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyTouchEffect"
             xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.Effects;assembly=Xamarin.CommunityToolkit.MauiCompat"
             x:DataType="local:SampleViewModel"
             x:Class="MyTouchEffect.MainPage">

        <StackLayout HeightRequest="100"
                         xct:TouchEffect.PressedBackgroundColor="Red"
                         BackgroundColor="Yellow"
                         xct:CornerRadiusEffect.CornerRadius="100"
                         WidthRequest="100">

                <Label FontSize="Title"
                       TextColor="Black"
                       VerticalOptions="CenterAndExpand"
                       HorizontalOptions="CenterAndExpand"
                       Text="{Binding Count}" />

            </StackLayout>                 
            </ContentPage>

Stack Trace

Link to Reproduction Sample

(https://github.com/jonakirke94/MauiTouchEffectRepro)

Steps to Reproduce

1. Create a new Maui Project
2. Add the Xamarin.CommunityToolkit.MauiCompat
3. Attempt the TouchEffect to work

Expected Behavior

The TouchEffects works as in Xamarin

Actual Behavior

Usings of the TouchEffects do nothing

Basic Information

maui-android 6.0.486/6.0.400

Workaround

I haven't been able to find a workaround

Reproduction imagery

[LennoxP90]

I ended up pulling in the source code for the Touch Effect manually into my MAUI project fix some of the errors on compile, and it seems to work fine after doing that also you need to make sure you have

.ConfigureEffects( effects =>
      {
#if ANDROID || IOS
        effects.Add( typeof( TouchEffect ), typeof( PlatformTouchEffect ) );
#endif
      } )

in your MauiProgram.cs

[jonakirke94]

@LennoxP90 Looks good. Would you be willing to share the platform implementations in a gist? I find myself struggling with mapping the new namespaces..

[LennoxP90]

@jonakirke94 It is a lot of files so i just created a repository
https://github.com/LennoxP90/XCTTouchEffectMAUI

[jonakirke94]

@LennoxP90 Awesome, great work!

Will use this workaround until it works as intended in the community toolkit 🎉

[luissagasta]

@LennoxP90 thank you for sharing your workaround!

[aminparsa18]

Created this repo based on Xamarin CommunityToolkit for Maui
https://github.com/aminparsa18/Maui.TouchEffect

[mirceamuresanse]

@jonakirke94 It is a lot of files so i just created a repository https://github.com/LennoxP90/XCTTouchEffectMAUI

Any chance this will be implemented for Windows also?

[LennoxP90]

@jonakirke94 It is a lot of files so i just created a repository https://github.com/LennoxP90/XCTTouchEffectMAUI

Any chance this will be implemented for Windows also?

When it is implemented in MAUICommunityToolkit, I am not the owner of the code I just repackaged it into a MAUI compatible repository

[jenyangk]

@LennoxP90 Any chance if you could share a sample with your workaround? I was able to pull the TouchEffect source code into my project but can't seem to trigger my press and long press commands. 😢

[DarkIrata]

Its not perfect and is also a workaround (only for android, i dont own apple devices), but here is an quick rippleeffect implementation and clickable Stacklayout. Still getting used to maui and such...
The TouchEffect repack also didn't work for me... also had problems to make my own attached properties, since TouchGestures don't passthrough to the native view, which doesn't fire the rippleeffect. (noice)

@jenyangk hope it helps you

https://gist.github.com/DarkIrata/3918afe7af8ad4731a2747863ac3c15a

[adiamante]

To those with this issue, please try out StatefulContentView from UraniumUI. Disclosure: I made a pull request to get the control working for my use case but this UI kit is something I recommend for .NET MAUI.

[IeuanWalker]

@adiamante if its the pressed side of thing your looking for could also give my control a go - https://github.com/IeuanWalker/Maui.StateButton

[IeuanWalker]

@jonakirke94 instead of using the round corners effect look at updating to the new border control and setting the stroke shape property https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/border?view=net-maui-7.0#create-a-border

The control i linked above is based on the border control so you have the pressed state + you can set the stroke shape of the button

[ericbrunner]

Hey @jfversluis, that Bug still exists afer 10 month since it was reported by @jonakirke94 . Well done!

[bijington]

MauiCompat was something intended to get developers migrated from Xamarin Forms but it sadly didn't go as smoothly as we had hoped. There is some great work by Kym to add in the Touch Effect on the .NET MAUI Community Toolkit so I am going to close this as I doubt it will get fixed.

That said @ericbrunner if you don't have anything constructive to say please don't bother. This is a toolkit built by and for the community with every members free time. Comments like yours really don't help.

[ericbrunner]

@bijington Be kind! I dont bother someone. It was a promise to all Xamarin.Forms devs to have a smooth migration over to MAUI. Keep that promise!

[pictos]

It was a promise to all Xamarin.Forms devs to have a smooth migration over to MAUI. Keep that promise!

@ericbrunner not sure if we, as a Toolkit team, did that promise.

Hey @jfversluis, that Bug still exists afer 10 month since it was reported by @jonakirke94 . Well done!

This is an OSS project, feel free to submit a PR fixing the issue. We will be more than help to merge and/or help you to make the PR be green ˆˆ

[ericbrunner]

Hey @pictos, when OSS like Xamarin.CommunityToolkit nuget is mentioned in the official [Microsoft Migration Guide] (https://learn.microsoft.com/en-us/dotnet/maui/migration/upgrade-assistant#get-started), every developer must expect that all features of Xamarin.CommunityToolkit are working after migration to the CommunityToolkit.Maui.

Replace the Xamarin.CommunityToolkit NuGet package with the .NET MAUI Community Toolkit
NuGet package

Obviously you can`t rely on what is described in official microsoft docs!

From a developer perspective I expect that microsoft supports and sponsors Xamarin.CommunityToolkit and CommunityToolkit.Maui.

Regarding your offer to fix the not working TouchEffect. I haven't the time and buy for 40 bucks a [Mr.Gestures] (https://www.mrgestures.com/) lifetime license, but it seems that the job is already done by @jonakirke94 #1905 (comment)

[christianrr]

Did anyone get Android's Ripple animation to work using NativeAnimation=true and the workarounds of @LennoxP90 or @aminparsa18?

I fiddled around in the code of PlatformTouchEffect.android.cs for quite a while, but could not make it to work. Everything seems to be called correctly (CreateRipple(), StartRipple(), and so on), however no Ripple animation appears.

For iOS it didn't work either, however I was able to fix it by using this.View instead of GetRenderer() (which apparently is null in Maui) and revert to UIViewPropertyAnimator.CreateRunningPropertyAnimator:

// if( control?.GetRenderer() is not UIView renderer )
//   return;
var renderer = this.View;
...
UIViewPropertyAnimator.CreateRunningPropertyAnimator(.2, 0, UIViewAnimationOptions.AllowUserInteraction,
...

All other features, e.g. Pressed state, seem to work correctly...

Version: Maui 8.0.0-preview.6.8686/8.0.100.

[cytoph]

Did anyone get Android's Ripple animation to work using NativeAnimation=true

I'm pretty sure the reason for this, is the reason why currently not even standard buttons have a ripple animation in Android. This is described in these two issues for example: #17642, #18815.