WPF / XAML：用户控件的数据绑定

Question

所以我正在创建“卡片”以直观地表示 StackPanel 中的一组对象（我使用列表来保存这些对象）：

主窗口 XAML：

<Window /* ... */>
    <StackPanel x:Name="Deck" Orientation="Horizontal" />
</Window>

主窗口 C#：

public partial class MainWindow : Window
{
    /* ... */
    private void OnDataReceived(List<Reading> readings)
    {
        foreach(Reading r in readings)
        {
            Deck.Children.Add(new Card
            {
                Id = r.Id,
                Value = r.Value
            });
        }
    }
}

用户控件 XAML：

<UserControl /* ... */ x:Name="crd">
    <Label Content="{Binding Path=Id, ElementName=crd}" />
    <Label Content="{Binding Path=Value, ElementName=crd} />
</UserControl>

用户控件 C#：

public partial class LoggerRepresentation : UserControl
{
    public string Id { get; set; }
    public int Value { get; set; }
    /* ... */
}

在向Deck.Children 添加一个元素后，它的视觉表示确实会按预期出现在 StackPanel 中。但是，DP 似乎缺少一些东西，因为绑定 Id 和 Value 的标签仍然为空。

（将x:Name="crd" 提供给我的UserControl，然后在绑定中使用它作为ElementName 的想法已从the answer to a seemingly related question 插入，但在这种情况下可能会产生误导。）

Answer 1

当你想显示一个动态的项目集合时，你应该使用ItemsControl。

将 XAML 标记中的 StackPanel 替换为 ItemsControl：

<ItemsControl ItemsSource="{Binding Cards}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <local:LoggerRepresentation />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

直接绑定到UserControl中对应Card对象的源属性（并将Label元素替换为TextBlocks）：

<TextBlock Text="{Binding Path=Id}" />
<TextBlock Text="{Binding Path=Value} />

创建一个视图模型类，该类通过公共属性公开Card 对象的集合，并将您的应用程序逻辑移至该类：

public class ViewModel
{
    public ObservableCollection<Card> Cards { get; } = new ObservableCollection<Card>();

    //...
    private void OnDataReceived(List<Reading> readings)
    {
        foreach (Reading r in readings)
        {
            Cards.Add(new Card
            {
                Id = r.Id,
                Value = r.Value
            });
        }
    }
}

将定义ItemsControl的视图的DataContext设置为视图模型类的实例：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new ViewModel();
    }
}

这种设计模式被称为模型-视图-视图模型 (MVVM)，它是在开发基于 XAML 的 UI 应用程序时使用的推荐模式。如果您使用 Google，您会发现更多内容可供阅读和了解。