在运行时动态创建多个 UI 元素 - C# WPF

Question

我对 C# 和 WPF 还很陌生，但我开始构建一个应用程序，它应该具有列出项目和一些细节的功能。目前它看起来像

这些 'items' 的数据（一个项目是用边框包围的多个标签（稍后我也想添加一张图片））是通过 REST 服务加载的，我不不知道会回复多少项目。现在我遇到了无法在 xaml 中静态创建标签的问题，因为收到的项目数量不同。

我的问题是，如何以编程方式创建多个标签（以及边框和图像），在 window 中正确对齐它们并解决标签以填充数据？

非常感谢您的帮助！

Answer 1

正如您在评论中指出的那样，ListBox 可能适合您的目的。一般的想法是，您想通过 ItemTemplate 指定 ListBox 的格式，并在 ItemTemplate 中指定带有必要控件的 DataTemplate 来支持您的 API 数据，绑定指定到从 JSON 映射的模型。 XAML 的不完整示例：

<ListBox x:Name="transactionsListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Black" BorderThickness=".5" Padding="1">
                <StackPanel>
                    <Label x:Name="id" Content="{Binding Path=Id}" />
                    <Label x:Name="item_id" Content="{Binding Path=Item_Id}" />
                    <Label x:Name="price" Content="{Binding Path=Price}" />
                    <Label x:Name="quantity" Content="{Binding Path=Quantity}" />
                    <Label x:Name="created" Content="{Binding Path=Created}" />
                    <Label x:Name="purchased" Content="{Binding Path=Purchased}" />
                </StackPanel>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

上述绑定的 Path= 属性需要匹配您创建的模型的属性名称，以存储来自 REST 调用的事务。然后，当您拥有该模型类型的列表实例时，您的代码会想要执行如下操作：

List<Transaction> myTransactions = apiCall.response.mapToMyModel() // pseduocode
transactionsListBox.DataContext = myTransactions;

Answer 2

为了补充 Bobby 的回答，这里有一个使用 ItemsControl 的例子。

<ItemsControl ItemsSource="{Binding SellTransactions}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Content="{Binding created}"></Label>
                <Label Grid.Column="1" Content="{Binding id}"></Label>
                <Label Grid.Column="2" Content="{Binding item_id}"></Label>
                <Label Grid.Column="3" Content="{Binding price}"></Label>
                <Label Grid.Column="4" Content="{Binding purchased}"></Label>
                <Label Grid.Column="5" Content="{Binding quantity}"></Label>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

交易的class：

public class SellTransaction
{
    public long id { get; set; }
    public int item_id { get; set; }
    public int price { get; set; }
    public int quantity { get; set; }
    public DateTime created { get; set; }
    public DateTime purchased { get; set; }
}

在运行时动态创建多个 UI 元素 - C# WPF

Creating multiple UI Elements dynamically during runtime - C# WPF

c#

wpf

user-interface

xaml

programmatically-created