Xamarin.Forms点击CollectionView项时传递storename至弹窗模态页

一、主页处理点击事件并传递参数 #

方式1：代码后台直接处理

在主页XAML中给CollectionView的项添加点击手势：

<CollectionView x:Name="StoreCollection" ItemsSource="{Binding WRSinfoList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame>
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="StoreItem_Tapped" />
                </Frame.GestureRecognizers>
                <Label Text="{Binding storename}" />
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

在主页后台代码中，获取选中项的storename并传递给模态页：

private async void StoreItem_Tapped(object sender, EventArgs e)
{
    var selectedStore = (sender as Frame)?.BindingContext as WRSinfo;
    if (selectedStore == null) return;

    var orderModal = new OrderPageModal(selectedStore.storename);
    await Navigation.PushModalAsync(orderModal);
}

方式2：MVVM模式（使用Command）

在主页ViewModel中定义命令：

public ICommand NavigateToOrderModalCommand { get; }

public HomePageViewModel(INavigation navigation)
{
    NavigateToOrderModalCommand = new Command<WRSinfo>(async (store) =>
    {
        if (store == null) return;
        var orderModal = new OrderPageModal(store.storename);
        await navigation.PushModalAsync(orderModal);
    });
}

主页XAML绑定命令和参数：

<CollectionView ItemsSource="{Binding WRSinfoList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame>
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer 
                        Command="{Binding Source={RelativeSource AncestorType={x:Type local:HomePageViewModel}}, Path=NavigateToOrderModalCommand}"
                        CommandParameter="{Binding .}" />
                </Frame.GestureRecognizers>
                <Label Text="{Binding storename}" />
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

二、模态页接收并显示店铺名称 #

方式1：直接赋值给控件

模态页XAML：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.OrderPageModal">
    <StackLayout Padding="20">
        <Label x:Name="StoreNameLabel" FontSize="20" FontAttributes="Bold" />
        <!-- 其他弹窗内容 -->
    </StackLayout>
</ContentPage>

模态页后台代码：

public OrderPageModal(string storeName)
{
    InitializeComponent();
    StoreNameLabel.Text = storeName;
}

方式2：MVVM绑定

定义模态页ViewModel：

public class OrderPageModalViewModel : INotifyPropertyChanged
{
    private string _storeName;
    public string StoreName
    {
        get => _storeName;
        set
        {
            _storeName = value;
            OnPropertyChanged();
        }
    }

    public OrderPageModalViewModel(string storeName)
    {
        StoreName = storeName;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

模态页后台绑定ViewModel：

public OrderPageModal(string storeName)
{
    InitializeComponent();
    BindingContext = new OrderPageModalViewModel(storeName);
}

模态页XAML绑定：

<Label Text="{Binding StoreName}" FontSize="20" FontAttributes="Bold" />

三、常见问题排查 #

• 确认CollectionView的ItemsSource是WRSinfo类型的集合，每个项的BindingContext正确指向单个WRSinfo对象。
• 若使用Navigation，确保主页被包裹在NavigationPage中；如果是Shell项目，改用Shell.Current.Navigation.PushModalAsync。
• 检查TapGestureRecognizer的CommandParameter是否正确传递了当前项（{Binding .}表示当前绑定对象）。

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