UWP中如何将Page的多级路径绑定迁移至独立UserControl

1. 给UserControl添加设备实例依赖属性 #

在HWStatusDisplayControl.xaml.cs中新增一个对应设备类型的依赖属性，作为UserControl接收外部数据源的入口：

public sealed partial class HWStatusDisplayControl : UserControl
{
    // 替换为你实际的设备类类型（比如Device）
    public static readonly DependencyProperty DeviceProperty =
        DependencyProperty.Register(nameof(Device), typeof(Device), typeof(HWStatusDisplayControl), new PropertyMetadata(null));

    public Device Device
    {
        get => (Device)GetValue(DeviceProperty);
        set => SetValue(DeviceProperty, value);
    }

    // 保留原有的Header依赖属性
    public static readonly DependencyProperty HeaderProperty =
        DependencyProperty.Register(nameof(Header), typeof(string), typeof(HWStatusDisplayControl), new PropertyMetadata(string.Empty));

    public string Header
    {
        get => (string)GetValue(HeaderProperty);
        set => SetValue(HeaderProperty, value);
    }

    public HWStatusDisplayControl()
    {
        this.InitializeComponent();
    }
}

2. 修改UserControl内部绑定逻辑 #

将UserControl XAML中的TextBox绑定从Binding改为x:Bind，直接关联到新增的Device属性的子字段：

<UserControl
    x:Class="Inspecto.HWStatusDisplayControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Truphase360"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="250">

    <Grid>
        <Grid.Resources>
            <Style x:Key="styleTxtBox" TargetType="TextBox">
                <Setter Property="IsReadOnly" Value="True" />
                <Setter Property="Width" Value="75"/>
            </Style>
            <Style x:Key="styleTxtBlk" TargetType="TextBlock">
                <Setter Property="FontSize" Value="12" />
                <Setter Property="Margin" Value="10"/>
                <Setter Property="Width" Value="75" />
            </Style>
        </Grid.Resources>
        <StackPanel Orientation="Vertical"  Margin="20">
            <TextBlock Text="{x:Bind Header}" FontSize="16" FontWeight="Bold" Margin="10"/>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Temp1" Style="{StaticResource styleTxtBlk}" />
                <TextBox Style="{StaticResource styleTxtBox}" Text="{x:Bind Device.Temperature1, Mode=OneWay}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Temp2" Style="{StaticResource styleTxtBlk}" />
                <TextBox Style="{StaticResource styleTxtBox}" Text="{x:Bind Device.Temperature2, Mode=OneWay}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="SW Version" Style="{StaticResource styleTxtBlk}" />
                <TextBox Style="{StaticResource styleTxtBox}" Text="{x:Bind Device.SWVersionStr, Mode=OneWay}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="HW Version" Style="{StaticResource styleTxtBlk}" />
                <TextBox Style="{StaticResource styleTxtBox}" Text="{x:Bind Device.HWVersionStr, Mode=OneWay}" />
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

3. 在Page中绑定UserControl到目标设备 #

在原Page的XAML里，直接将UserControl的Device属性绑定到原多级路径的设备实例：

<!-- 替换为你的ViewModel命名空间 -->
<local:HWStatusDisplayControl 
    Header="设备1状态" 
    Device="{x:Bind ViewModel.DeviceData.Status.Devices[0], Mode=OneWay}" />

核心逻辑说明 #

• 依赖属性自动处理变更：当外部Devices数组被整体替换（JSON反序列化生成新实例赋值）时，只要ViewModel中的DeviceData、Status或Devices属性实现了INotifyPropertyChanged，x:Bind会自动检测到实例变更，同步更新UserControl的Device属性及内部TextBox显示。
• 编译时绑定更可靠：x:Bind是编译时绑定，能提前发现路径错误，性能也优于传统Binding。
• 设备类无需额外修改：只要JSON反序列化生成的实例包含对应属性即可，不需要实现INotifyPropertyChanged（因为是整体替换实例，而非修改单个属性）。

内容的提问来源于stack exchange，提问作者Krishna Katamneni