Getting the swiped item and setting its BindingContext blanks ListView

Question

I have a listview which works perfectly fine, until I try to get the swiped item by its binding context and it makes the listview appear blank. In code behind this allows me to access the item's data but when I run my app, it makes the listview blank...

Listview

<ListView
                        x:Name="MyList"
                        Grid.Row="1"
                        HasUnevenRows="True"
                        HeightRequest="10"
                        BackgroundColor="White"
                        IsGroupingEnabled="True"
                        IsPullToRefreshEnabled="false"
                        ItemsSource="{Binding LogItems}"
                        IsRefreshing="{Binding IsBusy, Mode=OneWay}"
                        RefreshCommand="{Binding LoadLogsCommand}"
                        SeparatorVisibility="None"                        
                        >
                        <ListView.ItemTemplate>
                            <DataTemplate >
                                <ViewCell Height="70">
                                    <StackLayout Orientation="Vertical"  VerticalOptions="Start"  >

                                        <SwipeView SwipeStarted="SwipeView_SwipeStarted" x:Name="mySwipeView" >                                            

                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="5"/>
                                                    <RowDefinition Height="36"/>
                                                    <RowDefinition Height="36"/>
                                                    <RowDefinition Height="60"/>                                                
                                                </Grid.RowDefinitions>

                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="100"/>
                                                    <ColumnDefinition Width="20"/>
                                                    <ColumnDefinition Width="110"/>
                                                    <ColumnDefinition Width="20"/>
                                                    <ColumnDefinition Width="100"/>
                                                    <ColumnDefinition Width="36"/>
                                                
                                                </Grid.ColumnDefinitions>
                                                
                                                <Label
                                                       Grid.Row="1"
                                                       Grid.Column="0"
                                                       VerticalOptions="Center"
                                                       FontAttributes="None"                                       
                                                       Text="{Binding  .Name}"
                                                       TextColor="Black"
                                                       Margin="0, 0,0, 0"
                                                       Padding="20,10,0,0"
                                                       FontFamily="Hiragino Sans"
                                                       FontSize="14"
                                                       HeightRequest="53"                                      
                                                  />
...
                                                </Grid>
                                            </Grid>
                                            <SwipeView.RightItems>
                                                <SwipeItems Mode="Reveal" SwipeBehaviorOnInvoked="Close" >

                                                    <SwipeItemView Invoked="OnDeleteSwipeItemInvoked" >
                                                        <StackLayout Orientation="Vertical" WidthRequest="200" BackgroundColor="Red">
                                                            <StackLayout HorizontalOptions="Start">
                                                                <Image Source="deleteIcon3.png" HeightRequest="25" WidthRequest="25" Margin="70,15,0,0" />
                                                                <Label Text=" Delete" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" Margin="70,0,0,0"/>
                                                            </StackLayout>
                                                        </StackLayout>
                                                    </SwipeItemView>
                                                   </SwipeItems>
                                            </SwipeView.RightItems>
                                        </SwipeView>
                                    </StackLayout>
                                </ViewCell>
                            </DataTemplate>                              
                        </ListView.ItemTemplate>

Code Behind

private void SwipeView_SwipeStarted(object sender, SwipeItemView e, SwipedEventArgs f, SwipeChangingEventArgs g) //SwipeStartedEventArgs e)
        {
            // var theItem = (myLogsModel)f.SelectedItem;
           var item = sender as SwipeItem;

           var model = item.BindingContext as myLogsModel;

var x = model.Name; ...

}

Please could anyone help me with how to get the swiped item without effecting my listview?

Answer 1

From Xamarin.Forms SwipeView , we can see that SwipeStarted is fired when a swipe starts. The SwipeStartedEventArgs object that accompanies this event has a SwipeDirection property, of type SwipeDirection.

So you can get current listview item from OnDeleteSwipeItemInvoked method.

I do one sample that you can take a look:

<ListView ItemsSource="{Binding items}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <SwipeView>
                                <SwipeView.RightItems>
                                    <SwipeItems>
                                        <SwipeItemView Invoked="SwipeItemView_Invoked">
                                            <StackLayout
                                                BackgroundColor="Red"
                                                Orientation="Vertical"
                                                WidthRequest="200">
                                                <StackLayout HorizontalOptions="Start">
                                                    <Image
                                                        Margin="70,15,0,0"
                                                        HeightRequest="25"
                                                        Source="delete.png"
                                                        WidthRequest="25" />
                                                    <Label
                                                        Margin="70,0,0,0"
                                                        FontSize="15"
                                                        HorizontalOptions="CenterAndExpand"
                                                        Text=" Delete"
                                                        TextColor="White" />
                                                </StackLayout>
                                            </StackLayout>
                                        </SwipeItemView>
                                      
                                    </SwipeItems>
                                </SwipeView.RightItems>
                                <!--  Content  -->
                                <SwipeView.Content>
                                    <Grid
                                        BackgroundColor="LightGray"
                                        HeightRequest="60"
                                        WidthRequest="300">
                                        <Label
                                            HorizontalOptions="Center"
                                            Text="{Binding title}"
                                            VerticalOptions="Center" />
                                    </Grid>
                                </SwipeView.Content>

                            </SwipeView>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

public partial class Page4 : ContentPage
{
    public ObservableCollection<menuitem> items { get; set; }
    public Page4()
    {
        InitializeComponent();
        items = new ObservableCollection<menuitem>()
        {
            new menuitem(){title="title 1"},
            new menuitem(){title="title 2"},
            new menuitem(){title="title 3"},
            new menuitem(){title="title 4"},
            new menuitem(){title="title 5"},
            new menuitem(){title="title 6"}

        };
        this.BindingContext = this;
    }

   
    private void SwipeItemView_Invoked(object sender, EventArgs e)
    {
        SwipeItemView item = sender as SwipeItemView;
        menuitem model = item.BindingContext as menuitem;
      
    }
}

public class menuitem
{
    public string title { get; set; }
}

As Jason said, we also suggest you can use ListView context menu to do, don't need to use SwipView. Select one item and long press to get context menu, like the following screenshot.

 <ListView ItemsSource="{Binding items}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.ContextActions>
                            <MenuItem Clicked="OnMore" Text="More" />
                            <MenuItem Clicked="OnDelete" Text="Delete" />
                        </ViewCell.ContextActions>
                        <StackLayout>
                            <Label Text="{Binding title}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

  private void OnMore(object sender, EventArgs e)
    {
        MenuItem item = sender as MenuItem;
        menuitem model = item.BindingContext as menuitem;
    }

About ListView interactivity, please take a look:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/interactivity