WPF—数据模版绑定数据集合(listbox和panel)

WPF---数据模版绑定数据集合(listbox和panel)

WPF中，可以使用ListBox或者Panel（比如StackPanel或Canvas）来展示数据集合，并使用数据模板DataTemplate来定义数据的呈现方式。以下是一些简单的例子，展示如何将数据集合绑定到ListBox并使用数据模板自定义项的外观。

listbox控件写法

一、创建数据模版并设置list的子项模版

cs 复制代码

<!--绑定模版数据集合 方法一-->
       <!--创建数据模版-->
       <Grid>
           <Grid.Resources>
               <DataTemplate x:Key="ItemTemplate2">
                   <TextBlock Text="{Binding}"
                              Background="Pink"
                              Margin="10" />
               </DataTemplate>
           </Grid.Resources>

     <!--创建listbox标签设置子项模版为panel-->
           <!--
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"
             这里可以把滚动条禁掉，让外界看不到listbox的影子，而且还可以作一个ListBoxItem的template，
             这样一来连ListBoxItem特有的选中啊之类的特性也去掉   
               -->
           <ListBox Height="200"
                    ItemsSource="{Binding strings}"
                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                    ScrollViewer.VerticalScrollBarVisibility="Disabled"
                    ItemTemplate="{StaticResource ItemTemplate2}"
                    Background="#5D6B99">
               <ListBox.ItemsPanel>
                   <ItemsPanelTemplate>
                       <WrapPanel></WrapPanel>
                   </ItemsPanelTemplate>
               </ListBox.ItemsPanel>
           </ListBox>
       </Grid>

二、设置数据并且绑定

cs 复制代码

// 设置数据并且绑定
public partial class _999_数据模版绑定数据集合 : Window
{
    public _999_数据模版绑定数据集合()
    {
        InitializeComponent();
        this.DataContext = this;
    }
    public ObservableCollection<string> strings { get; set; } = new ObservableCollection<string>() { "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", };
}

panel控件绑定集合

在WPF中，WrapPanel是一个面板，它可以在布局中的子元素超出可用空间时自动换行。要将WrapPanel绑定到数据集合，你可以将WrapPanel作为ItemsControl的ItemsPanel，并将数据集合绑定到ItemsControl的ItemsSource属性。

一、设置模版

cs 复制代码

<!--绑定模版数据集合 方法一：-->
<!-- 设置模版 -->
<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <TextBlock Text="{Binding}"
                       Background="Pink"
                       Margin="10" />
        </DataTemplate>
    </Grid.Resources>

<!--第二步设置itemsControl标签将wrappanel设为itemsControl的ItemsPanel标签-->
    <ItemsControl Height="100"
                  Background="Gray"
                  VerticalAlignment="Top"
                  ItemsSource="{Binding strings}"
                  ItemTemplate="{StaticResource ItemTemplate}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True"></WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

二、设置数据并绑定

cs 复制代码

public partial class _999_数据模版绑定数据集合 : Window
{
    public _999_数据模版绑定数据集合()
    {
        InitializeComponent();
        this.DataContext = this;
    }
    public ObservableCollection<string> strings { get; set; } = new ObservableCollection<string>() { "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", };
}