blend

BlendforVisualStudio2013

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

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

逻辑。

2、⽽桌⾯开发WPF中，微软创造了⼀种新的开发语⾔XAML——可扩展应⽤程序标记语⾔。它在桌⾯开发及富媒体⽹络程序开发中扮演了

HTML+CSS+的⾓⾊，成为设计师和程序员之间沟通的枢纽。

现在，设计师和程序员们⼀起⼯作、共同维护软件的版本，只是他们使⽤的⼯具不同-——设计师们使⽤Blend（中的⼀个）来设计UI，程序

员则使⽤VisualStudio开发后台逻辑代码。

Blend使⽤起来很像Photoshop等设计⼯具，因此可以最⼤限度地发挥出设计师的特长。使⽤它，设计师不但可以制作出绚丽多彩的静态

UI，还可以让UI包含动画。虽然程序员们也能做出这些东西，但从专业性、时间开销以及技术要求上显然是划不来的。更重要的是，这些绚

丽的UI和动画都会以XAML的形式直接保存进项⽬，⽆需转化就可以直接编译，节省了⼤量的时间和成本。

3、BlendforVisualStudio2013

BlendforVisualStudio⼀直以来都是WPF开发者的主要⼯具。长久以来，该软件⼀直作为从VisualStudio分离出来的独⽴产品来销售，属

于Expression套件。从VisualStudio2012开始，BlendforVisualStudio被发布为VisualStudio的附赠应⽤程序。令⼈遗憾的是，Blendfor

VisualStudio的第⼀次迭代就抛弃了XAML开发者，完全将重点放在使⽤HTML/JavaScript开发Windows8应⽤程序的⼈们⾝上。

这个情况已成定局，⽽BlendforVisualStudio2013现在重新为XAML开发者提供帮助。

后⾯的章节将详细介绍BlendforVisualStudio2013的许多功能，下⾯是该⼯具的⼀些主要优点。

以紧凑的布局彻底控制UI。BlendforVisualStudio2013的能⼒远超VisualStudio的XAML功能。虽然我不是UI设计师，但BlendforVisual

Studio2013能够使我的UI更加漂亮，⽽且速度⽐VisualStudio更快（不论是在设计⽅⾯还是在VisualStudio的XAML模式⽅⾯）。

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

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

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

此外，VisualStudio和BlendforVisualStudio2013还会使⽂件保持同步。如果你使⽤这两个⼯具同时打开了⼀个项⽬，当你在⼀个程序中

更改（并保存了）应⽤/页⾯后，另⼀个程序会提⽰你重新加载该项⽬。你应确保保存了更改，因为在这两个程序中同时作出更改并且没有保

存会导致并发问题。

在BlendforVisualStudio中打开项⽬

VisualStudio和BlendforVisualStudio可以⾮常好地协同⼯作。要在BlendforVisualStudio中打开项⽬，可右键WPF项⽬中的.sh⽂件，打

开⽅式，并选择“BlendforVisualStudio2013”选项，打开。

屏幕会显⽰如下画⾯

屏幕中会显⽰很多窗⼝，但⾄少都处于默认布局中（这⾮常像VisualStudio，你可以根据需要调整布局）。下⾯详细介绍这些布局元素。

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

该窗⼝的左上⾓有“项⽬”、“资产”、“状态”和“设备”选项卡，下⾯是这些选项卡的作⽤。

“项⽬”选项卡显⽰解决⽅案中的所有⽂件（⾮常像VisualStudio中的解决⽅案资源管理器）。其中没有特别重要的功能。

“资产”选项卡列出了可添加到页⾯中的所有资产。可以将之视为增强的VisualStudio⼯具箱。使⽤该选项卡除了可以向页⾯添加控件和⾯板

外，还可以添加（和更改）样式、操作和媒体。

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

使⽤“设备”选项卡可以更改解决⽅案、⽅向和连接边界（后⾯⼏章将详细介绍这些内容）。使⽤该选项卡还可以更改主题（在明暗之间）和

最⼩宽度。

对象和时间线

“对象和时间线”⾯板（左下⾓）含有⽂档⼤纲，使⽤该⾯板可以添加和修改故事板（与视觉状态管理器⼀同使⽤）。

页⾯设计器、标记和代码

⼯作区的中⼼区域是设计器和代码编辑器。与VisualStudio类似，可以使⽤拆分视图查看所有设计或标记。还可以将代码⽂件加载到中央窗

格中。当你获得类似Intellin的功能时，⽆法使⽤VisualStudio所有的强⼤功能，如导航和重构。此外，也不能使⽤已经安装到Visual

Studio中的插件，如TelerikJustCode。

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

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

我曾经花了很多时间研究“属性”选项卡。除了“名称”“布局”等简单项⽬以及Width和Height等属性外，还含有⼤量在标记中难以⼿动设置的属

性。使⽤“属性”⾯板可以设置“画笔”、“转换”和“交互”等选项。

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

使⽤“数据”选项卡可以设置页⾯的数据环境、创建样本数据和各种数据资源。使⽤该选项卡可以帮助你在设计时观察添加数据后的页⾯外

观，⽽⽆需每次都不得不通过运⾏应⽤程序进⾏观察。

BlendforVisualStudio是⼀种功能极为强⼤的⼯具，若是详细介绍它的功能，就会占⽤整整⼀本书的篇幅。我在开发应⽤程序时会同时打开

VisualStudio和BlendforVisualStudio，并且会根据需要完成的⼯作在这两个⼯具之间切换。去探索BlendforVisualStudio吧，找出最适

合⾃⼰项⽬的功能。