提高Visual Studio 2013对高DPI的支持

[原文发表地址] Improving High-DPI support for Visual Studio 2013

[原文发表时间] 2014年3月19日

Visual Studio已经支持高DPI模式有一段时间了。Visual Studio 2010采用WPF作为它的主要UI框架，其中解决了许多已经存在的高DPI的问题。有些我们的组件采用的是Win 32架构，然而，并没有完全更新到包含high-DPI的意识。2013年初，微软发布了支持每英寸210像素的Surface Pro， 并且它的默认DPI比例为150%。那年晚些时候，4k分辨率显示器在拉斯维加斯CES首次亮相。我们致力于确保我们为这些设备做好准备。

新的，高分辨率的显示器提高了我们用户界面的显示品质。特别是文本，通过用更多的像素来呈现而变得更加清晰。举例来说

在Visual Studio 2013的计划中，我们考虑了怎样才能使Visual Studio支持很高的DPI。MSDN上有篇文章描述了一些我们将要遇到的这一类型的问题。我们收集了一些硬件，并且发现和修复了一些我们通过在多种分辨率和DPI缩放条件下运行Visual Studio所看到的关键的Bug。我们知道了我们需要建立一个途径来保证Visual Studio产品和它的扩展之间的一致性。

我们首先测试了高DPI模式下Visual Studio来开始整个进度。我们想到的第一件事就是我们需要用一个真正的高DPI硬件。我们试过使用一个典型的110DPI显示器（2560x1440分辨率下的27吋桌面显示器），放大150%没有达到正确的结果。首先，我们实际上忽视掉了一个严重的问题比如小图标或者窄的可点击区域这些看起来无关紧要的地方，因为硬件的尺寸使得交互以及视距问题显得并不明显。这导致团队使用实际的硬件让这个问题的影响变得更为明显。为了能让事情更好地发展下去，我们让一些人在这些实际的硬件上面使用Visual Studio作为他们日常工作的一部分。我的笔记本电脑完全成为办公室里一些同事羡慕的东西了。

我们在Visual Studio里发现的首要问题主要分为三种：

• 图片太小
• 文字没有缩放或者修剪
• 缩放布局被打破

放大图片所遇到的挑战

我们最大的一种问题围绕在图片上，就是图片太小了。Visual Studio拥有超过10000张图片（大部分是16x16像素的图标），它们需要被拉到合适的尺寸。许多这些图片需要被点击，所以当其他的UI放大以后让一个图标在16x16像素下显示是不能接受的 – 这些图片也需要放大。我们决定在运行时里缩放这些图标让他们和产品保持一致。

我们必须使用多个UI技术来取得平衡和产品的一致性。默认情况下，WPF使用了一种双立方缩放算法来缩放图片，它能在放大时有模糊效果。相比之下，许多基于Win32的图形组件用一种简单的最近邻居算法能自动缩放图片，这回看到块状化和像素化。因为Visual Studio使用的是Win32，WPF和HTML所基于的UI，我们作出改变，来使用和这些全部技术一致的算法。

最大一部分工作是让Visual Studio里面所有的图片都以同一种方式加载和显示。作为集中处理这些图片工作的一部分，我们写了一些代码来决定选择什么样的图片缩放算法，以便于我们作出一个关于所有图片外观的一致性决策。这让我们对整个产品的体验提出了严格的要求。比如，当一个图片在200%DPI下显示时，在看过了它是如何在真个产品上工作后，我们决定使用简单的最近邻居作为最优外观算法。另外，我们还选择双立方缩放算法，当在125和150的时候，它在保证尺寸和可读性方面做得最好。我们甚至还一些更激进的方案比如让图片在合适大小的占位符上居中同时它保持着清晰度，不过它会让图标在高清显示器上用正常视距即使在125%和150%缩放下都更难“读”。

最后，我们选择了如下的算法来显示我们Visual Studio的图片：

结果

作为所有我们团队工作的结果，Visual Studio 2013包含了许多改进的高DPI支持。文字现在已经一致和清晰，布局改进了许多，这个应用程序在处理高DPI的问题上只需一点点谅解。

100%缩放下的Visual Studio 2013：

150%缩放下的Visual Studio 2013：

200%缩放下的Visual Studio 2013：

还需要做什么？

我想我们戏剧性地提升了Visual Studio 2013在高清显示器上的体验品质， 但是我们还需要做得更多。比如，我们需要更新我们的可扩展性模块来使它在未来能接受基于这种显示配置的高分辨率图片。

如果你能帮助我们优化这项工作，我们将会很高兴。敬请留言和记录联络bug来帮助我们为你在这些令人兴奋的设备上让它运行起来。