任何 Web、桌面或移动开发人员都经常使用图像。你可以从 C#、HTML、XAML、CSS、C++、VB、TypeScript 甚至代码注释中引用它们。有些图像是本地的,有些存在于线上或网络共享中,而其他图像可能仅以 base64 编码字符串的形式存在。我们在代码中以多种方式引用它们,但总是作为字符串值,不能显示图像的样子。直到现在。
当光标悬停时,预览图像的功能请求最近得到了很多关注,所以我们决定研究一下。不同的编辑器已经存在各种各样的图像预览器,但它们的工作方式都略有不同。如果我们要构建它,我们必须以一种对 Visual Studio 来说原生和自然的方式来做。因此,我们发起了一个社区实验来解决这个问题。
结果是代码编辑器中的编辑器 tooltip。该 tooltip 以原始大小显示图像,但宽度和高度上限为500像素。在预览图的下面,你会看到像素大小和字节大小。
实验参与者对这一功能非常兴奋。以下是他们中的一些人的留言:
我们确定了一些需要回答的重要问题:
- 必须支持哪些图像文件类型?
- 哪些图像引用语法和格式最常用?
- 哪些附加功能可能很重要?
这个实验帮助我们回答了这些问题。我们来复习一下。
支持的文件类型
实验参与者最常用的图像文件有(按顺序排列):
- PNG -- 53%
- JPG -- 21%
- SVG -- 15%
- ICO -- 4%
- WebP -- 4%
- GIF -- 2%
- 其他文件类型,如 BMP, TIFF, DDS
WPF 唯一不直接支持的格式是 SVG,因此我们必须将其转换为 WPF 可以呈现的位图格式。这就是为什么 SVG 支持没有进入第一个版本,但我们希望能尽快准备好。
引用语法
有多种方法可以引用图像,主要取决于语言和应用程序模型。我们从实验中看到的最常见的是:
- 相对 URL (./, ../, /)
- 文件路径 (c:\, c:/, \, /)
- 数据 URI (data:image/png;base64,...)
- 包 URI (pack://application:,,,/Images/MyImage.png)
- 图像昵称 (KnownMonikers.StatusWarning)
附加功能
除了简单地显示图像预览外,社区还提出了两个功能。
缩放是一个很酷的功能,在未来的更新中可以进一步研究。然而,目前还不在讨论范围之内。
另一个想法是,用户应该能够单击预览图像,使其在默认的图像查看器应用程序中打开。这个功能很简单,所以我们就增加了。
这就是图像悬停预览功能如何进入 Visual Studio 的故事。要自己尝试,请安装最新版本的 Visual Studio 2022 (v17.10或更新版本)并尝试一下。
原文链接:https://devblogs.microsoft.com/visualstudio/making-visual-studio-a-bit-more-visual/