这些指南介绍如何使用缩略图图像来帮助用户在 WinUI 应用中浏览时预览文件。
重要的 API
我的应用是否应包含缩略图?
如果你的应用允许用户浏览文件,则可以显示缩略图图像以帮助用户快速预览这些文件。
在以下情况下使用缩略图:
显示库集合中许多项目的预览(如文件和文件夹)。 例如,照片库应使用缩略图为用户提供浏览照片文件时每个图片的小视图。
在列表中显示单个项的预览(如特定文件)。 例如,在决定是否打开文件之前,用户可能需要查看有关文件的详细信息,包括更大的缩略图,以便获得更好的预览。
宜忌事项
检索缩略图时,请指定 缩略图模式 (PicturesView、VideosView、DocumentsView、MusicView、ListView 或 SingleItem)。 这可确保对缩略图图像进行优化,以显示用户要查看的文件类型。
- 使用 SingleItem 模式检索单个项的缩略图,而不考虑文件类型。 其他缩略图模式旨在显示多个文件的预览。
在缩略图加载时,用通用占位符图像代替缩略图显示。 使用占位符有助于你的应用看起来更具响应性,因为用户可以在缩略图加载之前与预览进行交互。
占位符图像应为:
- 与其所代表的项目类型相关。 例如,文件夹、图片和视频都应具有自己的专用占位符。
- 大小和纵横比与它所代表的缩略图图像相同。
- 在加载缩略图之前显示。
使用带有文本标签的占位符图像来表示文件夹和文件组,以区分各个文件。
如果无法检索缩略图,请显示占位图。
在提供文档和音乐文件的预览时显示其他文件信息。 然后,用户可以识别有关可能无法从缩略图图像中轻松获取的文件的关键信息。 例如,对于音乐文件,你可能会显示艺术家的名称以及专辑艺术的缩略图。
不要显示图片和视频文件的其他文件信息。 在大多数情况下,缩略图足以让用户浏览图片和视频。
其他使用指南
推荐的缩略图模式及其功能:
| 显示预览 | 缩略图模式 | 检索的缩略图图像的特点 |
|---|---|---|
| 图片 视频 |
图像查看器 VideosView |
大小:中等,最好至少为 190(如果图像大小为 190x130) 纵横比:一致,宽纵横比约 .7(如果大小为 190,则为 190x130) 裁剪为预览。 由于统一的长宽比,非常适合用于在网格中对齐图像。 |
| 文档 音乐 |
DocumentsView MusicView ListView |
大小:小,最好至少为 40 x 40 像素 纵横比:统一、平方纵横比 正方形比例使其适合预览专辑封面。 文档看起来与文件选取器窗口中的外观相同(它使用相同的图标)。 |
| 任何单个项(无论文件类型如何) | SingleItem |
大小:小,最好至少为 40 x 40 像素 纵横比:统一、平方纵横比 正方形比例使其适合预览专辑封面。 文档看起来与文件选取器窗口中的外观相同(它使用相同的图标)。 |
下面是显示检索的缩略图图像因文件类型和缩略图模式而异的示例:
| 项类型 | 当使用以下方法进行检索时:
|
当使用...检索时:
|
当使用...时检索:
|
|---|---|---|---|
| 图片 | 缩略图图像使用大约 0.7 的统一宽纵横比(如果首选大小为 190,则为 190 x 130)。 |
缩略图裁剪为正方形长宽比。 |
缩略图使用文件的原始纵横比。 |
| 视频 | 缩略图具有一个图标,用于将其与图片区分开来。 |
缩略图被裁剪为正方形比例。 |
缩略图使用文件的原始纵横比。 |
| 音乐 | 缩略图是适当大小的背景上的图标。 背景色由应用的磁贴背景色确定。 |
如果文件包含专辑图片,则缩略图是专辑艺术。 否则,缩略图是适当大小的背景上的图标。 |
如果文件有专辑封面,则缩略图是保留文件原始纵横比的专辑封面。 否则,缩略图是图标。 |
| 文档 | 缩略图是在合适大小的背景上的一个图标。 背景色由应用的磁贴背景色确定。 |
缩略图是在适当大小的背景上的一个图标。 背景色由应用的磁贴背景色确定。 |
文档缩略图(如果存在)。 否则,缩略图就作为一个图标。 |
| Folder | 如果文件夹中有图片文件,则使用图片缩略图。 否则,不会检索任何缩略图。 |
未检索任何缩略图。 | 缩略图是文件夹图标。 |
| 文件组 | 如果文件夹中有图片文件,则使用图片缩略图。 否则,不会检索任何缩略图。 |
如果组中的一个文件包含专辑封面,那么缩略图就是这个专辑封面。 否则,不会检索任何缩略图。 |
如果在文件组中有一个文件包含专辑封面,缩略图将显示为专辑封面,并且使用该文件的原始纵横比。 否则,缩略图是表示一组文件的图标。 |