WinUI 3桌面应用：如何将ObservableObject设为绑定目标（XAML与代码）

核心背景 #

Community Toolkit的ObservableObject（配合[ObservableProperty]特性）实现了INotifyPropertyChanged接口，但它并非DependencyObject，自动生成的属性也不是依赖属性，因此无法直接通过BindingOperations.SetBinding将其作为绑定目标。下面分别通过XAML和代码两种方式，实现控件属性到ViewModel属性的反向同步（即把ViewModel作为绑定目标）。

一、XAML实现（反向绑定） #

利用OneWayToSource或TwoWay绑定模式，结合值转换器（如需类型转换），可直接建立控件到ViewModel的反向绑定，完成数值同步。

示例：将ColorPicker选中颜色同步到ViewModel的Shade属性 #

1. 先实现颜色与SolidColorBrush的转换器：

public class ColorToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return value is Color color ? new SolidColorBrush(color) : new SolidColorBrush(Colors.Black);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value is SolidColorBrush brush ? brush.Color : Colors.Black;
    }
}

2. 修改Home.xaml，添加绑定逻辑：

<!-- Home.xaml -->
<Page
    x:Class="PFSI.Views.Home"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vms="using:PFSI.ViewModels"
    xmlns:converters="using:PFSI.Converters"
    mc:Ignorable="d" >
    
    <Page.Resources>
        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
    </Page.Resources>
    
    <Page.DataContext>
        <vms:HomeViewModel x:Name="ViewModel" />
    </Page.DataContext>
    
    <Grid x:Name="ContentArea" Padding="20">
        <StackPanel>
            <TextBlock Text="This text should be shaded." Foreground="{Binding Shade}" Margin="0 0 0 10"/>
            <!-- 反向绑定：ColorPicker选中色同步到ViewModel.Shade -->
            <ColorPicker SelectedColor="{Binding Shade, Mode=OneWayToSource, Converter={StaticResource ColorToBrushConverter}}" />
        </StackPanel>
    </Grid>
</Page>

原理说明 #

• OneWayToSource模式会将控件属性值主动同步到绑定的ViewModel属性，此时ViewModel作为绑定目标；
• [ObservableProperty]自动生成的属性包含公共setter，且实现了INotifyPropertyChanged，绑定系统可识别并完成赋值。

二、代码实现（手动同步逻辑） #

如果需要通过代码逻辑控制同步过程，可选择直接监听控件属性变化，或借助临时依赖对象复用绑定系统的转换器、验证等能力。

方法1：直接监听控件属性变化事件 #

// Home.xaml.cs
public partial class HomePage : Page
{
    public HomePage()
    {
        InitializeComponent();
        
        var colorPicker = new ColorPicker();
        ContentArea.Children.Add(colorPicker);
        
        // 监听ColorPicker的SelectedColor属性变化，手动更新ViewModel
        colorPicker.RegisterPropertyChangedCallback(ColorPicker.SelectedColorProperty, (sender, args) =>
        {
            if (sender is ColorPicker picker && picker.SelectedColor.HasValue)
            {
                ViewModel.Shade = new SolidColorBrush(picker.SelectedColor.Value);
            }
        });
    }
}

方法2：借助中间DependencyObject复用绑定逻辑 #

创建临时依赖对象作为中间层，将控件绑定到该对象后，监听其属性变化来更新ViewModel：

// 定义中间依赖对象
public class BindingProxy : DependencyObject
{
    public static readonly DependencyProperty ProxyValueProperty =
        DependencyProperty.Register(nameof(ProxyValue), typeof(SolidColorBrush), typeof(BindingProxy), new PropertyMetadata(null, OnProxyValueChanged));

    public SolidColorBrush ProxyValue
    {
        get => (SolidColorBrush)GetValue(ProxyValueProperty);
        set => SetValue(ProxyValueProperty, value);
    }

    public Action<SolidColorBrush> OnValueChanged { get; set; }

    private static void OnProxyValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is BindingProxy proxy && e.NewValue is SolidColorBrush brush)
        {
            proxy.OnValueChanged?.Invoke(brush);
        }
    }
}

页面代码中使用该中间层：

// Home.xaml.cs
public partial class HomePage : Page
{
    public HomePage()
    {
        InitializeComponent();
        
        var colorPicker = new ColorPicker();
        ContentArea.Children.Add(colorPicker);
        
        // 创建绑定代理，指定属性变化时的回调
        var proxy = new BindingProxy();
        proxy.OnValueChanged = brush => ViewModel.Shade = brush;
        
        // 建立ColorPicker到代理对象的绑定
        var binding = new Binding
        {
            Source = colorPicker,
            Path = new PropertyPath(nameof(ColorPicker.SelectedColor)),
            Mode = BindingMode.OneWay,
            Converter = new ColorToBrushConverter()
        };
        BindingOperations.SetBinding(proxy, BindingProxy.ProxyValueProperty, binding);
    }
}

关键注意事项 #

1. 使用反向绑定时，ViewModel的ObservableProperty必须有公共setter（[ObservableProperty]会自动生成）；
2. 涉及类型转换时，必须实现IValueConverter并在绑定中指定；
3. 代码监听属性变化时，RegisterPropertyChangedCallback会关联控件生命周期，无需手动取消注册，避免内存泄漏。

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