[Bug] Long Press blocks CollectionView selection

[davidortinau]

Description

When I add TouchEffect to any element inside my CollectionView ItemTemplate I lose the selection from CollectionView itself.

My goal is to have a long press on the item, and still allow multiple selection. See the video:

https://www.screencast.com/t/TMYYOopoTFQ

<CollectionView Margin="8"
            x:Name="PhotosCV"
            SelectionMode="Multiple"
            SelectedItems="{Binding SelectedPhotos, Mode=TwoWay}"
            SelectionChangedCommand="{Binding SelectionChangedCommand}"
            ItemsSource="{Binding Photos}"
            >
    <CollectionView.ItemsLayout>
        <GridItemsLayout
        Orientation="Vertical"
        Span="2"
        HorizontalItemSpacing="8"
        VerticalItemSpacing="8"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame
            HeightRequest="120"
            CornerRadius="0"
            Padding="0"
            BackgroundColor="{StaticResource ThemePrimary}"
            Visual="Material"
            HasShadow="True"
            
            >
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter
                                Property="Padding"
                                Value="0"/>
                                <Setter
                                TargetName="CheckIcon"
                                Property="Image.IsVisible"
                                Value="False"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter
                                Property="Padding"
                                Value="8"/>
                                <Setter
                                TargetName="CheckIcon"
                                Property="Image.IsVisible"
                                Value="True"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid
                    xct:TouchEffect.HoveredScale="1.2"
                    xct:TouchEffect.NativeAnimation="True"
                    xct:TouchEffect.LongPressDuration="200"
                    xct:TouchEffect.LongPressCommand="{Binding LongPressCommand, 
                    Source={RelativeSource AncestorType={x:Type pg:PhotoGalleryViewModel}}}"
                    >
                    <Image
                    Source="{Binding ImageSrc}"
                    Aspect="AspectFill"/>
                    <Image
                    x:Name="CheckIcon"
                    Source="{FontImage FontFamily=FontAwesome,
                        Glyph={x:Static app:IconFont.CheckSquare},
                        Color={StaticResource ThemePrimary},
                        Size=18}"
                    VerticalOptions="End"
                    HorizontalOptions="Start"
                    Margin="4"/>
                </Grid>
                
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Basic Information

• Version with issue: 1.0.0

  • Android: 10

• XF 5

Reproduction Link

https://github.com/davidortinau/Xappy/tree/feature/longpress

[davidortinau]

Looks like this may be a CollectionView issue and not related to Touch effect at all.

[AndreiMisiukevich]

Looks like this may be a CollectionView issue and not related to Touch effect at all.

I lean towards agreeing with you.
We set e.Handled = false when handling Touch in Android effect's implementation.
It should pass the event forward, I guess.

[davidortinau]

I've got both tap, long press, and multi-select working now by ignoring the ColV built-in selection and doing the selection myself.

                        <Grid
                            xct:TouchEffect.Command="{Binding PressedCommand,
                        Source={RelativeSource AncestorType={x:Type pg:PhotoGalleryViewModel}}}"
                            xct:TouchEffect.CommandParameter="{Binding .}"
                            xct:TouchEffect.LongPressCommand="{Binding LongPressCommand,
                        Source={RelativeSource AncestorType={x:Type pg:PhotoGalleryViewModel}}}"
                            xct:TouchEffect.LongPressCommandParameter="{Binding .}"
                            xct:TouchEffect.PressedScale="1.2"
                             xct:TouchEffect.NativeAnimation="True"
                            >

The VM then adds/removes items from the ObservableCollection of selected items which is bound to my ColV.

Closing this, just wanted to share what I did to achieve my UX.

[AndreiMisiukevich]

I've got both tap, long press, and multi-select working now by ignoring the ColV built-in selection and doing the selection myself.

                        <Grid
                            xct:TouchEffect.Command="{Binding PressedCommand,
                        Source={RelativeSource AncestorType={x:Type pg:PhotoGalleryViewModel}}}"
                            xct:TouchEffect.CommandParameter="{Binding .}"
                            xct:TouchEffect.LongPressCommand="{Binding LongPressCommand,
                        Source={RelativeSource AncestorType={x:Type pg:PhotoGalleryViewModel}}}"
                            xct:TouchEffect.LongPressCommandParameter="{Binding .}"
                            xct:TouchEffect.PressedScale="1.2"
                             xct:TouchEffect.NativeAnimation="True"
                            >

The VM then adds/removes items from the ObservableCollection of selected items which is bound to my ColV.

Closing this, just wanted to share what I did to achieve my UX.

Oh) I've already started to add a workaround

void HandleCollectionView(TouchEffect sender)
		{
			Element element = sender.Element;
			while (element.Parent != null)
			{
				if (!(element.Parent is CollectionView collectionView))
				{
					element = element.Parent;
					continue;
				}

				var item = element.BindingContext ?? element;
				var selectedItems = collectionView.SelectedItems.ToList();

				if (selectedItems.Contains(item))
					selectedItems.Remove(item);
				else
					selectedItems.Add(item);

				collectionView.UpdateSelectedItems(selectedItems);
				break;
			}
		}