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