如何在 MVVM (.NET MAUI) 中为自定义控件提供命令属性

Question

我正在尝试在 .NET MAUI 中构建自定义控件，它应该为其父级提供 ICommand 的 BindableProperty。这是我尝试实现的基本示例。

主页视图 (MainPage.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"
             xmlns:views="clr-namespace:SampleApp.Views"
             x:Class="SampleApp.MainPage">

    <views:MyCustomControl DoSomething="{Binding DoSomethingCommand}"></views:MyCustomControl>
</ContentPage>

MainPage 视图类 (MainPage.xaml.cs)

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();
    }
}

主页视图模型 (MainPage ViewModel.cs)

public class MainPageViewModel : ObservableObject
{
    public ICommand ProcessNewScoreCommand { get; }

    public MainPageViewModel()
    {
        ProcessNewScoreCommand = new Command(DoSomething);
    }

    private void DoSomething()
    {
        // Do something
    }
}

MyCustomControl 视图类 (MyCustomControl.xaml.cs)

public partial class MyCustomControl : ContentView
{
    public static readonly BindableProperty DoSomethingProperty =
        BindableProperty.Create(nameof(DoSomething), typeof(ICommand), typeof(MyCustomControl));

    public ICommand DoSomething
    {
        get => (ICommand)GetValue(DoSomethingProperty);
        set => SetValue(DoSomethingProperty, value);
    }

    public MyCustomControl()
    {
        InitializeComponent();
        BindingContext = new MyCustomControlViewModel(DoSomething);
    }
}

MyCustomControl 视图模型 (MyCustomControlViewModel.cs)

public class MyCustomControlViewModel : ObservableObject
{
    public ICommand DoSomething { get; }

    public MyCustomControlViewModel(ICommand doSomethingCommand)
    {
        DoSomething = doSomethingCommand;
    }

    private void PerformSomeLogic()
    {
        // Any calulations/logic
        // ...

        if (DoSomething.CanExecute(null))
        {
            // Execute command, so that parent component gets informed and can act.
            DoSomething.Execute(null);
        }
    }
}

调试时，类MyCustomControl.xaml.cs 的属性DoSomething 始终为空。而且，它的设置器似乎在任何时候都不会被调用。我究竟做错了什么？

Answer 1

它不起作用的原因是您正在为您的自定义控件创建一个 VM，即视图然后为其分配上下文，然后在您的自定义控件中您再次更改其 BindingContext，自定义控件不应该有自己的预定义 BindingContext .

解决此问题的步骤：

• 删除你的MyCustomControlViewModel 类。

• 现在你的 CustomControl.xaml.cs 看起来像这样：

  public partial class MyCustomControl : ContentView
  {
  
    public static readonly BindableProperty DoSomethingProperty =
                  BindableProperty.Create(nameof(DoSomething), typeof(ICommand), typeof(MyCustomControl));
  
    public ICommand DoSomething
    {
        get => (ICommand)GetValue(DoSomethingProperty);
        set => SetValue(DoSomethingProperty, value);
    }
  
    public MyCustomControl()
    {
        InitializeComponent();
    }
  }
  

• 现在你的 Views VM 应该是处理逻辑的那个，这样你就不会有多个 BindingContext 混淆和编译器（通过在错误的地方搜索它）：

  公共类 MainPageViewModel ：ObservableObject {

    public ICommand DoSomething { get; }
  
   public MainPageViewModel()
   {
      DoSomething = new Command(DoSomething);
   }
  

祝你好运，如果您还有其他问题，请告诉我。

使用 XF 和 MAUI 的 MVVM 基本指南：https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm