时间戳

首页 > 解决方案 > 如何从 WPF 中的 ItemsSource 在 WrapPanel 中创建 Border 元素的集合？

c# - 如何从 WPF 中的 ItemsSource 在 WrapPanel 中创建 Border 元素的集合？

问题描述

我想Border在外部重复元素WrapPanel：

<WrapPanel x:Name="filterWrapper" Orientation="Horizontal">
    <Border>
        <WrapPanel>
            <TextBlock Text="{Binding FilterName}"/>
            <TextBlock Text="x"/>
        </WrapPanel>
    </Border>
</WrapPanel>

这是依赖类：

public class FilterField
{
    public String FilterName { get; set; }
}

我有一个FilterField对象集合，这应该会导致：

<WrapPanel x:Name="filterWrapper" Orientation="Horizontal">
    <Border>
        <WrapPanel>
            <TextBlock Text="Test_1"/>
            <TextBlock Text="x"/>
        </WrapPanel>
    </Border>
    <Border>
        <WrapPanel>
            <TextBlock Text="Test_2"/>
            <TextBlock Text="x"/>
        </WrapPanel>
    </Border>
    <Border>
        <WrapPanel>
            <TextBlock Text="Test_3"/>
            <TextBlock Text="x"/>
        </WrapPanel>
    </Border>
</WrapPanel>

我怎样才能做到这一点？

标签： c#wpfxamltemplates

解决方案

您可以使用ItemsControl来显示具有特定模板的项目集合，具体Panel如下：

<ItemsControl ItemsSource="{Binding Items}">
    <!-- Place all items in a WrapPanel -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel x:Name="filterWrapper" Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- Define the look of each item -->
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type wpfapp1:FilterField}">
            <Border>
                <WrapPanel>
                    <TextBlock Text="{Binding FilterName}"/>
                    <TextBlock Text="x"/>
                </WrapPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

您在DataTemplate中定义的ItemsControl.ItemTemplate被应用于源集合中的所有项目，并且每个项目都被添加到ItemsControl.ItemsPanel您定义的 中，这里是一个WrapPanel.

这是假设您的视图模型中有Items一个类型的集合，如下所示：List<FilterField>

public partial class MainWindow : Window {

    public MainWindow() {
        InitializeComponent();
        DataContext = new MyViewModel();
    }
}

public class MyViewModel {
    public List<FilterField> Items { get; set; } = new List<FilterField> {
        new FilterField() { FilterName = "Test_1"},
        new FilterField() { FilterName = "Test_2"},
        new FilterField() { FilterName = "Test_3"},
    };
}

public class FilterField {
    public string FilterName { get; set; }
}

推荐阅读