迁移至UserControl后数据绑定失效问题排查

问题背景 #

原本的XAML代码绑定可正常响应数据变更：

<TextBlock Text="{Binding MyProperty.Value}"/>

封装到UserControl后，外部绑定语句保持不变：

<controls:MyControl ControlValue="{Binding MyProperty.Value}"/>

但出现异常：用常量（如"25"）赋值时组件能正常显示，却无法响应模型数据的变更。

现有MyControl代码 #

MyControl.xaml #

<UserControl
    x:Class="Project.UI.Elements.Common.Controls.MyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Project.UI.Elements.Common.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="25"
    d:DesignWidth="100">

    <TextBlock Text="{Binding ControlProperty}"/>
</UserControl>

MyControl.xaml.cs #

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Project.UI.Elements.Common.Controls
{
    public sealed partial class MyControl : UserControl
    {
        public static readonly DependencyProperty ControlValueProperty =
            DependencyProperty.Register("ControlValue", typeof(double), typeof(MyControl), new PropertyMetadata(0.0));

        public MyControl()
        {
            this.InitializeComponent();
            DataContext = this;
        }

        public double ControlValue
        {
            get { return (double)GetValue(ControlValue); }
            set { SetValue(ControlValue, value); }
        }
    }
}

问题原因 #

1. 内部绑定属性名不匹配：XAML中TextBlock绑定的ControlProperty是不存在的属性，后台定义的依赖属性实际是ControlValue，导致UI无法正确关联到目标属性，自然无法响应数据变更。
2. DataContext硬编码的潜在冲突：构造函数中DataContext = this虽然暂时能让内部绑定找到自身属性，但这种写法会覆盖外部传入的DataContext，既不符合UserControl的设计规范，后续若需使用外部DataContext的其他属性也会出现问题。

修复方案 #

1. 修正内部绑定（核心修复） #

把TextBlock的绑定改为正确的属性名，同时推荐用RelativeSource或ElementName绑定，避免对DataContext的依赖：

方式一：使用RelativeSource

<TextBlock Text="{Binding ControlValue, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>

方式二：给UserControl命名后用ElementName

先给UserControl添加x:Name="Root"：

<UserControl
    x:Name="Root"
    x:Class="Project.UI.Elements.Common.Controls.MyControl"
    ...>

再修改TextBlock绑定：

<TextBlock Text="{Binding ControlValue, ElementName=Root}"/>

2. 移除DataContext硬编码 #

删除构造函数中的DataContext = this;，让UserControl可以正常继承外部的DataContext，同时内部绑定通过RelativeSource/ElementName指向自身属性，避免冲突。

3. 可选：添加属性变更回调（扩展用） #

如果需要在ControlValue变化时执行额外逻辑（比如日志、状态更新），可以在注册依赖属性时添加回调：

public static readonly DependencyProperty ControlValueProperty =
    DependencyProperty.Register(
        "ControlValue", 
        typeof(double), 
        typeof(MyControl), 
        new PropertyMetadata(0.0, OnControlValueChanged)
    );

private static void OnControlValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var control = (MyControl)d;
    // 这里添加属性变化后的自定义逻辑
}

内容的提问来源于stack exchange，提问作者T'n'E