CommunityToolkit / Maui

The .NET MAUI Community Toolkit is a community-created library that contains .NET MAUI Extensions, Advanced UI/UX Controls, and Behaviors to help make your life as a .NET MAUI developer easier
https://learn.microsoft.com/dotnet/communitytoolkit/maui
MIT License
2.29k stars 404 forks source link

[BUG] [Android] [WinUI] Incorrect property binding to element when using TouchBehavior in style #2232

Open alex3696 opened 2 months ago

alex3696 commented 2 months ago

Is there an existing issue for this?

Did you read the "Reporting a bug" section on Contributing file?

Current Behavior

When you use TouchBehavior in styles, an animation occurs when you click and hover over another element. 1) In picture No. 2 there are 5 elements in the CollectionView, when you hover and click on element 2, the animation is triggered on element 4 2) In picture No. 3 there are 4 elements in the VertiCalStackLayout, when you hover and click on element 1, the animation is triggered on element 4 in the CollectionView

BugTouchBehavior

Expected Behavior

When you use TouchBehavior in styles, the animation should occur when you click and hover on the same element where the cursor or click is located, like the element in picture #1.

Steps To Reproduce

1)open and run solution in repository 2)try hover on elements in colums 2 and 3 in and press 3)animation will occur on the wrong elements

Link to public reproduction project repository

https://github.com/alex3696/BugMauiTkBehavior.git

Environment

- .NET MAUI CommunityToolkit: 9.0.3
- OS: Windows, Android, (iOS - not tested)
- .NET MAUI: tested in 8.0.80.. 8.0.91

workaround

use TouchBehavior directly

  <Border BackgroundColor="DarkGray">
      <Border.Behaviors>
          <toolkit:TouchBehavior HoveredScale="0.8" HoveredBackgroundColor="LawnGreen" 
                                                                                 PressedBackgroundColor="Green"/>
      </Border.Behaviors>
      <Label Text="{Binding Id}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
  </Border>

instead

<ContentPage.Resources>
    <Style
        x:Key="MenuItemStyle"
        TargetType="{x:Type Border}">
        <Style.Behaviors>
            <toolkit:TouchBehavior HoveredScale="0.8" HoveredBackgroundColor="Pink" PressedBackgroundColor="Red" ShouldMakeChildrenInputTransparent="False"/>
        </Style.Behaviors>
    </Style>
</ContentPage.Resources>
<Border  Style="{StaticResource MenuItemStyle}" BackgroundColor="DarkGray">
    <Label Text="{Binding Id}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Border>
alex3696 commented 4 weeks ago

It looks like TouchBehavior doesn’t work anywhere in the templates because https://github.com/CommunityToolkit/Maui/pull/1673#issuecomment-1969513311 After changing (delete, add) the collection (ItemsSource="{Binding Items}") ItemTemplate in CollectionView in LongPress the element is selected incorrectly, while in GestureRecognizers everything is correct.

<CollectionView
    ItemsLayout="VerticalList"
    ItemsSource="{Binding Items}"
    SelectedItems="{Binding SelectedItems}"
    SelectionMode="{Binding SelectionMode}" >

    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="vm:ItemVM">
            <StackLayout>
                <Border HeightRequest="50">

                    <Border.Behaviors>
                        <mct:TouchBehavior
                            LongPressCommand="{Binding Path=BindingContext.CmdLongPress, Source={x:Reference ThisPage}}"
                            LongPressCommandParameter="{Binding .}" />
                    </Border.Behaviors>

                    <Border.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding Path=BindingContext.CmdEdit, Source={x:Reference ThisPage}}"
                                              CommandParameter="{Binding .}"/>
                    </Border.GestureRecognizers>

                    <Grid ColumnDefinitions="60,30*">
                        <Label
                            Grid.Column="0"
                            Style="{StaticResource TitleLabel}"
                            Text="{Binding Key}" />
                        <Label
                            Grid.Column="1"
                            Style="{StaticResource TitleLabel}"
                            Text="{Binding Value}" />
                    </Grid>
                </Border>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

may be it same https://devblogs.microsoft.com/dotnet/dotnet-8-performance-improvements-in-dotnet-maui/#patterns-that-cause-leaks:-c#-events