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>() { "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", };
}