.NET MAUI自定义组件数据绑定失效问题求助

问题原因 #

你的自定义Card组件构造函数中设置了BindingContext = this;，这会覆盖组件外部传入的绑定上下文。当你在MainPage中给CardIncrement绑定MainPageViewModel的IncrementedValue时，组件内部的BindingContext被强制指向自身，导致外部绑定无法正确关联到父页面的ViewModel，因此数值更新无法同步。

解决方案 #

步骤1：移除组件内部的BindingContext设置 #

修改Card.xaml.cs，删掉构造函数中的BindingContext = this;：

namespace DataBindingExample;

public partial class Card : VerticalStackLayout
{
    public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(Card), string.Empty);
    public static readonly BindableProperty CardIncrementProperty = BindableProperty.Create(nameof(CardIncrement), typeof(int), typeof(Card), 0);

    public string CardTitle
    {
        get => (string)GetValue(CardTitleProperty);
        set => SetValue(CardTitleProperty, value);
    }

    public int CardIncrement
    {
        get => (int)GetValue(CardIncrementProperty);
        set => SetValue(CardIncrementProperty, value);
    }

    public Card()
    {
        InitializeComponent();
        // 移除该行代码：BindingContext = this;
    }
}

步骤2：修改组件内部绑定方式 #

通过RelativeSource或x:Reference直接绑定组件自身的可绑定属性，避免依赖BindingContext：

方式一：使用RelativeSource

修改Card.xaml中的Label绑定：

<?xml version="1.0" encoding="utf-8" ?>
<VerticalStackLayout
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:databindingexample="clr-namespace:DataBindingExample"
    x:DataType="databindingexample:Card"
    x:Class="DataBindingExample.Card"
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center"
    BackgroundColor="red"
>
    <Label
        Text="{Binding CardTitle, RelativeSource={RelativeSource Self}}"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        HorizontalOptions="Center"
    />
    <Label
        Text="{Binding CardIncrement, RelativeSource={RelativeSource Self}}"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        HorizontalOptions="Center"
    />
</VerticalStackLayout>

方式二：使用x:Reference

给根布局添加x:Name，通过引用绑定属性：

<?xml version="1.0" encoding="utf-8" ?>
<VerticalStackLayout
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:databindingexample="clr-namespace:DataBindingExample"
    x:DataType="databindingexample:Card"
    x:Class="DataBindingExample.Card"
    x:Name="RootCardLayout"
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center"
    BackgroundColor="red"
>
    <Label
        Text="{Binding CardTitle, Source={x:Reference RootCardLayout}}"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        HorizontalOptions="Center"
    />
    <Label
        Text="{Binding CardIncrement, Source={x:Reference RootCardLayout}}"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        HorizontalOptions="Center"
    />
</VerticalStackLayout>

原理说明 #

移除组件内部的BindingContext设置后，组件会继承父页面的BindingContext，确保外部对CardIncrement的绑定能正常关联到MainPageViewModel的IncrementedValue。同时，通过RelativeSource或x:Reference绑定组件自身的可绑定属性，保证组件内部的Label能正确显示属性值，实现双向的同步更新。

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