如何在Xamarin.Forms中实现自定义ViewCell内按钮的ContentPage点击事件？

我来给你一步步拆解这个需求，核心思路是：先定义一个带自定义事件的ViewCell子类，然后通过平台特定的ViewCellRenderer，在原生层捕获按钮的点击动作，再触发Forms层自定义ViewCell的事件，最后在ContentPage里订阅这个事件就行。

步骤1：创建Forms层的自定义ViewCell #

首先我们要定义自己的CustomButtonCell，里面包含按钮的属性（比如按钮文本），以及一个用来传递点击事件的自定义事件：

using Xamarin.Forms;

namespace YourAppNamespace
{
    public class CustomButtonCell : ViewCell
    {
        // 定义按钮文本的可绑定属性，方便XAML里绑定数据
        public static readonly BindableProperty ButtonTextProperty = 
            BindableProperty.Create(nameof(ButtonText), typeof(string), typeof(CustomButtonCell), string.Empty);

        public string ButtonText
        {
            get => (string)GetValue(ButtonTextProperty);
            set => SetValue(ButtonTextProperty, value);
        }

        // 自定义点击事件，供ContentPage订阅
        public event EventHandler ButtonClicked;

        // 供Renderer调用的触发事件方法
        internal void RaiseButtonClicked()
        {
            ButtonClicked?.Invoke(this, EventArgs.Empty);
        }
    }
}

步骤2：实现Android平台的ViewCellRenderer #

接下来在Android项目里写Renderer，我们需要加载原生布局，找到按钮，绑定点击事件，然后触发Forms层的自定义事件：

先创建Android布局文件（Resources/layout/CustomButtonCellLayout.axml） #

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">
    <!-- 这里可以添加其他你需要的控件，比如显示内容的TextView -->
    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="Cell Content"/>
    <Button
        android:id="@+id/cell_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

然后写Renderer代码 #

using Android.Content;
using Android.Views;
using Android.Widget;
using YourAppNamespace;
using YourAppNamespace.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomButtonCell), typeof(CustomButtonCellRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class CustomButtonCellRenderer : ViewCellRenderer
    {
        protected override View GetCellCore(Cell item, View convertView, ViewGroup parent, Context context)
        {
            var customCell = (CustomButtonCell)item;
            // 复用或加载布局
            var cellView = convertView ?? LayoutInflater.From(context).Inflate(Resource.Layout.CustomButtonCellLayout, null);

            // 找到按钮控件
            var actionButton = cellView.FindViewById<Button>(Resource.Id.cell_action_button);
            actionButton.Text = customCell.ButtonText;

            // 注意：每次绑定前移除旧的点击事件，防止重复触发
            actionButton.Click -= OnButtonClicked;
            actionButton.Click += OnButtonClicked;

            return cellView;
        }

        private void OnButtonClicked(object sender, System.EventArgs e)
        {
            // 获取当前对应的Forms层CustomButtonCell，触发自定义事件
            var customCell = (CustomButtonCell)Cell;
            customCell.RaiseButtonClicked();
        }
    }
}

步骤3：实现iOS平台的ViewCellRenderer #

iOS这边的思路类似，不过我们需要自定义原生的UITableViewCell来承载控件：

using UIKit;
using YourAppNamespace;
using YourAppNamespace.iOS.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomButtonCell), typeof(CustomButtonCellRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class CustomButtonCellRenderer : ViewCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var customCell = (CustomButtonCell)item;
            // 复用或创建原生Cell
            var nativeCell = reusableCell as CustomButtonNativeCell ?? new CustomButtonNativeCell();

            // 设置按钮文本
            nativeCell.ActionButton.SetTitle(customCell.ButtonText, UIControlState.Normal);

            // 移除旧事件绑定
            nativeCell.ActionButton.TouchUpInside -= OnButtonTapped;
            nativeCell.ActionButton.TouchUpInside += OnButtonTapped;

            // 关联Forms层的CustomButtonCell
            nativeCell.AssociatedFormsCell = customCell;

            return nativeCell;
        }

        private void OnButtonTapped(object sender, System.EventArgs e)
        {
            var button = sender as UIButton;
            var nativeCell = button.Superview.Superview as CustomButtonNativeCell;
            nativeCell.AssociatedFormsCell?.RaiseButtonClicked();
        }
    }

    // 自定义原生UITableViewCell
    public class CustomButtonNativeCell : UITableViewCell
    {
        public UIButton ActionButton { get; private set; }
        public CustomButtonCell AssociatedFormsCell { get; set; }

        public CustomButtonNativeCell() : base(UITableViewCellStyle.Default, "CustomButtonCellIdentifier")
        {
            // 创建内容标签
            var contentLabel = new UILabel
            {
                Text = "Cell Content",
                TranslatesAutoresizingMaskIntoConstraints = false
            };

            // 创建按钮
            ActionButton = new UIButton(UIButtonType.System)
            {
                TranslatesAutoresizingMaskIntoConstraints = false
            };

            // 添加到ContentView
            ContentView.AddSubviews(contentLabel, ActionButton);

            // 设置AutoLayout约束
            NSLayoutConstraint.ActivateConstraints(new[]
            {
                contentLabel.LeadingAnchor.ConstraintEqualTo(ContentView.LeadingAnchor, 16),
                contentLabel.CenterYAnchor.ConstraintEqualTo(ContentView.CenterYAnchor),
                ActionButton.TrailingAnchor.ConstraintEqualTo(ContentView.TrailingAnchor, -16),
                ActionButton.CenterYAnchor.ConstraintEqualTo(ContentView.CenterYAnchor)
            });
        }
    }
}

步骤4：在ContentPage里使用并订阅事件 #

现在你可以在ContentPage的XAML里直接使用这个自定义Cell，并绑定点击事件：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">
    <ListView ItemsSource="{Binding YourDataList}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <local:CustomButtonCell ButtonText="Tap Me!" 
                                       ButtonClicked="CustomButtonCell_ButtonClicked"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

然后在后台代码里实现事件处理逻辑：

private void CustomButtonCell_ButtonClicked(object sender, EventArgs e)
{
    var clickedCell = (CustomButtonCell)sender;
    // 获取当前Cell绑定的数据模型
    var dataItem = clickedCell.BindingContext as YourDataModel;
    
    // 这里写你的点击逻辑，比如弹窗提示
    DisplayAlert("Button Clicked!", $"You tapped the button for {dataItem?.Name}", "OK");
}

额外提示：适配MVVM模式 #

如果你的项目用MVVM，也可以在CustomButtonCell里添加一个Command类型的可绑定属性，然后在Renderer里触发这个Command，这样就可以直接绑定到ViewModel的命令，不用在ContentPage里写事件处理：

// 在CustomButtonCell里添加
public static readonly BindableProperty ButtonCommandProperty = 
    BindableProperty.Create(nameof(ButtonCommand), typeof(ICommand), typeof(CustomButtonCell));

public ICommand ButtonCommand
{
    get => (ICommand)GetValue(ButtonCommandProperty);
    set => SetValue(ButtonCommandProperty, value);
}

// 然后在RaiseButtonClicked里触发Command
internal void RaiseButtonClicked()
{
    ButtonClicked?.Invoke(this, EventArgs.Empty);
    ButtonCommand?.Execute(null);
}

这样在XAML里就可以直接绑定：

<local:CustomButtonCell ButtonText="Tap Me!" 
                       ButtonCommand="{Binding CellButtonCommand}"/>

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