微软WPF的Blend简单教程

[原创] Expression Blend 2教程1-介绍

技术| 工具2009-05-28 19:40:23 阅读323 评论2字号：大中小

本来只想写一篇简短的Blend介绍，没想到一写就写了一下午。。希望对初学Blend的同学们有所帮助

前面的工具介绍部分，建议直接跳过，看最后那个实例就好了！很多东西要自己摸索一下就明白了！

1. 什么是Blend？

要了解Blend是什么需要先了解的是Microsoft的Silverlight和WPF（Windows Presentation Foundation）

来自维基百科的简单介绍Microsoft Silverlight WPF

这是一个面向设计师的简单教程关于技术背景方面就不多说了简单的说，Blend是微软搞出来让设计师为WPF或Silverlight创建用户界面的一个设计工具个人认为他的最大优点在于“设计将可原封不动地用于最后的产品中…开发人员不再需要尝试重建它们…”

这让开发人员和设计师都是那么的欣喜若狂啊！

如果和设计师熟悉的Adobe系列作比较，Blend之于WPF（Silerlight）就如Flash之于Flex

2. Blend可以做什么

制作界面是Blend的本职工作，但如此强大的工具在手，只要你像叉蓝一样爱动脑筋，它能起的作用就不只是这些：P

Blend可以很轻松的添加事件、增加响应（当然Flash也可以做到，但我认为Blend更加易用轻松，可能是由于我并不那么熟悉Flash…）所以当受够了Axure的折磨时，我突然意识到如果用Blend就可以做出更高保真的应用原型！不再是简单呆板的页面跳转，不再需要测试人员按固定的路线操作，Blend可以制作出保真度非常高的原型。

对于大型产品，前期的可用性测试怎么样得到更多的信息，以便对产品进行改进？条件允许的话，当然是做保真度更高的原型。而又如何快速开发出高保真原型？我认为Blend 和Flash在这方面，具备了应对这个难题的能力。

3. 了解Blend界面结构

“wo~ 好酷的界面”很多同事从我身后走过时，都会有这个反应…

但我并不喜欢Blend的界面：

第一，字体是“糊的”，现在知道，这种平滑字体是Blend的“特色”。个人认为这将成为中文应用程序里的一个很大弊端，设计师无法再使用被广大用户接受的12点宋体。雅黑成了退一步的选择。

第二，或许已经用惯了Adobe系列，个人认为这种常用的工具型软件，黑乎乎的颜色太浓厚了，挺累的

界面结构：

1. 最左侧一列和Adobe的一样，是一些设计用的工具，如选取工具、拾色器、填充，详细的下面介绍

2. 第二列上部分是触发器，可以给各个控件增加响应（比如鼠标移上一个按钮时，按钮有个什么变化）

这块面积虽然不大，但却是WPF的核心呀！所有神奇炫丽的响应效果，都是通过这里添加事件，再制作动画。

3. 第二列下部分，可以理解为类似图层的概念制作动画的时候，这里会出现类似Flash 里的时间轴

4. 白色区域即为画布，右上角有三个标签，可以切换三种视图

Design：既是上面截图中的样子

XAML：转到界面的代码，界面所有内容都是用XAML定义的，包括画一段路径，都对应在XAML里面的一条代码。设计师一般不需要看XAML视图。

Split：视图分两栏，上方是design，下方是XAML。当选中设计视图里的元件时，下面就自动跳至对应该元件的那段。

这个和dreamweaver是一样的呀~

5. 最右侧一栏有三个Tab分页，分别是

Project：和项目相关的内容，工程的文件结构（在这里可以导入外部的图片资源）Properties：当在画布绘制了什么元件时，选中该元件后，这里就会显示和这个元件相关的属性。属性面板是最为常用的一个面板，如果你不想写XAML，那么整个界面的布局、对齐方式、描边等等，都可以再属性面板完成设置。（这个和Flex的属性面板的功能基本一致）

Resources：资源面板用到的不多，里面显示了所有的自定义样式。比如我制作了一个button，buttonStyle就成为一个资源，我在应用程序里使用到按钮的地方，都可以使用这个样式。（这个基本就相当于Flex里面CSS的Style，不过Blend可以完全自由定义一个元件的外观。而在Flex里，可以改变的CSS非常有限，除非用Flash制作元件再导入成资源）

4. 工具面板常用工具介绍

Selection：和Adobe的类似，用来选中图层（组）。选种一个组（例如Grid），双击后进入这个组的编辑（这个和Flash是一样的，双击后进入编辑这个元件的视图）。这个工具没办法选中一个组里面的子内容。

Direct Slection：可以直接选中任和图层（未锁定），即使它被包含在一个组里面。可以选中路经里的节点，拖动节点等

Brush Transform：自由变换渐变色，控制方向、中心点…这个比PS好用多了，PS

里面要拖动渐变只能无数次的尝试，达到一个好的效果这个可以随意变换渐变，很方便

布局：在界面架构里用到的各种布局。这块内容有很大学问，这里就不详细说明了

个人感觉Blend的布局，比Flex里的布局类型更多、更好用一些，每种布局的特点很明确，控制起来很方便。

控件：软件应用里常见的控件都在这里了，如果没有你想要的东西，点下面的那个“>>”

可以搜出更多更复杂的控件。

当你使用这些控件时，控件的皮肤会直接绑定到系统的主题。不过你可以自己定制Style，再把Style应用到具体控件实例上。自定义控件的Style不是特别容易，尤其是类似Slider、ComboBox这种情况多变、复杂的控件，让人想吐血…

5. 用Blend做一个最简单的应用界面！

俗话说的好，少看书多做事！做过一个你就知道，Blend是多么容易啦！

任务：我们要搞一个简单的应用，上面只有一个按钮，点击一下按钮，界面的空白部分就会显示“Hello world！”

Step 1 新建一个工程

新建完成后，恭喜你得到了一张空白的画布！

可以在属性面板设置Width和Height，属性面板就不介绍了，自己摸索去吧！