Forum Xamarin Xamarin.Forms

CollectionView, SwipeView, and Entry

pchascopchasco Member ✭✭

I would like to place an Entry element within a SwipeView, contained in CollectionView. I want a user to be able to swipe away an item from the list, and also have the ability to edit the item in-place. I have seen this sort of functionality in various applications, such as the Alexa app on iOS.

I am able to get this feature to work only if the Entry field is disabled. However, when the Entry is enabled it appears to receive the touch input and the SwipeView does not capture the gesture.

<CollectionView x:Name="players"
                          HorizontalOptions="FillAndExpand"
                          HeightRequest="300"
                          ItemsSource="{Binding Players}">
                    <CollectionView.EmptyView>
                        <Label Text="No players added"/>
                    </CollectionView.EmptyView>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <SwipeView>
                                <SwipeView.RightItems>
                                    <SwipeItems Mode="Reveal">
                                        <SwipeItem Text="Delete"
                                                   BackgroundColor="Red"
                                                   Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:CustomGameViewModel}}, Path=RemovePlayerCommand}"
                                                   CommandParameter="{Binding .}"/>
                                    </SwipeItems>
                                </SwipeView.RightItems>
                                <Grid HeightRequest="60"
                                      HorizontalOptions="FillAndExpand">
                                    <Entry Text="{Binding Name}"
                                           Placeholder="Player or team name" 
                                           IsEnabled="True" />
                                </Grid>
                            </SwipeView>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

Is this functionality possible with Xamarin.Forms and SwipeView in XAML, or will it require custom implementation? If that's the case then I'll find another UX solution rather than some custom implementation.

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited October 19

    However, when the Entry is enabled it appears to receive the touch input and the SwipeView does not capture the gesture.

    I created a basic demo to test the code, the SwipeView works fine when the Entry is enabled. But because Entry has
    the Focus function, the Focused evnet will be executed first if you focus the entry.

  • pchascopchasco Member ✭✭
    Thanks! Did you test this in Android or Windows?
  • JarvanJarvan Member, Xamarin Team Xamurai
    edited October 19

    I test the code on the Android platform.

  • pchascopchasco Member ✭✭

    Interestingly this is not working for me in the Android emulator, running Android 9. Did you make any changes to the XAML to make this work?

  • JarvanJarvan Member, Xamarin Team Xamurai

    I used the Invoked event instead, but there is no difference from command. Will the code work well if changing the Entry to a Label?

    <SwipeView>
        <SwipeView.RightItems>
            <SwipeItems Mode="Reveal">
                <SwipeItem Text="Delete"
                    BackgroundColor="Red"
                    Invoked="SwipeItem_Invoked"/>
            </SwipeItems>
        </SwipeView.RightItems>
        ...
    </SwipeView>
    
  • pchascopchasco Member ✭✭
    edited October 19

    Yes, using a Label does work. I think there is confusion about what the issue is. I'm not experiencing an issue with invoking the event when the SwipeItem is tapped. My issue is that the swipe gesture on the Entry is not captured at all, so I cannot reveal the SwipeItem. If the Entry within the SwipeView is disabled, then the swipe gesture is captured and the delete button is revealed.

  • JarvanJarvan Member, Xamarin Team Xamurai

    My issue is that the swipe gesture on the Entry is not captured at all

    @pchasco Check the posted comment above, the swipe gesture on the Entry could be captured.

    Also the Invoked event works fine.

  • pchascopchasco Member ✭✭
    Thanks! It is simply not working for me. I do not know what I could do differently. When I swipe, the buttons are not revealed.
  • JarvanJarvan Member, Xamarin Team Xamurai

    Could you upload a repro demo to the github and share the link here? It'll help to get the cause to the issue.

Sign In or Register to comment.