自定义控件绑定父ViewModel命令后点击无响应的解决方法

要实现页面ViewModel的命令与自定义控件按钮的绑定，核心是给自定义控件添加可绑定的命令属性，再通过页面布局完成绑定关联，具体步骤如下：

1. 给自定义控件ProductCard添加依赖属性 #

修改ProductCard.xaml.cs，增加命令、命令参数的依赖属性，并在按钮点击事件中触发命令：

public partial class ProductCard : Border
{
    // 增加命令依赖属性
    public static readonly BindableProperty IncreaseCommandProperty =
        BindableProperty.Create(nameof(IncreaseCommand), typeof(ICommand), typeof(ProductCard));

    public ICommand IncreaseCommand
    {
        get => (ICommand)GetValue(IncreaseCommandProperty);
        set => SetValue(IncreaseCommandProperty, value);
    }

    // 减少命令依赖属性
    public static readonly BindableProperty DecreaseCommandProperty =
        BindableProperty.Create(nameof(DecreaseCommand), typeof(ICommand), typeof(ProductCard));

    public ICommand DecreaseCommand
    {
        get => (ICommand)GetValue(DecreaseCommandProperty);
        set => SetValue(DecreaseCommandProperty, value);
    }

    // 当前产品ViewModel参数依赖属性
    public static readonly BindableProperty CurrentProductProperty =
        BindableProperty.Create(nameof(CurrentProduct), typeof(ProductViewModel), typeof(ProductCard));

    public ProductViewModel CurrentProduct
    {
        get => (ProductViewModel)GetValue(CurrentProductProperty);
        set => SetValue(CurrentProductProperty, value);
    }

    public ProductCard()
    {
        InitializeComponent();
    }

    private void OnIncreaseClicked(object sender, EventArgs e)
    {
        IncreaseCommand?.Execute(CurrentProduct);
    }

    private void OnDecreaseClicked(object sender, EventArgs e)
    {
        DecreaseCommand?.Execute(CurrentProduct);
    }
}

2. 完善ProductCard.xaml的按钮事件绑定 #

确保按钮的Clicked事件对应到上面的处理方法：

<Grid>
    <Button Grid.Column="1" Text="-" Clicked="OnDecreaseClicked" />
    <Button Grid.Column="2" Text="+" Clicked="OnIncreaseClicked" />
</Grid>

3. 修正ViewModel命令的访问权限 #

DecreaseQuantity命令是private的，绑定无法访问，需要改为public：

[RelayCommand]
public async Task IncreaseQuantity(ProductViewModel vm)
{
    // 命令逻辑
}

[RelayCommand]
public async Task DecreaseQuantity(ProductViewModel vm)
{
    // 命令逻辑
}

4. 在ExplorePage布局中完成绑定 #

通过RelativeSource获取页面级ViewModel，同时绑定命令和产品参数：

<CollectionView ItemsSource="{Binding Products}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <local:ProductCard 
                CurrentProduct="{Binding}"
                IncreaseCommand="{Binding Source={RelativeSource AncestorType={x:Type local:ExplorePageViewModel}}, Path=IncreaseQuantityCommand}"
                DecreaseCommand="{Binding Source={RelativeSource AncestorType={x:Type local:ExplorePageViewModel}}, Path=DecreaseQuantityCommand}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

关键说明 #

• 自定义控件必须通过依赖属性暴露命令，才能支持外部绑定
• 使用RelativeSource是因为ProductCard的数据上下文是单个ProductViewModel，需要向上查找页面的ExplorePageViewModel
• 按钮点击事件中要主动调用命令并传入参数，完成事件到命令的转发

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