微软WPF的Blend简单教程.docVIP

[原创] 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），双