在Visual Studio 2013 Blend中设计像素完美布局
[原文发表地址] Designing pixel perfect layouts in Visual Studio 2013 and Blend
[原文发表时间] 2013-9-18 8：00AM
这是个常见的场景。你在开发应用程序的时候头脑中有一个设计。它可能来自于专业设计师或者餐巾纸背面的素描图案，但你需要将这个概念变成实现设计的工作，这说起来容易做起来可不容易。
当你的设计要求从顶部到文本的基线精确到100px，但是这个基线是在控件模板中的一个自定义控件，头疼的是找出需要调整以获得精确位置的值。另一种情况是，你想要的图像精确到300px宽，但你总共只有260px，你打算水平倾斜它以便达到它合适的宽度。你可能不想使用三角函数来计算出准确的倾斜角度。Blend知道你需要用一个更简单的方法去做，在Visual Studio 2013 Blend中，我们已经实现了一些新的工具来帮助你处理该设计并将它打造成为一个优雅，准备一鸣惊人的应用程序。让设计师发狂吧，现在你已经准备好了。
一个新的标尺/参考线系统能够帮助你得到你想要的像素完美精确性。高级对齐引擎获取的队列是你需要的方式，升级后的就地编辑引擎可以帮助你修复控件模板，不需要删除你正在使用的环境的样式。
测量栏
当你打开一个Windows Store的 XAML或者HTML应用程序，你首先会看见这些新的标尺。拖动一个控件到画板上，或者只是选择一些元素，你将会看到新的标尺带来了测量栏，显示一些有价值的信息。这很简单……你的元素有多宽/高？你的元素与文档之间的距离是多少？这还不是最有价值的，但是尝试这样……
创建你的网格应用程序，看看它的标题是否准确地在你猜想的地方。Windows 用户体验指南提到基线应该是从顶部100px和从左边120px开始，当你选择pageTitle，你会看到在测量栏上的值呈现的测量是FINAL。它考虑到父容器，并呈现转换给你一套测量，表示该控件将在运行时，这在控制或者数据模板内有效。所以，下次你有一个复杂的用户界面需要获取该控件从应用程序一端精确到120px，你就会看到为什么标尺和测量栏式强大的工具了。
参考线
当然，你现在可能会坐在这儿，问问自己是不是有更简单的方式来获取控件到特定的位置。在设计中，你的应用程序有一个商标，你希望这个商标靠近应用程序的顶部右边，但是与顶部边距40px及与右边边距100px。你可以将图像拖到通常的位置并将其周围微移直到得到你需要的值，但是向导系统让这些变得更简单。
将光标放在标尺顶部，单击鼠标并向下拖动。一旦你这么做，Blend将为你创建参考线来显示应用程序边缘的位置。如果你不想尝试拖动到特定的偏移量，只需要单击该值并改变它。
如果你与左边的参考线做相同的事，你要看看从设计图左边缘的距离。在这个例子中，那不是你所想的，因此抛开参考线，单击右边的值。会出现一个上下文菜单，允许你指定“右对齐”参考线。现在，Blend将显示右边缘的距离。单击值输入100，会得到一个参考线显示你想要的边缘的距离。
如果你真的想要看到一些酷的东西，转到设备面板，从横向切换到纵向。一旦你这么做，垂直参考线会重新调整成与新的右边缘距离为100px，参考线始终会确保它们的距离是正确的，不管你如何更改设备分辨率、捕捉状态或者方向。
另一个真正有用的部分是你可以无需考虑范围来对齐参考线。在参考线附近绘制一个按钮并且编辑按钮模板。在按钮内部，拖出一个矩形，你甚至可以将控件模板里的矩形与参考线对齐。这大大提高了试图排队的控件体验，无论你是否决定使用布局模式。
捕捉
Blend中的捕捉引擎也有几个改进。如果你想让你的Windows Store使用较旧版本的Blend元素，你可能看过一些控件似乎可以从3px关闭一切，你可能还试图获取TextBlock来与按钮中的文本基线对齐，并且发现它有点挑战性。
Windows Store应用程序的默认控件通常具有内置控件焦点矩形。比如，当键盘用户导航到一个按钮，它会在外围得到一个白色的矩形框来表示获得按钮焦点。这个焦点矩形是内置布局边界的按钮，这就是为什么按钮设计图的装饰看起来似乎是在边缘的几个像素，而不是直接在按钮上面。焦点在矩形布局界限内有助于防止你从丑陋布局中创建重叠的矩形，但它确实使那个棘手的按钮看起来完全正确。
在上图中，所有四个控件都有向左100的填充。参考线也位于100，以便将所有预期的控件都显示在里面。但是，红色的矩形显示如何将单选按钮和按钮都抵消3像素的单位。坦率地说，这些小小的差异都将使你的应用程序呈现未磨光的外观。
在Blend的捕捉引擎中现在能够忽视大多数控件的可视化元素，而不是捕捉到元素的可视范围。要看到这一点，从左边缘拖动参考线100px并且移动按钮到参考线上直到它能被捕捉到。现在你将看到该元素的可视化对象捕捉到参考线而不是布局的边界。当你对齐到参考线或者其他元素时捕捉才会工作。
捕捉引擎的另一个改进是文本基线。拖出水平参考线，一个按钮和一个文本块。现在，拖动按钮和文本块到水平参考线并尝试在参考线基线上获取其文本。你会看到Blend现在能够找到文本基线上的常见控件，并允许捕捉它们。所以，当Windows指南告诉你一个指定的文本元素基线假设是距离顶部140px，你可以创建的参考线实际上正好获取140px的基线。
标尺，参考线和捕捉功能从你的反馈意见中建立，我们一直在寻找如何帮助用户更加容易地做出更好的应用程序，如果你有更多的想法，我们很乐意听到。请让我们知道你内心是怎么想的。我们会看所有的反馈，不管是来自这篇文章的答复，用户语音请求，连接bug或者是Visual Studio中的Send-A-Smile系统。
Dante Gagne是微软的项目经理，11年来致力于XAML工具。他从测试人员做起，最终将他的激情用来帮助Blend和Visual Studio的改进。今天，他的工作重点是设计经验和生产力。