Blend for Visual Studio 2013

软件开发中为了使设计师和程序员“并行”工作并直接参与到程序的开发中来。

1、在网络程序开发团队中，草图设计后，设计师们可以使用HTML、CSS、JavaScript直接生成UI，程序员则在这个UI产生的同时实现它背后的功能逻辑。

2、而桌面开发WPF中，微软创造了一种新的开发语言XAML——可扩展应用程序标记语言。它在桌面开发及富媒体网络程序开发中扮演了HTML+CSS+javascript的角色，成为设计师和程序员之间沟通的枢纽。

现在，设计师和程序员们一起工作、共同维护软件的版本，只是他们使用的工具不同-——设计师们使用Blend（微软Expression设计工具套件中的一个）来设计UI，程序员则使用Visual Studio开发后台逻辑代码。

Blend使用起来很像Photoshop等设计工具，因此可以最大限度地发挥出设计师的特长。使用它，设计师不但可以制作出绚丽多彩的静态UI，还可以让UI包含动画。虽然程序员们也能做出这些东西，但从专业性、时间开销以及技术要求上显然是划不来的。更重要的是，这些绚丽的UI和动画都会以XAML的形式直接保存进项目，无需转化就可以直接编译，节省了大量的时间和成本。

3、Blend for Visual Studio 2013

Blend for Visual Studio一直以来都是WPF开发者的主要工具。长久以来，该软件一直作为从Visual Studio分离出来的独立产品来销售，属于Expression套件。从Visual Studio 2012开始，Blend for Visual Studio被发布为Visual Studio的附赠应用程序。令人遗憾的是，Blend for Visual Studio的第一次迭代就抛弃了XAML开发者，完全将重点放在使用HTML/JavaScript开发Windows 8应用程序的人们身上。

这个情况已成定局，而Blend for Visual Studio 2013现在重新为XAML开发者提供帮助。

后面的章节将详细介绍Blend for Visual Studio 2013的许多功能，下面是该工具的一些主要优点。

以紧凑的布局彻底控制UI。Blend for Visual Studio 2013的能力远超Visual Studio的XAML功能。虽然我不是UI设计师，但Blend for Visual Studio 2013能够使我的UI更加漂亮，而且速度比Visual Studio更快（不论是在设计方面还是在Visual Studio的XAML模式方面）。

可以轻松地向应用程序/页面添加动画、渐变效果和样式。

能够向页面（为更新布局）和状态记录快速添加状态。

能够通过许多布局和形状因素查看页面（该功能很像模拟器，但无法运行页面——WinJS/ HTML开发者仍旧能够因此受益）。

此外，Visual Studio和Blend for Visual Studio 2013还会使文件保持同步。如果你使用这两个工具同时打开了一个项目，当你在一个程序中更改（并保存了）应用/页面后，另一个程序会提示你重新加载该项目。你应确保保存了更改，因为在这两个程序中同时作出更改并且没有保存会导致并发问题。

在Blend for Visual Studio中打开项目

Visual Studio和Blend for Visual Studio可以非常好地协同工作。要在Blend for Visual Studio中打开项目，可右键WPF项目中的.sh文件，打开方式，并选择“Blend for Visual Studio 2013”选项，打开。

屏幕会显示如下画面

屏幕中会显示很多窗口，但至少都处于默认布局中（这非常像Visual Studio，你可以根据需要调整布局）。下面详细介绍这些布局元素。

“项目”、“资产”、“状态”和“设备”选项卡

该窗口的左上角有“项目”、“资产”、“状态”和“设备”选项卡，下面是这些选项卡的作用。

“项目”选项卡显示解决方案中的所有文件（非常像Visual Studio中的解决方案资源管理器）。其中没有特别重要的功能。

“资产”选项卡列出了可添加到页面中的所有资产。可以将之视为增强的Visual Studio工具箱。使用该选项卡除了可以向页面添加控件和面板外，还可以添加（和更改）样式、操作和媒体。

使用“状态”选项卡可以向页面添加视觉状态管理器XAML代码和视觉状态组。使用该选项卡还可以轻松为视觉状态添加过渡效果。

使用“设备”选项卡可以更改解决方案、方向和连接边界（后面几章将详细介绍这些内容）。使用该选项卡还可以更改主题（在明暗之间）和最小宽度。

对象和时间线

“对象和时间线”面板（左下角）含有文档大纲，使用该面板可以添加和修改故事板（与视觉状态管理器一同使用）。

页面设计器、标记和代码

工作区的中心区域是设计器和代码编辑器。与Visual Studio类似，可以使用拆分视图查看所有设计或标记。还可以将代码文件加载到中央窗格中。当你获得类似Intellisense的功能时，无法使用Visual Studio所有的强大功能，如导航和重构。此外，也不能使用已经安装到Visual Studio中的插件，如Telerik JustCode。

“属性”、“资源”和“数据”选项卡

工作区的右侧是“属性”、“资源”和“数据”选项卡，下面是它们的作用。

我曾经花了很多时间研究“属性”选项卡。除了“名称”“布局”等简单项目以及Width和Height等属性外，还含有大量在标记中难以手动设置的属性。使用“属性”面板可以设置“画笔”、“转换”和“交互”等选项。

“资源”选项卡含有所有应用程序和页面级资源，其中还有用于编辑和添加资源的选项。

使用“数据”选项卡可以设置页面的数据环境、创建样本数据和各种数据资源。使用该选项卡可以帮助你在设计时观察添加数据后的页面外观，而无需每次都不得不通过运行应用程序进行观察。

Blend for Visual Studio是一种功能极为强大的工具，若是详细介绍它的功能，就会占用整整一本书的篇幅。我在开发应用程序时会同时打开Visual Studio和Blend for Visual Studio，并且会根据需要完成的工作在这两个工具之间切换。去探索Blend for Visual Studio吧，找出最适合自己项目的功能。