Question

我是C＃和WPF的新手，但是我开始构建一个应用程序，它应该具有列出具有一些细节的项目的功能。目前它看起来像

这些“项目”的数据（一个项目是边框中包含的多个标签（稍后我想添加图片））是通过REST服务加载的，我不知道如何很多项目都会得到回复。现在我遇到了无法在xaml中静态创建标签的问题，因为收到的项目数量不一。

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

非常感谢你的帮助！

Answer 1

正如您在评论中指出的那样，ListBox可能适合您的目的。一般的想法是，您希望通过ListBox指定ItemTemplate的格式，并在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>

交易的类：

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

2 个答案: