Search code examples
c#xamarin.formslong-pressxamarin-community-toolkitxamarin.forms.collectionview

Xamarin community toolkit TouchEffect.Command not working in CollectionView


I'm trying to have a long press and short press command in a CollectionView. I'm using Xamarin.Community.ToolKit But target ViewModel Command is not being called. TouchEffect works when it's outside of CollectionView. But not when it's inside the CollectionView.

Below is the Collection View:

            <CollectionView x:Name="ItemsCollectionView"
                ItemsSource="{Binding FolderFiles}" 
                VerticalOptions="FillAndExpand"
                SelectionMode="{Binding SelectionModeFolderFile}"
                SelectedItems="{Binding SelectedFolderFiles}"
                >
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        
                        <Grid xct:TouchEffect.Command="{Binding ShortPressCommandSelection}"
                              xct:TouchEffect.LongPressCommand="{Binding LongPressCommandSelection}"
                              xct:TouchEffect.NativeAnimation="True"
                              >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="45"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10*"></ColumnDefinition>
                                <ColumnDefinition Width="60*"></ColumnDefinition>
                                <ColumnDefinition Width="10*"></ColumnDefinition>
                                <ColumnDefinition Width="10*"></ColumnDefinition>
                                <ColumnDefinition Width="10*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>


                            <Image Grid.Row="0" Grid.Column="0"  x:Name="imgFileOrFolder" Source="{Binding ImgFileOrFolderSource}"   VerticalOptions="Center" WidthRequest="15" >
                            </Image>

                            <Label Grid.Row="0" VerticalTextAlignment="Center" Grid.Column="1" Text="{Binding Name}" 
                            LineBreakMode="NoWrap" 
                            Style="{DynamicResource ListItemTextStyle}" 
                            FontSize="12" />

                            <Image Grid.Row="0" Grid.Column="2"  x:Name="imgPlay" Source="{Binding ImgPlaySource}"  VerticalOptions="Center" WidthRequest="25">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer CommandParameter="{Binding Path}"
                                Tapped="PlayTapped" />
                                </Image.GestureRecognizers>
                            </Image>

                            <Image Grid.Row="0" Grid.Column="3"  x:Name="imgShuffle" Source="{Binding ImgShuffleSource}"  VerticalOptions="Center" WidthRequest="25">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer CommandParameter="{Binding Path}"
                                Tapped="ShuffleTapped" />
                                </Image.GestureRecognizers>
                            </Image>

                            <Image Grid.Row="0" Grid.Column="4"  x:Name="imgMoreInfo" Source="{Binding ImgMoreInfoSource}"  VerticalOptions="Center" WidthRequest="15">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer
                                Tapped="MoreInfoTapped" />
                                </Image.GestureRecognizers>
                            </Image>
                        </Grid>

                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

Target View Model Properties:

    public ICommand LongPressCommandSelection { get; set; }

    public ICommand ShortPressCommandSelection { get; set; }

Constructor:

        LongPressCommandSelection = new Command(LongPressCommand_SelectionChanged);
        ShortPressCommandSelection = new Command(ShortPressCommand_SelectionChanged);

Methods:

    public void LongPressCommand_SelectionChanged()
    {
        Console.Write("selection changed");

    }

    public void ShortPressCommand_SelectionChanged()
    {
        Console.Write("selection changed");
    }

Solution

  • The problem is not with TouchEffect the problem is with your Binding, because inside a DataTemplate the BindingContext if not specified get overridden (changed) to the value of ItemsSource instead of the inherited BindingContext.

    You are binding with a wrong BindingContext (source), during debugging if you open and look at your "xaml binding failures" window/pane you will see explicit clear errors saying something like LongPressCommandSelection could not be found in FolderFiles, you should specify your binding source in this case:

    <ContentPage x:Name="thisPage" ...>
    ...
    <Grid xct:TouchEffect.LongPressCommand="{Binding Source={x:Reference thisPage}, Path=BindingContext.LongPressCommandSelection}"