Question

因此，我正在创建“卡片”以直观地表示StackPanel中的对象集合（我正在使用列表来保存这些对象）：

MainWindow XAML：

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

MainWindow 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
            });
        }
    }
}

UserControl XAML：

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

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，然后在the answer to a seemingly related question中插入ElementName并将其用于绑定中的想法，但是在这种情况下可能会产生误导。）

Answer 1

每当要显示动态项目集合时，都应使用ItemsControl。

用StackPanel替换XAML标记中的ItemsControl：

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

直接绑定到Card中相应UserControl对象的源属性（并将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
            });
        }
    }
}

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

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

此设计模式被称为Model-View-ViewModel（MVVM），它是在开发基于XAML的UI应用程序时使用的推荐模式。如果您使用的是Google，那么您会发现更多阅读和了解的信息。

WPF / XAML：UserControls的数据绑定

1 个答案: