WinUI 3中如何将单个数据模型绑定到控件？

我有一个Shape数据模型，希望通过数据绑定在UI中显示其多个属性。绑定集合的方式在ListView中已经可以正常工作，但不知道如何绑定单个模型实例。

绑定集合的可行代码 #

ListView的XAML代码：

<ListView x:Name="MyListView"
          ItemsSource="{x:Bind Shapes, Mode=OneWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="models:Shape">
            <StackPanel>
                <TextBlock Text="{x:Bind Name}"></TextBlock>
                <TextBlock Text="{x:Bind NumberOfSides}"></TextBlock>
                <TextBlock Text="{x:Bind Color}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

页面后台代码（包含ObservableCollection）：

public sealed partial class MyPage : Page
{
    // ...
    public ObservableCollection<Shape> Shapes { get; set; }
    // ...
}

Shape模型代码：

public class Shape
{
    public string Name { get; set; }
    public string NumberOfSides { get; set; }
    public string Color { get; set; }
}

尝试过的无效代码： #

<Grid>
    <StackPanel>
        <TextBlock Text="{x:Bind Name}"></TextBlock>
        <TextBlock Text="{x:Bind NumberOfSides}"></TextBlock>
        <TextBlock Text="{x:Bind Color}"></TextBlock>
    </StackPanel>
</Grid>

解决方案 #

要绑定单个模型，需要在页面中定义单个Shape属性，并在XAML中通过属性路径绑定到该实例的属性。

1. 修改页面后台代码，添加单个Shape属性

如果需要属性变更后自动更新UI，页面类或Shape类需要实现INotifyPropertyChanged接口。以下是基础实现：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public sealed partial class MyPage : Page, INotifyPropertyChanged
{
    private Shape _currentShape;
    public Shape CurrentShape
    {
        get => _currentShape;
        set
        {
            _currentShape = value;
            OnPropertyChanged();
        }
    }

    // 构造函数中初始化CurrentShape
    public MyPage()
    {
        this.InitializeComponent();
        CurrentShape = new Shape { Name = "正方形", NumberOfSides = "4", Color = "红色" };
    }

    // INotifyPropertyChanged实现
    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

如果希望Shape自身属性变化时UI也同步更新，Shape类也需要实现INotifyPropertyChanged：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class Shape : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            _name = value;
            OnPropertyChanged();
        }
    }

    private string _numberOfSides;
    public string NumberOfSides
    {
        get => _numberOfSides;
        set
        {
            _numberOfSides = value;
            OnPropertyChanged();
        }
    }

    private string _color;
    public string Color
    {
        get => _color;
        set
        {
            _color = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改XAML代码，绑定到单个Shape实例的属性

使用x:Bind绑定到页面的CurrentShape属性，通过属性路径访问模型的各个字段：

<Grid>
    <StackPanel>
        <TextBlock Text="{x:Bind CurrentShape.Name, Mode=OneWay}"></TextBlock>
        <TextBlock Text="{x:Bind CurrentShape.NumberOfSides, Mode=OneWay}"></TextBlock>
        <TextBlock Text="{x:Bind CurrentShape.Color, Mode=OneWay}"></TextBlock>
    </StackPanel>
</Grid>

关键说明 #

• x:Bind默认是OneTime模式，如果需要UI随属性变化自动更新，必须显式设置Mode=OneWay。
• INotifyPropertyChanged是实现数据变更通知的核心，只有实现该接口，数据更新才能同步到UI。

内容的提问来源于stack exchange，提问作者Michael Kintscher they-them