MAUI Databinding with CommandParameter for SwipeItem and TapGestureRecognizer return null

Question

I follow the tutorial .Net MAUI Full CRUD with SQLite to develop a feature in a MAUI app for CRUD with SQLite. I use Microsoft.Toolkit.Mvvm to fullfill MVVM requirements. But now when I click Delete button, nothing happens (fig 1). Also when I click Edit button (the edit icon), the values of selected line are not passed to the edit page (fig 2, supposing the seventh item is selected).

Here are the related code

Models:

public class PartTag
{
    [PrimaryKey, AutoIncrement]
    public int ID { get; set; }
    public string modelID { get; set; }
    public string location { get; set; }
}

XAML:

<StackLayout>
    <RefreshView x:DataType="vm:PartTagPageViewModel" Command="{Binding LoadPartTagsCommand}" IsRefreshing="{Binding IsBusy}">
        <CollectionView ItemsSource="{Binding partTagList}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:PartTag">
                    <StackLayout Padding="2">
                        <SwipeView>
                            <SwipeView.RightItems>
                                <SwipeItem Text="Delete" Command="{Binding Source={RelativeSource AncestorType={x:Type local:PartTagPage}},Path=BindingContext.PartTagTappedDeleteCommand}"
                                           CommandParameter="{Binding .}" BackgroundColor="red" />
                                <SwipeItem IsDestructive="True" Text="Close" BackgroundColor="#05f0a5" />
                            </SwipeView.RightItems>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="80" />
                                    <ColumnDefinition Width="140" />
                                    <ColumnDefinition Width="140" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="0" Text="{Binding ID}" FontAttributes="Bold" FontSize="Large" />
                                <Label Grid.Column="1" Text="{Binding modelID}" FontSize="Large" />
                                <Label Grid.Column="2" Text="{Binding location}" FontSize="Large" />
                                <Image Source="edit.png" Grid.Column="3" WidthRequest="30" HeightRequest="30" HorizontalOptions="End">
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Source={RelativeSource AncestorType={x:Type local:PartTagPage}},
                                            Path=BindingContext.PartTagTappedEditCommand}" CommandParameter="{Binding .}"></TapGestureRecognizer>
                                    </Image.GestureRecognizers>
                                </Image>
                            </Grid>
                        </SwipeView>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </RefreshView>
</StackLayout>

ViewModels:

public partial class PartTagPageViewModel : BasePartTagViewModel
{
    public ObservableCollection<PartTag> partTagList { get; }

    public PartTagPageViewModel(INavigation navigation)
    {
        partTagList = new ObservableCollection<PartTag>();
        Navigation = navigation;
    }

    [ICommand]
    private async void OnAddPartTag()
    {
        await Shell.Current.GoToAsync(nameof(AddPartTagPage));
    }

    public void OnAppearing()
    {
        IsBusy = true;
    }

    [ICommand]
    private async Task LoadPartTags()
    {
        IsBusy = true;
        try
        {
            partTagList.Clear();
            var partList = await App.PartTagService.GetAllAsync();
            foreach (var item in partList)
            {
                partTagList.Add(item);
            }
        }
        catch (Exception ex)
        {
            throw;
        }
        finally { IsBusy = false; }
    }

    [ICommand]
    private async void PartTagTappedDelete(PartTag partTag)
    {
        if (partTag==null)
        {
            return;
        }
        await App.PartTagService.DeleteAsync(partTag.ID);
        await LoadPartTags();
        OnAppearing();
    }


    
    [ICommand]
    private async void PartTagTappedEdit(PartTag partTag)
    {
        if (partTag == null)
        {
            return;
        }
        await Navigation.PushAsync(new AddPartTagPage(partTag));
    }
}

public partial class BasePartTagViewModel:BaseViewModel
{
    [ObservableProperty]
    public PartTag partTag;

    public INavigation Navigation { get; set; }
}

public partial class BaseViewModel:ObservableObject
{
    [ObservableProperty]
    public bool _isBusy;
    [ObservableProperty]
    public string _title;
}

In the XAML, I also tried to change the AncestorType value to vm:PartTagPageViewModel and correspondingly change the Path value to PartTagTappedDeleteCommand. But the problem still exists.

Could someone point out where I did wrong?

Answer 1

I made it work after changing the command binding value.

Command="{Binding BindingContext.PartTagTappedDeleteCommand,Source={x:Reference thisPage}

With this command binding value, the delete button works now. But still I have no idea why.