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

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

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

listbox控件写法

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

<!--绑定模版数据集合 方法一--><!--创建数据模版--><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>

二、设置数据并且绑定

// 设置数据并且绑定
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属性。

一、设置模版

<!--绑定模版数据集合 方法一：-->
<!-- 设置模版 -->
<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>

二、设置数据并绑定

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