.NET MAUI自定义视图不使用BindingContext绑定失效问题排查

我在.NET MAUI 7中创建了如下自定义视图：

XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<Grid xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:HS="clr-namespace:MyApp.Controls;assembly=MyApp"
             x:DataType="viewmodel:MyViewVM"             
             xmlns:viewmodel="clr-namespace:MyApp.Controls"            
             x:Class="MyApp.Controls.MyView">

    <Grid RowDefinitions="*" x:Name="MyNiceGrid" ColumnDefinitions="*">        
        ... something               
    </Grid>
</Grid>

C#后台代码 #

public partial class MyView : Grid
{        
    MyViewVM myViewVM;
    
    public MyView()
    {
        InitializeComponent();

        this.myViewVM = new MyViewVM();                        
    }
}

视图模型代码 #

public partial class MyViewVM : ObservableObject
{
    [ObservableProperty]        
    bool started;       
}

由于该视图需被其他页面或自定义视图引用，我不想使用BindingContext绑定：

this.BindingContext = this.myViewVM;    // 我不想使用此方式

于是我在XAML中这样写绑定：

<Label Text="Something" IsVisible="{Binding Source={x:Object myViewVM}, Path=Started}"></Label>

但Started属性变化时，Label的可见性没有跟着改变（预期Started为false时Label不可见），请问问题出在哪？

错误原因 #

使用{x:Object myViewVM}并不是引用你在后台代码中实例化的myViewVM对象，而是新建了一个MyViewVM类的实例。这个新实例和你后台的myViewVM完全无关，所以当后台的Started属性变化时，绑定的是另一个对象的属性，自然不会触发UI更新。

解决方法 #

有两种可行的方式来正确绑定后台的myViewVM：

方法1：将myViewVM设为公共属性并使用RelativeSource绑定

1. 修改后台代码，把myViewVM改成公共属性：

public partial class MyView : Grid
{        
    public MyViewVM MyViewVM { get; set; }
    
    public MyView()
    {
        InitializeComponent();
        MyViewVM = new MyViewVM();                        
    }
}

2. 在XAML中使用RelativeSource绑定到自定义视图本身的MyViewVM属性：

<Label Text="Something" IsVisible="{Binding Source={RelativeSource AncestorType={x:Type local:MyView}}, Path=MyViewVM.Started}" />

（注意要在XAML顶部添加命名空间xmlns:local="clr-namespace:MyApp.Controls"）

方法2：将myViewVM定义为XAML资源

1. 在XAML的Grid标签内添加资源定义，直接实例化视图模型：

<Grid.Resources>
    <viewmodel:MyViewVM x:Key="myViewVM" />
</Grid.Resources>

2. 后台代码中引用这个资源实例：

public partial class MyView : Grid
{        
    MyViewVM myViewVM;
    
    public MyView()
    {
        InitializeComponent();
        myViewVM = (MyViewVM)Resources["myViewVM"];                        
    }
}

3. XAML中通过StaticResource绑定：

<Label Text="Something" IsVisible="{Binding Source={StaticResource myViewVM}, Path=Started}" />

额外注意点 #

• 确保你的MyViewVM继承了ObservableObject，并且使用[ObservableProperty]特性（你已经做了这部分，没问题），这样属性变化时才能触发PropertyChanged事件，更新UI。
• 如果使用方法1，属性名要注意大小写，C#属性是MyViewVM，绑定路径要对应正确。

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