【译】使 Visual Studio 更加可视化

任何 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/