ListView 项目内按钮的绑定 (Xamarin)

Question

3天后我一直在尝试所有“可能有你答案的问题”，仍然没有快乐。

我有一个 XAML 页面，其中包含产品及其详细信息的 ListView，使用绑定到名为 RackProducts 的模型，如您所见：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PapillonWine.PapillonRackCatalogPage" 
             xmlns:local="clr-namespace:PapillonWine;assembly=PapillonWine" 
             xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
             xmlns:customContentView="clr-namespace:PapillonWine.NavBars"
             Title="{ artina:Translate PageTitleProductsCatalog }"
             BackgroundColor="{ DynamicResource MainWrapperBackgroundColor }"
             x:Name="CatalogItemPage">

    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="70" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <customContentView:CustomNavigationBar Grid.Row="0" x:Name="NavigationBarView" BackgroundColor="Transparent"/>

            <ListView
            x:Name="PapillonRackItems"    
            Grid.Row="1" 
            ItemsSource="{ Binding RackProducts }"
            HasUnevenRows="True"
            ItemSelected="OnItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <local:PapillonCatalogItemTemplate />
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

每个产品都使用 PapillonCatalogItemTemplate 显示，该模板包含四个按钮（查看产品图像轮播、添加到购物车、查看尺寸以及最后共享产品）。这个 PapillonCatalogItemTemplate 如下：

<?xml version="1.0" encoding="utf-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PapillonWine.PapillonCatalogItemTemplate" 
             xmlns:local="clr-namespace:PapillonWine;assembly=PapillonWine" 
             xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
             xmlns:customContentView="clr-namespace:PapillonWine.NavBars"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" 
             xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
             Padding="10" BackgroundColor="{ DynamicResource MainWrapperBackgroundColor }" 
             x:Name="CatalogItemTemplate">

    <!-- FAVORITE ICON -->


    <Grid>
        <!-- COLUMN DEFS -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!-- ROW DEFS -->
        <Grid.RowDefinitions>
            <RowDefinition Height="0.45*" />
            <RowDefinition><RowDefinition.Height><OnIdiom x:TypeArguments="GridLength" Phone="200" Tablet="400" /></RowDefinition.Height></RowDefinition>
        </Grid.RowDefinitions>

      <StackLayout Grid.Column="0" Grid.Row="0" Spacing="5" HorizontalOptions="FillAndExpand" WidthRequest="1000" >

      <!-- PRODUCT NAME -->
        <Label Text="{ Binding Name }" />                            

       <!-- DESCRIPTION -->
         <Label Text="{Binding Description}" />


        <!-- BUTTONS -->
      <StackLayout x:Name="buttonstack" Orientation="Horizontal" >

          <!-- SHOW IMAGES -->
          <artina:Button
            x:Name="ImageCarousel"
            Text="{ x:Static local:FontAwesomeWeb511Font.CameraRetro }"
            Style="{StaticResource FontIcon}"
            BindingContext="{Binding Source={x:Reference CatalogItemTemplate}, Path=BindingContext}" 
            Command="{Binding OnClickViewImageCarousel}" 
            CommandParameter="{Binding Source={x:Reference buttonstack}, Path=BindingContext}" >

          <!-- SHOW CART -->
          <artina:Button
            Text="{ x:Static local:FontAwesomeWeb511Font.cartplus }"
            Style="{StaticResource FontIcon}"
            Clicked="OnBuyItemSelected">
          </artina:Button>

          <!-- SHOW DIMENSIONS -->
          <artina:Button
            Text="{ x:Static local:FontAwesomeWeb511Font.RulerCombined }"
            Style="{StaticResource FontIcon}"
            Clicked="OnDimensionsSelected" >

          <!-- SHOW IMAGES -->
          <artina:Button
            Text="{ x:Static local:FontAwesomeFont.Share }"
            Style="{StaticResource FontIcon}"
            Clicked="OnShareSelected" >

        </StackLayout>                
        </StackLayout>     

                    <ffimageloading:CachedImage
                        Grid.Column="0" Grid.Row="1"
                        Source="{ Binding Image }" />       
        </Grid>
</ContentView>

如果我单击模板项目底部的 ffloading 图像，OnItemSelected 按钮会触发，并且我会得到一个漂亮的新视图页面，其中包含我选择的产品及其所有项目详细信息的图片......欺负！它触发的代码如下：

public async void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var selectedItem = ((ListView)sender).SelectedItem;

            var page = new PapillonRackItemViewPage(((RackProduct)selectedItem).Id);

            await Navigation.PushModalAsync(page);
        }

但是...如果我尝试触发项目模板中的一个按钮（例如“显示图像”正下方的按钮，则什么也不会发生。我已经在第一个按钮中留下了命令、命令参数和绑定参数，但我不确定它们是否正确。我尝试过 ICommand 路由、TapGestureRecognizer 路由，并尝试了大多数类似的帖子，我真的需要关于这个帖子的帮助。如何传递与 ListView 及其“RackProducts”绑定相同的绑定上下文，通过列表视图中的按钮项目？有机会得到急需的帮助吗？谢谢！

Answer 1

在您的 XAML 中

Clicked="OnClickViewImageCarousel" CommandParameter="{Binding .}"

然后在后面的代码中

protected void OnClickViewImageCarousel(object sender, EventArgs e) 
{
  var selectedItem = (RackProduct)((Button)sender).CommandParameter; 
}