4.1.2 执行基本的数据绑定

4.1.2  执行基本的数据绑定

如本章前面看到的，使用的数据源是一个简单的包含了产品详细数据的XML文件，并且产品的图片路径在XML中指定了。（这是为了方便编程，真正编程环境中图片的路径经常存储在数据库中，或者是将图片作为表中的一列保存在数据库中。稍后我们将讲到。）

Expression Blend和XAML都支持数据绑定，可以将数据源连接到XML文件，所用的数据面板如图4-9所示。

因为我们要使用的是一个XML数据源，所以单击“添加新的XML数据源”按钮。在“添加XML数据源”对话框中，选择包含产品目录信息的XML文件，并提供一个如CarSource之类的容易理解的名称，如图4-10所示。XML文件如代码4-1所示；也可以在本书附带的光盘中找到这个数据文件和相关的图片。

图4-9  数据面板

图4-10 “添加XML数据源”对话框

接下来要实现数据绑定，选中Grid（取名为ProductGrid的那个Grid），在面板中查看它的属性，在公共属性中可以看到DataContext属性，如果选中DataContext，将弹出一个菜单，点击“数据绑定”，如图4-11所示，打开“创建数据绑定”对话框。

图4-11  使用DataContext属性

这一步的目的是设置应用程序的数据上下文，也就是整个数据结构的根部分，它包含了我们需要显示的产品数据。在本例中，XML文件中有几个产品元素（在图4-12右边的字段浏览器中通过product(数组)表示），这就是我们想要的应用程序的数据上下文，它将成为产品浏览器的数据来源，单击“完成”按钮结束设置。

图4-12  设置应用程序数据上下文

接着，需要添加一些单独的控件并且用其表示上下文中的字段内容，通常，我们以列表方式来显示产品的名称。

在Master块（Master是先前我们在Grid左边放置的ContentControl的名称）中添加List控件。简单的方法是在对象和时间线面板中双击选中Master，然后在资源库面板中找到ListBox控件并双击将其添加到页面上。现在可以看到ListBox控件填充在Master块中，并且在时间线面板中，ListBox作为Master的子控件出现，如图4-13所示。

ListBox控件使用ItemsSource属性绑定数据，选中ProductList，在数据面板中找到ItemsSource，从弹出的菜单中选择“数据绑定”，出现“创建数据绑定”对话框。

这里，我们需要将控件绑定到应用程序数据上下文，点击“显示数据上下文”，回想主Grid已经绑定了产品目录数据源，ListBox控件应该绑定到其中的一个字段，展开在图4-14中看到的Product[n]节点查看字段。

这个对话框还没有完成，当对ListBox进行绑定时，需要建立绑定的数据模板，在对话框底部可以看到“定义数据模板”按钮，它用来建立数据模板。使用数据模板可以设定产品记录中的哪些字段需要绑定到ListBox控件上。

图4-14  将ListBox绑定到外部数据源

如果单击“定义数据模板”按钮，会看到如图4-15所示的对话框，所有在Product下的字段都被选中了，将除Name字段之外的其他字段选中清除，这将建立一个列表，内容为每个产品的名称。

图4-15  为ListBox定义数据模板

单击“确定”按钮，返回到设计视图，可以看到ListBox的上下文已经被填充了。在Expression Blend中，在设计时也和运行时一样发生数据绑定，这有助于帮助我们确定界面显示是否准确，如图4-16所示。

运行程序之前，需要从列表框中选择一项作为默认选中项，以便让Details块有所显示。怎么做呢？设置ListBox的SelectedIndex属性为0，以确保产品列表最顶端的项目被设定为默认选中项，还需要设置IsSynchronizedWithCurrentItem属性为True，确保列表与当前数据上下文同步。

然后，需要添加字段显示当前选中项目的相关信息，如照片、产品代码和价格，这些字段将被添加到Details块中。

Details（ContentControl控件）容器只能包含一个子控件，所以我们在其中需要放置一个Grid控件，这样就可以放置多个子控件了。选中Details块，当它被选中时边缘出现黄色的边界，如果选中有问题（比如选到别的控件上），在时间线面板中双击Details以便选中它，然后在资源库中双击Grid控件，这将在Details块中新增一个Grid，并且大小刚好填充整个Details块。

在新增加的Grid控件中我们需要添加两个TextBlock控件和一个Image控件。你可以随意选择控件大小和放置位置，放置好后，应用程序界面如图4-17所示。

通过TextBlock控件的Text属性对其进行数据绑定，在Text属性中单击“数据绑定”，出现“创建数据绑定”对话框。

因为我们之前已经做过了，直接点击“显示数据上下文”，选择相关联的字段。这里，将文本框控件绑定到数据中的Description和Price字段，不需要设置模板，简单地将控件的属性映射到数据上下文中的字段就可以了。图4-18显示了如何将Description字段绑定到Description文本框。

图4-17  建立Details块

对PictureBox的绑定非常灵活，本例中，图像的路径以字符串的方式存储在数据上下文中，如果将字符串绑定到图像的Source属性，WPF将导入图像并在PictureBox控件中展示，我们不需要编写任何代码来处理从文件系统导入图像。设置绑定对话框如图4-19所示，可以发现绑定图像和绑定文本框是一样的。

图4-19  为图像控件绑定上下文