.NET Maui如何绑定点击事件？实现CollectionView子项触发不同方法

问题描述 #

我是C#和.NET Maui的初学者，想用CollectionView制作菜单，但发现点击CollectionView中的BoxView、ImageButton等子项时无法执行不同的方法。我尝试将Button的Clicked事件绑定到数据模型的Metodo字段：

<Button Text="test" Clicked="{Binding Metodo}"/>

但Clicked事件并不支持数据绑定。需求是点击不同子项时，根据绑定的字符串执行对应的方法，以下是完整的XAML和C#代码示例：

原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"
             x:Class="ES_Restic_Dominator.MainPage"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:m="clr-namespace:UraniumUI.Icons.MaterialIcons;assembly=UraniumUI.Icons.MaterialIcons"                 
             BackgroundImageSource="sfondo1.jpg" Title="Es Restic Dominator" >

    <CollectionView x:Name="collectionView"  VerticalOptions="Center" >
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <BoxView Color="White" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2" CornerRadius="20" Opacity="0.7"/>
                    <Label Text="{Binding Metodo}"/>
                    <ImageButton Source="{Binding Immagine}" Aspect="AspectFill" HeightRequest="100" WidthRequest="100" Margin="50,0,0,0"/>
                    <Button Text="test" Clicked="{Binding Metodo}">
                    </Button>

                    <StackLayout Grid.Row="0" Grid.Column="1" Spacing="5" >
                        <Label Text="{Binding Nome}" FontSize="Title" TextColor="{StaticResource Gray950}" Padding="50,20,20,0"/>
                        <Label Text="{Binding Descrizione}" FontSize="Body" TextColor="{StaticResource Gray600}" Padding="50,0,0,0" />
                    </StackLayout>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

原C#代码 #

using ES_Restic_Dominator.Views;

namespace ES_Restic_Dominator
{
    public class Item
    {
        public string Nome { get; set; }
        public string Descrizione { get; set; }
        public string Immagine { get; set; }
        public string Metodo { get; set; }
    }

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            // 示例数据
            var items = new List<Item>
            {
                new Item { Nome = "Doc. Restic", Descrizione = "Documentazione Restic", Immagine = "appunti.png", Metodo = "Doc" },
                new Item { Nome = "Snapshots", Descrizione = "Elenca tutti gli snapshots", Immagine = "cloud.png", Metodo = "Snapshots" },
                new Item { Nome = "Download", Descrizione = "Scarica tutti i Repository", Immagine = "discore.png", Metodo = "Download" },
                new Item { Nome = "Check", Descrizione = "Check di tutti i Repository", Immagine = "cuore.png", Metodo = "Check" },
                // 按需添加更多元素
            };

            collectionView.ItemsSource = items;
        }

        private async void Doc(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new Doc());
            await DisplayAlert("Doc", "Doc", "OK");
        }
        private async void Snapshots(object sender, EventArgs e)
        {
            await DisplayAlert("Snapshots", "Snapshots", "OK");
        }

        private async void Download(object sender, EventArgs e)
        {
            await DisplayAlert("Download", "Download", "OK");
        }

        private async void Check(object sender, EventArgs e)
        {
            await DisplayAlert("Check", "Check", "OK");
        }
    }
}

解决方案 #

方法1：使用Command绑定（推荐，符合MVVM规范） #

这种方式无需依赖字符串方法名，更安全且易于维护。

1. 修改Item模型，添加ICommand类型的属性：

public class Item
{
    public string Nome { get; set; }
    public string Descrizione { get; set; }
    public string Immagine { get; set; }
    public ICommand ActionCommand { get; set; }
}

2. 在MainPage构造函数中，为每个Item的ActionCommand赋值对应的方法：

var items = new List<Item>
{
    new Item { 
        Nome = "Doc. Restic", 
        Descrizione = "Documentazione Restic", 
        Immagine = "appunti.png", 
        ActionCommand = new Command(Doc) 
    },
    new Item { 
        Nome = "Snapshots", 
        Descrizione = "Elenca tutti gli snapshots", 
        Immagine = "cloud.png", 
        ActionCommand = new Command(Snapshots) 
    },
    new Item { 
        Nome = "Download", 
        Descrizione = "Scarica tutti i Repository", 
        Immagine = "discore.png", 
        ActionCommand = new Command(Download) 
    },
    new Item { 
        Nome = "Check", 
        Descrizione = "Check di tutti i Repository", 
        Immagine = "cuore.png", 
        ActionCommand = new Command(Check) 
    },
};

3. 修改XAML中的可点击控件，绑定Command属性：

<ImageButton Source="{Binding Immagine}" Aspect="AspectFill" HeightRequest="100" WidthRequest="100" Margin="50,0,0,0" Command="{Binding ActionCommand}"/>
<Button Text="test" Command="{Binding ActionCommand}"/>
<!-- 让BoxView可点击，添加TapGestureRecognizer -->
<BoxView Color="White" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2" CornerRadius="20" Opacity="0.7">
    <BoxView.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding ActionCommand}"/>
    </BoxView.GestureRecognizers>
</BoxView>

方法2：统一事件+参数判断（适合快速改造现有代码） #

如果不想修改模型结构，可以给所有可点击控件绑定同一个事件，通过绑定的Item的Metodo字段判断执行对应方法。

1. 修改XAML控件，绑定统一的事件处理方法：

<ImageButton Source="{Binding Immagine}" Aspect="AspectFill" HeightRequest="100" WidthRequest="100" Margin="50,0,0,0" Clicked="OnItemClicked"/>
<Button Text="test" Clicked="OnItemClicked"/>
<!-- BoxView添加点击手势 -->
<BoxView Color="White" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2" CornerRadius="20" Opacity="0.7">
    <BoxView.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnItemClicked"/>
    </BoxView.GestureRecognizers>
</BoxView>

2. 在MainPage中添加统一的事件处理方法：

private async void OnItemClicked(object sender, EventArgs e)
{
    // 获取当前绑定的Item对象
    var item = (sender as View)?.BindingContext as Item;
    if (item == null) return;

    switch (item.Metodo)
    {
        case "Doc":
            await Navigation.PushAsync(new Doc());
            await DisplayAlert("Doc", "Doc", "OK");
            break;
        case "Snapshots":
            await DisplayAlert("Snapshots", "Snapshots", "OK");
            break;
        case "Download":
            await DisplayAlert("Download", "Download", "OK");
            break;
        case "Check":
            await DisplayAlert("Check", "Check", "OK");
            break;
    }
}

内容的提问来源于stack exchange，提问作者Enrico Sartori