Xamarin Forms Delete item from ListView using SwipView

Question

I have a ScrollView with a DataTemplate and a SwipeView in it. The data for each label in this DataTemplate will be set via Bindings.

Now I want to delete one item with clicking on the SwipeItem "Delete". How do I get the item correclty, because x:name is not working. There I get the error that it doesn't exist.

Page.xaml:

<ScrollView Margin="10,5,10,5" x:Name="ScrollViewListe">
                <StackLayout>
                    <Frame BorderColor="Teal">
                        <StackLayout>
                            <Label Text="Deine Vokabel" HorizontalTextAlignment="Center" FontSize="Large" TextColor="Teal"/>
                            <CollectionView x:Name="VListe" SelectionMode="Single">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <SwipeView>
                                            <SwipeView.LeftItems>
                                                <SwipeItems>
                                                    <SwipeItem 
                                                        Text="Edit"
                                                        IconImageSource="icon_edit_48px.png"
                                                        BackgroundColor="LightGreen"
                                                        Invoked="VListe_Edit" />
                                                    <SwipeItem 
                                                        Text="Delete"
                                                        IconImageSource="icon_delete_48px.png"
                                                        BackgroundColor="LightPink"
                                                        Invoked="VListe_Delete" />
                                                </SwipeItems>
                                            </SwipeView.LeftItems>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition 
                                                        Width="*"
                                                    />
                                                </Grid.ColumnDefinitions>

                                                <Grid.RowDefinitions>
                                                    <RowDefinition 
                                                        Height="*"
                                                    />
                                                </Grid.RowDefinitions>
                                                <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Teal" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
                                                <Label Grid.Row="1" Grid.Column="0" Text="Nummer:" FontAttributes="Bold"/>
                                                <Label Grid.Row="1" Grid.Column="1" Text="{Binding ID}" x:Name="TB_ID"/>
                                                <Label Grid.Row="2" Grid.Column="0" Text="Deutsch:" FontAttributes="Bold"/>
                                                <Label Grid.Row="2" Grid.Column="1" Text="{Binding Deutsch}" x:Name="TB_DEU"/>
                                                <Label Grid.Row="3" Grid.Column="0" Text="Übersetzung:" FontAttributes="Bold"/>
                                                <Label Grid.Row="3" Grid.Column="1" Text="{Binding Uebersetzung}" x:Name="TB_UE"/>
                                                <Label Grid.Row="4" Grid.Column="0" Text="Übersetzung 1:" FontAttributes="Bold"/>
                                                <Label Grid.Row="4" Grid.Column="1" Text="{Binding Uebersetzung1}" x:Name="TB_UE1"/>
                                                <Label Grid.Row="5" Grid.Column="0" Text="Übersetzung 2:" FontAttributes="Bold"/>
                                                <Label Grid.Row="5" Grid.Column="1" Text="{Binding Uebersetzung2}" x:Name="TB_UE2"/>
                                                <Label Grid.Row="6" Grid.Column="0" Text="Sprache:" FontAttributes="Bold"/>
                                                <Label Grid.Row="6" Grid.Column="1" Text="{Binding Sprache}" x:Name="TB_SPR"/>
                                                <BoxView Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Teal" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
                                            </Grid>
                                        </SwipeView>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </StackLayout>
                    </Frame>
                </StackLayout>
            </ScrollView>

Page.xaml.cs:

private async void VListe_Delete(object sender, TextChangedEventArgs e)

    {
        DataHelper.Database dh = new DataHelper.Database();

        EigeneVokabel eigeneVokabel = new EigeneVokabel
        {
            ID = ?
            Deutsch = ?,
            Uebersetzung = ?,
            Uebersetzung1 = ?,
            Uebersetzung2 = T?,
            Sprache = ?
        };

        try
        {
            if (dh.DeleteEigeneVokabel(eigeneVokabel))
            {
                await DisplayAlert("Info", "...", "OK");
            }
            else
            {
                await DisplayAlert("Error", "...", "OK");
            }
        }
        catch
        {
            await DisplayAlert("Error", "...", "OK");
        }
    }

DataHelper:

    public bool DeleteEigeneVokabel(EigeneVokabel eigeneVokabel)
    {
        try
        {
            var connection = new SQLiteConnection(dbpath);

            connection.Delete(eigeneVokabel);
            connection.Close();
            return true;
        }
        catch (SQLiteException)
        {
            //Log.Info("SQLite Error!", ex.Message);
            return false;
        }
    }

Can some help?

EDIT 30.07.2020:

My Test was the following, but the class TEST is not reached and not fireing and please help me to understand what is missing.

Page.XAML:

<CollectionView x:Name="VListe" SelectionMode="Single">
                                    <CollectionView.ItemTemplate>
                                        <DataTemplate>
                                            <SwipeView>
                                                <SwipeView.LeftItems>
                                                    <SwipeItems>
                                                        <SwipeItem 
                                                            Text="Bearbeiten"
                                                            IconImageSource="icon_bearbeiten_48px.png"
                                                            BackgroundColor="LightGreen"
                                                            Invoked="Delete" />
                                                        <SwipeItem 
                                                            Text="Löschen"
                                                            IconImageSource="icon_loeschen_48px.png"
                                                            BackgroundColor="LightPink"
                                                            Command="{Binding Path=BindingContext.Delete, Source={x:Reference Name=VokListe}}"
                                                            CommandParameter="{Binding ID}"/>
                                                    </SwipeItems>
                                                </SwipeView.LeftItems>
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition 
                                                            Width="*"
                                                        />
                                                    </Grid.ColumnDefinitions>

                                                    <Grid.RowDefinitions>
                                                        <RowDefinition 
                                                            Height="*"
                                                        />
                                                    </Grid.RowDefinitions>
                                                    <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Teal" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
                                                    <Label Grid.Row="1" Grid.Column="0" Text="Nummer:" FontAttributes="Bold"/>
                                                    <Label Grid.Row="1" Grid.Column="1" Text="{Binding ID}" x:Name="TB_ID"/>
                                            </Grid>
                                        </SwipeView>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>

Page.XAML.cs:

public class Test
    {
        public Command Delete { get; private set; }
        public ObservableCollection<MyTable> MyItems { get; set; }

        public Test()
        {
            MyItems = new ObservableCollection<MyTable>()
            {
                //what should I place here????
            };

            Delete = new Command((obj) =>
            {

                string id = obj as string;

                //you can get id here  , and you can also get which item that you select  , do some thing you want 
                
                //and what should be place here???
                

            });
        }
    }

Answer 1

x:name is not working

It will be an expected result because the x:name is in the DateTemplate

Since you had used Data-Binding, you could use command of SwipeItem.

in xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             
             x:Name="Page"  // set the name of contentpage here
             
             x:Class="xxx.xxxPage">

<SwipeItem 
        Text="Delete"
        IconImageSource="demo.png"
        BackgroundColor="LightPink"
        Command="{Binding Source={x:Reference Page}, Path=BindingContext.DeleteCommand}" 
        CommandParameter="{Binding ID}"   />

in ViewModel

I used static data just for demo, MyItems here is the ItemSource of the CollectionView.

public class xxxViewModel { public ObservableCollection MyItems { get; set;}

    public ICommand DeleteCommand { get; private set; }


    public MyViewModel ()
    {

        MyItems = new ObservableCollection<xxx>() {//...};


        DeleteCommand = new Command((obj)=> {

            string id = obj as string;
            
            //you can get id here  , and you can also get which item that you select  , do some thing you want 
        
        });

    }

}