原文:WPF界面设计技巧（5）—自定义列表项呈现内容

 

 

接续上次的程序，稍微改动一下原有样式，并添加一个数据模板，我们就可以达成下面这样的显示功能：

 

 

鼠标悬停于文件列表项上，会在工具提示中显示图像缩略图及文件名、文件大小信息。

 

选中一个列表项，该列表项会扩大，并动态显示出一个小缩略图及文件的所在路径。

 

代码如下：

 

 

下面逐步讲解一下代码。

 

 

首先需要引入一个命名空间，就是 FileInfo 类所在的 System.IO 命名空间，我们将它的别名定义为“c”。

 

 

DataTemplate 标记是为界面中出现的数据类型定义的显示模板，如果不指定 x:Key 的话，那么界面上不管何处出现此类型的对象，都会转为这样的显示方式。

 

WrapPanel 是一种简单的容器元素，它会把它里面的所有元素都横着排列，排不下了就换一行接着排，这类似网页的默认布局模式，很容易掌握。

 

WrapPanel.ToolTip 内定义的就是工具提示里的那个缩略图和文字了，其他代码都很简单就不多说了。

 

很多人觉得工具提示里可以放图片是一件很神奇的事，的确很让人惊喜，但是其实WPF元素的内容格式基本都是 Object 类型的，也就是说，你可以放一切你能想到的东西进去！按钮、视频、文档乃至3D模型，都可以哦。

 

 

我们来看触发器，这个触发器定义的 Height 是谁的属性呢？记得以前我们自定义样式时怎么显示元素的内容吗？对，ContentPresenter，这就是所有内容的总容器。

 

为什么要在 ContentPresenter 高度为 68 的时候触发动画呢？这其实我是使了个歪点子～我没找到数据内容相应上层元素属性变化的方法，所以就用 ContentPresenter 高度变化与这边产生联动，从而间接响应 ListBox 那边的 IsSelected 属性变化。

 

动画的内容就是把先前隐藏的图片和一行文字显示并放大出来，没什么难点的。

 

行了，代码部分讲解完了，我们来谈谈如何完善这个程序。

 

这程序模样不错，但是有几点很不爽：

 

1 显示文件的大小的单位是字节，这让人很晕。

 

2 选择了非图片文件不会显示任何提示，只是图片处空了。

 

3 FileInfo对象的内容在后台被更改不会及时反映到界面上。

 

对应的解决办法：

 

1 采用自定义类，获取必要的 FileInfo 对象的部分属性值，定义专门用于以其它单位显示文件大小的属性。

 

2 还是采用自定义类，获取 FileInfo 对象的扩展名属性，将之赋予自定义的一个依赖属性上，依赖属性可以被触发器 Trigger 识别，这样我们就可以依据扩展名来显示不同的布局结构，并控制元素的隐现，比如选中视频文件可以播放视频预览，而选中一个普通文件只会显示一种替代图标。

 

3 依然是自定义类，只有实现 INotifyPropertyChanged 接口的类型才可以提供更改通知，以维护双向实时绑定。

 

WPF是个大舞台，我们可以做的还有很多。

 

源代码下载