XAML How to add on Click event on entire DataTemplate inside MAUI Collection View

hmmo2u0o  于 2023-04-18  发布在  其他
关注(0)|答案(1)|浏览(141)

如何为MAUI CollectionView中的每个项目添加完整的模板单击处理程序?
我已经看过有关TapGestureRecognizer的文档,但我不清楚如何在竞争元素中执行此操作,例如在我的案例中,在HorizontalStackLayout中

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="{x:Type dtos:ItemDto}">
            <HorizontalStackLayout>
                <Image WidthRequest="75" HeightRequest="75" Source="item_default.png"></Image>
                <StackLayout Orientation="Vertical">
                    <Label Text="{Binding Name}" FontSize="Title" />
                    <Label Text="{Binding Description}" FontSize="Subtitle"/>
                </StackLayout>
            </HorizontalStackLayout>                
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

我想要的是打开每个项目的详细视图,以防按下它。
旁注:我也在使用CommunityToolkit(MVVM和MAUI)
有什么想法吗?非常感谢!

0qx6xfy6

0qx6xfy61#

假设CollectionView的DataTemplate上有一个按钮,如果我们单击该按钮,当前项将从列表中删除。
可以参考以下代码:

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:MauiMvvmApp="clr-namespace:MauiMvvmApp226"
             x:Class="MauiMvvmApp226.MainPage">

    <ContentPage.BindingContext>
        <MauiMvvmApp:TestViewModel></MauiMvvmApp:TestViewModel>
    </ContentPage.BindingContext>

        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Start">

        <CollectionView  ItemsSource="{Binding Items}" x:Name="mCollectionView">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <HorizontalStackLayout  >
                        <StackLayout Orientation="Vertical">
                            <Label Text="{Binding Name}" FontSize="Title" />
                            <Label Text="{Binding Description}" FontSize="Subtitle"/>
                        </StackLayout>

                        <Button Text="Remove"   Command="{Binding BindingContext.DeleteItemCommand, Source={x:Reference mCollectionView}}"  CommandParameter="{Binding .}"  Margin="10,0,10,0" WidthRequest="80" HorizontalOptions="End"/>

                    </HorizontalStackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>

        </CollectionView>

        </VerticalStackLayout>

</ContentPage>

TestViewModel.cs

public partial class TestViewModel : ObservableObject 
{

    [ObservableProperty]
    private ObservableCollection<ItemModel> items;
   
    public TestViewModel()
    {
        PopulateObservableCollection();

    }

    public void PopulateObservableCollection()
    {
        Items = new ObservableCollection<ItemModel>();
        try
        {
            Items.Add(new ItemModel { Name = "test1",Description= "Description 1" });
            Items.Add(new ItemModel {  Name = "test2", Description = "Description 2" });
            Items.Add(new ItemModel {  Name = "test3", Description = "Description 3" });
        }
        catch (Exception)
        { }
    }

    [RelayCommand]
    private async Task DeleteItem(ItemModel obj)
    {
        try
        {
            if (Items != null && Items.Contains(obj))
            {
                Items.Remove(obj);
            }
        }
        catch (Exception ex)
        {
            await Shell.Current.DisplayAlert("Alert", ex.ToString(), "Cancel");
        }
        finally
        {
        }
    }
}

ItemModel.cs

public class ItemModel 
{
    public string Name { get; set; }
    public string Description { get; set; }
}

更新

如果您想在collectionview的项目上添加点击手势,可以参考以下代码:

<CollectionView  ItemsSource="{Binding Items}" x:Name="mCollectionView"> 
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <HorizontalStackLayout  >
                    <HorizontalStackLayout.GestureRecognizers>
                        <TapGestureRecognizer
                              Command="{Binding BindingContext.DeleteItemCommand, Source={x:Reference mCollectionView}}" CommandParameter="{Binding .}">
                        </TapGestureRecognizer>

                    </HorizontalStackLayout.GestureRecognizers>

                    <StackLayout Orientation="Vertical">
                        <Label Text="{Binding Name}" FontSize="Title" />
                        <Label Text="{Binding Description}" FontSize="Subtitle"/>
                    </StackLayout>
                    
                    <!-- <Button Text="Remove"   Command="{Binding BindingContext.DeleteItemCommand, Source={x:Reference mCollectionView}}"  CommandParameter="{Binding .}"  Margin="10,0,10,0" WidthRequest="80" HorizontalOptions="End"/>-->

                </HorizontalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

相关问题