WPF---数据模板(一)
阅读原文时间:2023年07月08日阅读:2

一、场景模拟

假设我们现在有如下需求:

我们需要在ListBox中的每个Item中显示某个成员的姓名、年龄以及喜欢的颜色,点击Item的时候,会在右边显示详细信息,同时也想让ListBox的样式变得好看一些,比如带有绿色边框等。

为了实现以上需求,我们可以使用控件模板来修改ListBox的默认样式,使之变得生动有趣,使用数据模板来改变ListBoxItem的数据呈现形式。

二、Demo

为了改变ListBoxItem的外观,我们在资源里定义一个名字为listBoxItemTemplate的数据模板,模板中使用Binding将数据进行关联,然后为ListBox的ItemTemplate属性进行赋值。

当我们点击左面ListBoxItem的时候,为了能在右面显示详细信息,我们定义四个Label,绑定左侧选中的ListBoxItem。

为了绑定方便,我们为四个Label加个父容器StackPanel,并将它的DataContext属性绑定到选中的ListBoxItem上(四个Label的DataContext就会继承StackPanel的DataContext属性)。

具体代码以及运行截图参见以下:

1 using System.Collections.ObjectModel;
2 using System.Windows;
3
4 namespace DataTemplateDemo1
5 {
6 ///

7 /// Interaction logic for MainWindow.xaml 8 ///
9
10 public partial class MainWindow : Window
11 {
12 private ObservableCollection observableCollection = new ObservableCollection();
13 public ObservableCollection ObservableCollection
14 {
15 get { return observableCollection; }
16 set { observableCollection = value; }
17 }
18 public MainWindow()
19 {
20 InitializeComponent();
21 this.DataContext = this;
22 observableCollection.Add(new Student() {Name = "Tom", Age= 16, FavorColor="Red",Hobby="Swim" });
23 observableCollection.Add(new Student() { Name = "Maty", Age = 18, FavorColor = "Green" ,Hobby="Football"});
24 observableCollection.Add(new Student() { Name = "Alice", Age = 19, FavorColor = "Yellow" ,Hobby="Running"});
25 }
26 }
27
28 public class Student
29 {
30 public int Age { get; set; }
31 public string Name { get; set; }
32 public string FavorColor { get; set; }
33 public string Hobby { get; set; }
34 }
35
36 }

1 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 45 46 47 48 49 50 51 52 53 54 55