[BUG] TouchBehavior crash about maui HOT 52 OPEN

Why do we have to use a name for the page, I always reference the vm, and that is what I was trying to do

from maui.

Binding issues will be fixed in the next release, see #1791 for details.

The TouchBehavior from this release will inherit the BindingContext of the VisualElement it is attached to (if it exists). This means it will behave in the same way the XCT effect did & the way my Maui.TouchEffect port did. I believe the change will be hotfixed so it should be available soon!

from maui.

which MauiVersion are you using?

8.0.14, the x:Reference works for me, I'm talking about the relative binding Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=MyCommand}" not working.

This is definitely a regression from XCT since my Maui TouchEffect was able to use relative bindings, I noticed this issue when removing my port from my apps.

from maui.

Same issue, except I'm adding the touch behavior to a Frame.

This seems to be related to the Command property binding, if you do not set it, it won't crash.

Output window:

[mono-rt] [ERROR] FATAL UNHANDLED EXCEPTION: System.InvalidOperationException: Operation is not valid due to the current state of the object.
[mono-rt]    at Microsoft.Maui.Controls.Binding.ApplyRelativeSourceBinding(BindableObject targetObject, BindableProperty targetProperty, SetterSpecificity specificity) in D:\a\_work\1\s\src\Controls\src\Core\Binding.cs:line 152
[mono-rt]    at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
[mono-rt]    at Android.App.SyncContext.<>c__DisplayClass2_0.<Post>b__0() in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.App/SyncContext.cs:line 36
[mono-rt]    at Java.Lang.Thread.RunnableImplementor.Run() in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Java.Lang/Thread.cs:line 36
[mono-rt]    at Java.Lang.IRunnableInvoker.n_Run(IntPtr jnienv, IntPtr native__this) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net8.0/android-34/mcw/Java.Lang.IRunnable.cs:line 84
[mono-rt]    at Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V(_JniMarshal_PP_V callback, IntPtr jnienv, IntPtr klazz) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:line 26

from maui.

To answer both of your questions @eduardoagr, @r-work we have to reference something else on the view, ie the page or indeed a parent view because the TouchBehavior itself has no BindingContext. In XCT it did because it was an attached effect, the current MCT implementation uses a PlatformBehavior which does not set the BindingContext, this is following Maui documentation guidelines (see article).

So whilst other things like TapGestureRecognizer will work as expected, the TouchBehavior won't unless you set its binding context through an x:Reference and invoke it that way.

from maui.

Can everyone please update to 8.0.1, this release should fix all the issues we are seeing with data binding!

You can migrate normally now, I've added a little XCT to MCT migration guide on the TouchBehavior docs incase it is of use to anyone!

from maui.

this is how you can fix this.

1. Use the x:Name, for naming your XAML Page
2. Create a relay command in your viewModel
3. When binding the command, use BindingContext.YourCommand and as reference, use the name of the XAML

As a workaround, you could do something like

`

    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:Course">
            <Border StrokeThickness="2">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="8" />
                </Border.StrokeShape>
                <Border.Behaviors>
                    <mct:TouchBehavior
                        DefaultBackgroundColor="Transparent"
                        HoveredBackgroundColor="CornflowerBlue"
                        PressedBackgroundColor="CornflowerBlue" />
                </Border.Behaviors>
                <Border.GestureRecognizers>
                    <TapGestureRecognizer
                        Command="{Binding Path=GoToDetailsCommand, Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesPageViewModel}}}"
                        CommandParameter="{Binding .}" />
                </Border.GestureRecognizers>
                <Grid
                    Margin="5"
                    RowDefinitions="20,20"
                    VerticalOptions="Center">
                    <Label
                        FontAttributes="Bold"
                        Text="{Binding Name, StringFormat='Course name: {0}'}"
                        VerticalTextAlignment="Center" />

                    <Label
                        Grid.Row="1"
                        Text="{Binding Path=Total, Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesPageViewModel}}, StringFormat='Students: {0}'}"
                        VerticalTextAlignment="Center" />

                    <Label
                        Grid.RowSpan="2"
                        FontFamily="Mat"
                        FontSize="40"
                        HorizontalTextAlignment="End"
                        Text="{x:Static helpers:IconFont.Read_more}"
                        VerticalTextAlignment="Center" />
                </Grid>
            </Border>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

`

from maui.

So you are using this inside a DataTemplate? Yes I don't think that will work right now

from maui.

Are we sure RelativeSource's in maui are working the way they are intended to? I feel like this behaviour should be a bug, if it isn't a bug we need to support it properly because data templates do become very annoying to work with when using the MCT version!

from maui.

What if you try something like the following:

<CollectionView
    IsVisible="{Binding isNotBusy}"
    ItemsSource="{Binding CoursesAssigned}"
    x:Name="collectionView">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:Course">
            <Border
                Margin="50"
                Stroke="Purple"
                StrokeThickness="1">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="8,8,8,8" />
                </Border.StrokeShape>
                <Border.Behaviors>
                    <mct:TouchBehavior Command="{Binding Path=BindingContext.GoToDetailsCommand, Source={x:Reference CollectionView}}"
                        CommandParameter="{Binding .}"
                        DefaultBackgroundColor="Transparent"
                        HoveredBackgroundColor="CornflowerBlue"
                        PressedBackgroundColor="CornflowerBlue" />
                </Border.Behaviors>

This provides a name to the CollectionView and then uses that in the Binding

from maui.

Already tried and nothing

from maui.

Here is a repro:
https://github.com/r-work/TouchBehaviorBug

from maui.

@eduardoagr & @r-work can you have a look at this post from @brminnick on SO. Here he shows exactly how to set the binding context on the behavior appropriately, I have seen the crashes when not setting it the recommended way too.

I'm currently in the process of updating the MCT samples & documentation to explicitly call this issue out and show the appropriate way to use the behavior, I have put this in my docs pr but the way you should setup the behavior to pass a command is here:

<ContentPage x:Name="Page">
    <HorizontalStackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="Center">
        <HorizontalStackLayout.Behaviors>
            <mct:TouchBehavior
                BindingContext="{Binding Source={x:Reference Page}, Path=BindingContext}"
                Command="{Binding IncreaseTouchCountCommand}"
                DefaultAnimationDuration="250"
                DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
                PressedOpacity="0.6"
                PressedScale="0.8" />
        </HorizontalStackLayout.Behaviors>

        <ContentView
            BackgroundColor="Gold"
            HeightRequest="100"
            WidthRequest="10" />
        <Label
            LineBreakMode="TailTruncation"
            Text="The entire layout receives touches"
            VerticalOptions="Center" />
        <ContentView
            BackgroundColor="Gold"
            HeightRequest="100"
            WidthRequest="10" />
    </HorizontalStackLayout>
</ContentPage>

The checklist is:

• Put an x:Name="Page on your root element (assuming ContentPage)
• Set the BindingContext: BindingContext="{Binding Source={x:Reference Page}, Path=BindingContext}"
• Reference the Command normally: Command="{Binding IncreaseTouchCountCommand}"

from maui.

@Axemasta my data template lives in a separate XAML file, referencing the page by name is not exactly ideal.
I've been using a gesture recognizer and it works as expected:

<Frame>
    <Frame.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding BindingContext.ItemClickCommand, Source={RelativeSource AncestorType={x:Type Page}}}" CommandParameter="{Binding .}" />
    </Frame.GestureRecognizers>
<Frame />

The issue happens as soon as I change that to a behavior.

from maui.

Why do we have to use a name for the page, I always reference the vm, and that is what I was trying to do

<CollectionView
    x:Name="ff"
    Margin="20"
    HorizontalOptions="Center"
    ItemsSource="{Binding Students}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:DemyUser">
            <Border
                Padding="10"
                StrokeShape="RoundRectangle 8"
                StrokeThickness="2">
                <Grid RowDefinitions="20,20">

                    <Label
                        FontAttributes="Bold"
                        Text="{Binding DemyId, StringFormat='Id: {0}'}" />

                    <Label
                        Grid.Row="1"
                        FontAttributes="Bold"
                        Text="{Binding FullName, StringFormat='Name: {0}'}" />

                    <Label
                        Grid.RowSpan="2"
                        FontFamily="Mat"
                        FontSize="Header"
                        HorizontalTextAlignment="End"
                        Text="{x:Static helpers:IconFont.Email}"
                        VerticalTextAlignment="Center">
                        <Label.Behaviors>
                            <mct:TouchBehavior
                                BindingContext="{Binding Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesDetailPageViewModel}}, Path=BindingContext}"
                                Command="{Binding Path=ContactCommand, Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesDetailPageViewModel}}}" />
                        </Label.Behaviors>
                    </Label>
                </Grid>
            </Border>
        </DataTemplate>
    </CollectionView.ItemTemplate>

[RelayCommand]
async Task Contact(string email) {

    await EmailHelper.OpenEmailClientAsync(email);
}

from maui.

@r-work can you name your Frame instead?

from maui.

@r-work can you name your Frame instead?

Can you use Border instead? AFAIK Frame is kind compatibility, in .NET MAUI, and should be replaced by Border. From docs

from maui.

@eduardoagr this is a duplicate of #1781 - @Axemasta is right in #1783 (comment).

It's a but confusing for existing users of Axemasta's initial port of the TouchEffect or even of TapGestureRecognizer. In that regard, it would have been easier if it was implemented as a GestureRecognizer, but inheriting from Behavior probably brings other advantages.

from maui.

Not exactly a duplicate.
I see 3 issues here.

1. It seems like setting the BindingContext with RelativeSource does not work. It just crashes.

2. How do you set the BindingContext to the parent viewmodel using Source (not RelativeSource) when your control xaml is in a separate file?

3. Why do we need to set the BindingContext, when the Command binding defines its own Source or RelativeSource?

from maui.

@tranb3r excuse me, I didn't pick up those points.

from maui.

I'm not getting crashes, but whenever I set a command like so
Command="{Binding BindingContext.ToggleCommand, Source={x:Reference Page}}"
the related pressing actions of the behavior do not function at all (but hover will still work). If I remove the command, then pressing the control will again trigger the UI changes on opacity and scale (as configured). This is weird because the same command referenced via a different control works perfectly, and looking at the sample app (where it seems to work) it also looks the same. so something isn't getting set here, and results in broken stuff.

from maui.

I fixed it guys thanks the only problem is that I am using a label with a custom font, so I want to change the text color when hover.

from maui.

@Axemasta
seems that TouchBehavior can`t use TemplateBinding

                <ContentPresenter BackgroundColor="#FFFFFF"
                                  Padding="15, 20">
                    <ContentPresenter.Behaviors>
                        <mct:TouchBehavior PressedBackgroundColor="LightGray"
                                           IsEnabled="{TemplateBinding BindingContext.IsSelectable}"
                                           Command="{Binding Source={x:Reference page}, Path=BindingContext.TappedCommand}"
                                           CommandParameter="{TemplateBinding BindingContext}"/>
                    </ContentPresenter.Behaviors>
                </ContentPresenter>

unless I change to this:

                <ContentPresenter BackgroundColor="#FFFFFF"
                                  BindingContext="{TemplateBinding BindingContext}"
                                  Padding="15, 20">
                    <ContentPresenter.Behaviors>
                        <mct:TouchBehavior PressedBackgroundColor="LightGray"
                                           IsEnabled="{Binding IsSelectable}"
                                           Command="{Binding Source={x:Reference page}, Path=BindingContext.TappedCommand}"
                                           CommandParameter="{Binding}"/>
                    </ContentPresenter.Behaviors>
                </ContentPresenter>

I also got the same error:

[mono-rt] [ERROR] FATAL UNHANDLED EXCEPTION: System.InvalidOperationException: Operation is not valid due to the current state of the object.
[mono-rt]    at Microsoft.Maui.Controls.Binding.ApplyRelativeSourceBinding(BindableObject targetObject, BindableProperty targetProperty, SetterSpecificity specificity) in D:\a\_work\1\s\src\Controls\src\Core\Binding.cs:line 152
[mono-rt]    at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
[mono-rt]    at Android.App.SyncContext.<>c__DisplayClass2_0.<Post>b__0() in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.App/SyncContext.cs:line 36
[mono-rt]    at Java.Lang.Thread.RunnableImplementor.Run() in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Java.Lang/Thread.cs:line 36
[mono-rt]    at Java.Lang.IRunnableInvoker.n_Run(IntPtr jnienv, IntPtr native__this) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net8.0/android-34/mcw/Java.Lang.IRunnable.cs:line 84
[mono-rt]    at Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V(_JniMarshal_PP_V callback, IntPtr jnienv, IntPtr klazz) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:line 26

from maui.

also can`t use TemplateBinding directly under ContentPresenter.

from maui.

also can`t use TemplateBinding directly under ContentPresenter.

Which version are you using, if you are using 8.0.0, please upgrade, if its 8.0.1 please file a new issue with a reproduction

from maui.

I'm finishing the migration of my app to TouchBehavior and the Relative Bindings don't seem to work at all, same crash reported in this thread.

I can work around by referencing the command via an x:Reference to the page:

Command="{Binding Source={x:Reference Page}, Path=BindingContext.FormSelectedCommand}"

But its not super convenient, Im not sure why the underlying maui framework is throwing an InvalidOperationException...

This is the method throwing the exception on the maui side, I have no idea where the blame lies for this issue... could it be a maui problem?

from maui.

which MauiVersion are you using?
I`m using 8.0.20-ci.net8.10420 (Maui)
and 8.0.1 (CommunityToolkit.Maui)。
x:Reference works fine on Android.

from maui.

8.0.14, the x:Reference works for me, I'm talking about the relative binding Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MyViewModel}}, Path=MyCommand}" not working.

This is definitely a regression from XCT since my Maui TouchEffect was able to use relative bindings, I noticed this issue when removing my port from my apps.

Yes, as TemplateBinding does, No issues with Maui TouchEffect i can fix it by setting BindingContext.
but RelativeSource maybe a little difficulty

from maui.

ugh just got into this RelativeSource crashing issue now while adapting TouchBehavior to my existing project... :(
my TouchBehavior is inside a control template which exists in a resource dictionary file, so it doesn't have a direct way of linking to its ancestors other than specifying their type....

from maui.

@MitchBomcanhao
#1783 (comment)

from maui.

not sure what you meant there, @tranb3r - the binding situation has changed since 8.0.1 was released, but it seems the relative source crashing (in my case when binding a command) is still there.

from maui.

not sure what you meant there, @tranb3r - the binding situation has changed since 8.0.1 was released, but it seems the relative source crashing (in my case when binding a command) is still there.

Exactly. I just wanted to remind that this issue has already been reported.
There is crash when using RelaliveSource. This has nothing to do with the BindingContext being set automatically in 8.0.1 or manually in 8.0.0.

from maui.

I'm struggling to get the touch behavior to work in a DataTemplate.

My workaround is to use the TouchBehavior for my animation, and use a Gesture Recognizer for the command and parameter

<DataTemplate x:Key="RecentDeviceTemplate" x:DataType="models:DeviceItem">
                <Frame Padding="16,8,16,8" BackgroundColor="Transparent">
                    <Frame
                        x:Name="Frame"
                        AutomationId="DeviceCell"
                        Style="{StaticResource AppPancakeView}">
                        <Frame.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding ConnectDeviceCommand, Source={RelativeSource AncestorType={x:Type viewModels:ConnectNewDeviceViewModel}}}"
                                                  CommandParameter="{Binding .}"/>
                        </Frame.GestureRecognizers>
                        <Frame.Behaviors>
                            <mct:TouchBehavior DefaultAnimationDuration="250"
                                               DefaultAnimationEasing="{x:Static Easing.SpringOut}"
                                               PressedScale=".95"/> 
                        </Frame.Behaviors>
                        <StackLayout Orientation="Horizontal" Spacing="8">
                            ...
                        </StackLayout>
                    </Frame>
                </Frame>
            </DataTemplate>

from maui.

I am using version 8.0.1 and I am experiencing the crash with
Operation is not valid due to the current state of the object.

<CollectionView Grid.Row="2"
                BackgroundColor="Black"
                VerticalScrollBarVisibility="Never"
                ItemsSource="{Binding FilteredConversationList}"
                ItemSizingStrategy="MeasureAllItems"
                ItemsUpdatingScrollMode="KeepScrollOffset"
                IsVisible="{Binding IsSearching}">
  <CollectionView.ItemsLayout>
    <LinearItemsLayout Orientation="Vertical" ItemSpacing="5"/>
  </CollectionView.ItemsLayout>
  <CollectionView.ItemTemplate>
    <DataTemplate x:DataType="models:ConversationModel">
      <Grid Margin="0"
            Padding="4"
            x:DataType="models:ConversationModel"
            RowDefinitions="Auto,Auto"
            ColumnDefinitions="*,*,25"
            BackgroundColor="#1C1C1C">
        
        <Grid.Behaviors>
          <toolkit:TouchBehavior Command="{Binding PressedCommand,
                                                   Source={RelativeSource AncestorType={x:Type viewmodels:ConversationsViewModel}}}"
                                 CommandParameter="{Binding .}"/>
        </Grid.Behaviors>

from maui.

I was so excited for this but:
'Operation is not valid due to the current state of the object.'

 <Grid VerticalOptions="Center"
       Margin="0,120,0,0"
       ZIndex="5">
     <Image
         x:Name="LikeButton" 
         Margin="0,0,0,0"
         ZIndex="2"
         HeightRequest="35" 
         WidthRequest="35" 
         Source="{Binding LikeButtonImage}"
         IsVisible="{Binding IsLikeButtonVisible}">
         <Image.Shadow>
             <Shadow
             Radius="5"
             Brush="Black"
             Opacity="0.6"
             Offset="3,0"/>
         </Image.Shadow>
         <Image.Behaviors>
             <toolkit:TouchBehavior
                 DefaultAnimationDuration="250"
                 DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
                 Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DiscoverViewModel}}, Path=LikeOrUnlikeContentCommand}"
                 PressedOpacity="0.8"
                 PressedScale="0.8" />
         </Image.Behaviors>
     </Image>

from maui.

Can some one provide an sample? The sample provide by @r-work is hitting a 404 page.

from maui.

@pictos my apologies, just realized the repo was private, I've just made it public.

from maui.

I was so excited for this but: 'Operation is not valid due to the current state of the object.'

 <Grid VerticalOptions="Center"
       Margin="0,120,0,0"
       ZIndex="5">
     <Image
         x:Name="LikeButton" 
         Margin="0,0,0,0"
         ZIndex="2"
         HeightRequest="35" 
         WidthRequest="35" 
         Source="{Binding LikeButtonImage}"
         IsVisible="{Binding IsLikeButtonVisible}">
         <Image.Shadow>
             <Shadow
             Radius="5"
             Brush="Black"
             Opacity="0.6"
             Offset="3,0"/>
         </Image.Shadow>
         <Image.Behaviors>
             <toolkit:TouchBehavior
                 DefaultAnimationDuration="250"
                 DefaultAnimationEasing="{x:Static Easing.CubicInOut}"
                 Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:DiscoverViewModel}}, Path=LikeOrUnlikeContentCommand}"
                 PressedOpacity="0.8"
                 PressedScale="0.8" />
         </Image.Behaviors>
     </Image>

Same crash Maui 8.0.20

from maui.

yes, you'll get that crash if using relativesource on the command. there's the workaround that puts the command in a tapgestureRecognizer for you to get something that kind of works

from maui.

yes, you'll get that crash if using relativesource on the command. there's the workaround that puts the command in a tapgestureRecognizer for you to get something that kind of works

But I lose the toucheffect UI....

from maui.

afaik you can leave the rest of the stuff, just put the command on the tap gesture recognizer. the rest of the touch behavior stuff should still happen

from maui.

afaik you can leave the rest of the stuff, just put the command on the tap gesture recognizer. the rest of the touch behavior stuff should still happen

I guess this workaround doesn't work for relativesource on Android, touch effect works but commands are not triggered. Btw iOS is okay

from maui.

I am still in need of a solution for longpress, which is the entire point of using the original touch effect in my project

from maui.

I am still in need of a solution for longpress, which is the entire point of using the original touch effect in my project

That sounds like an unrelated issue to this one. Have you raised an issue for that?

from maui.

it is the same issue with relative source

from maui.

Have you tried the suggested workaround by avoiding RelativeSource?

from maui.

I cannot avoid relative source as i am using datatemplates that switch depending on context

from maui.

for now i just reverted my usage of the touchbehaviour and I will continue to use the TouchEffect source compiled in my project

from maui.

Any news about this issue?
I have updated to CommunityToolkit.Maui 9.0.0 but it still persist for example with:

    <Grid 
        Padding="10"  Grid.Column="1"
        BackgroundColor="#fdd6a3" RowDefinitions="20,auto,auto" ColumnDefinitions="*,*,*" RowSpacing="0" ColumnSpacing="0" HorizontalOptions="FillAndExpand">
        <Grid.Behaviors>
            <toolkit:TouchBehavior 
                LongPressCommand="{Binding Source={RelativeSource AncestorType={x:Type vm:ChatViewModel}}, Path=ApriLogLetturaCommand}"
                LongPressDuration="1500"
                LongPressCommandParameter="{Binding .}"/>
        </Grid.Behaviors>

from maui.

@MattePozzy there is a workaround mentioned somewhere in the comments that suggests avoiding RelativeSource bindings. I would recommend trying that for now if you can

from maui.

@MattePozzy there is a workaround mentioned somewhere in the comments that suggests avoiding RelativeSource bindings. I would recommend trying that for now if you can

I have changed code in this way and works:

<ContentView
 [..]
    x:Name="Me">

        <Grid 
            Grid.Row="0" Grid.Column="0" BackgroundColor="#F99209" Padding="10"
            RowDefinitions="20,auto,auto" ColumnDefinitions="auto,auto,auto" RowSpacing="0" ColumnSpacing="0" HorizontalOptions="Fill">
            <Grid.Behaviors>
                <toolkit:TouchBehavior 
                    BindingContext="{Binding Source={x:Reference Me}, Path=BindingContext}"
                    LongPressCommand="{Binding ApriLogLetturaCommand}"
                    LongPressDuration="1500"
                    LongPressCommandParameter="{Binding .}"/>
            </Grid.Behaviors>

But it doesn't work because the template is for an element list and the BindingContext of Me is the element itself and not the Viewmodel where the Command is.

from maui.

I've not had a chance to test whether this is a MAUI or MCT issue. I agree we need to find a solution though

from maui.