WPF界面设计技巧(5)—自定义列表项呈现内容

简介:

  

     

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

     

     

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

     

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

     

    代码如下:

     

    Code

     

    下面逐步讲解一下代码。

     

     

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

     

     

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

     

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

     

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

     

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

     

     

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

     

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

     

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

     

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

     

    这程序模样不错,但是有几点很不爽:

     

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

     

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

     

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

     

    对应的解决办法:

     

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

     

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

     

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

     

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

     

    源代码下载

    本文转自斯克迪亚博客园博客,原文链接:http://www.cnblogs.com/SkyD/archive/2008/07/17/1245103.html,如需转载请自行联系原作者

相关文章
|
3月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(5) -- 树列表TreeView的使用
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(5) -- 树列表TreeView的使用
|
3月前
|
开发者 C# UED
WPF与多媒体:解锁音频视频播放新姿势——从界面设计到代码实践,全方位教你如何在WPF应用中集成流畅的多媒体功能
【8月更文挑战第31天】本文以随笔形式介绍了如何在WPF应用中集成音频和视频播放功能。通过使用MediaElement控件,开发者能轻松创建多媒体应用程序。文章详细展示了从创建WPF项目到设计UI及实现媒体控制逻辑的过程,并提供了完整的示例代码。此外,还介绍了如何添加进度条等额外功能以增强用户体验。希望本文能为WPF开发者提供实用的技术指导与灵感。
147 0
|
3月前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
65 0
|
3月前
|
存储 设计模式 开发框架
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(7) -- 图标列表展示和选择处理
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(7) -- 图标列表展示和选择处理
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件
|
3月前
|
C#
WPF 自定义可拖动标题栏
WPF 自定义可拖动标题栏
51 0
|
3月前
|
开发框架 前端开发 C#
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
使用WPF开发自定义用户控件,以及实现相关自定义事件的处理
|
3月前
|
开发框架 前端开发 JavaScript
在WPF应用中使用GongSolutions.WPF.DragDrop实现列表集合控件的拖动处理
在WPF应用中使用GongSolutions.WPF.DragDrop实现列表集合控件的拖动处理
|
6月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
388 0