Expression Blend入门
Expression Blend入门
本文将介绍如何选择合适的开发环境做WPF、SilverLight或者WP7，以及一些简单的Demo。随着计算机软件开发分工细节化，微软对已有的产品线进行了调整，在保持原有经典开发工具Visual Studio基础上，又推出了一套新的设计开发工具系列，Expression Studio。Expression Studio设计工具系列包含四项主要产品：
?Expression Blend
Expression Blend（下称Blend），是一款用于设计桌面和Web应用用户界面的可
视化工具。用户可以通过拖拉控件方式创建用户交互界面；另外Blend中，包含一款软件原型建模工具SketchFlow，该工具允许用户快速开发出专业的项目原型，创建设计原型后，以丰富的界面效果展示给客户，该工具将在后文详细讲述。
?Expression Design
Expression Design（下称Design），是一款专业的图形图像设计编辑工具，主要是为项目美工设计人员准备，如果你对Photoshop，Fireworks 或者Illustrator熟悉，可以把Design看做同类产品，其中使用原理大部分都是相同的，而Design的优势是可以和Blend 完美无缝结合，创建图形后，可以直接转换成为XAML，供Blend调用，由于本系列教程是讲述Blend，这里就不再对Design过多描述，在后文用到时，我们将详细讲述。
?Expression Encoder
Expression Encoder（下称Encoder）是一款专业的视频编辑工具，开发人员可以使用该工具编辑视频项目，并发布到Web服务器，Silverlight项目可以在应用中进行高质量播放调用。由于本系列教程是讲述Blend，这里就不再对Encoder过多描述，在后文用到时，我们将详细讲述。
?Expression Web
Expression Web（下称Web），是一款专业的Web页面设计工具。如果您对
Dreamweaver熟悉，可以把Web看做同类产品。Web允许开发人员通过即见即所得的模式，设计和开发符合Web标准的网站。由于本系列教程是讲述Blend，这里就不再对Web过多描述，在后文用到时，我们将详细讲述。
既然本系列文章讲述Blend，我想我们应该多了解一些Blend方面的知识。我们一直在说Blend强大，具体它强大在哪里呢？
首先作为交互性设计工具，Blend解决了传统开发中开发人员和设计人员配合不容易
协调的瓶颈。无论是桌面应用还是Web应用，越来越注重用户体验性，而程序代码设计和美工设计也逐渐被细分化，而两者在项目中的配合是至关重要的，相信有不少开发人员都有过相同的经历和感触，程序开发人员和美工设计人员一遍又一遍的修改框架希望能够达到完美匹配。Blend正是针对该问题推出了一系列的解决方案，例如，在Blend中编辑Silverlight 或WPF项目UI代码的同时，也会直接绑定到Visual Studio中，实现双向修改代码功能；在Blend中，可以快速导入PhotoShop图形和Illustrator矢量图，方便项目UI设计。
其次，Blend是一款通用的设计工具，支持设计跨平台跨浏览器的Silverlight和WPF
应用项目，为了简化设计人员的工作量，Blend支持一个简单的可重复利用的元素叫做行为（Behaviors），设计人员可以直接应用不同的行为到项目中，无需编写任何代码，例如，可以直接应用拖拉行为到项目，让项目支持拖拽控件。在微软Expression官方网站，有大量的行为（Behaviors）代码下载，免费使用。
最后是快捷方便的设计方式，以及软件项目原型设计工具SketchFlow。在Silverlight
中, VisualStateManager 的编辑是很复杂的，如果仅靠Visual Studio进行代码编辑，是非常浪费时间和精力的事情，如果使用Blend进行编辑，会大大的提高效率。另外，使用Blend 进行控件的样式和模板设计也是非常方便的，我们将在后文详细描述。值得一提的是SketchFlow，该项目是现在为数不多的优秀建模工具之一。使用该工具，开发人员可以快速的建立项目原型，以Silverlight的方式展示给客户或者项目团队成员，我们将在后文详细描述。
通过以上的描述，我们可以清楚明白，从事Silverlight和WPF项目开发，Blend是必不可少的设计工具，学会了Blend会在开发过程中达到事半功倍的效果。也正式以上的原因，才会有了本系列文章教程，本系列教程旨在为了让更多的开发人员了解和学习Expression Blend的使用，希望能够让更多的开发人员加入到Silverlight和WPF开发行列。
如果你想创建WPF、Silverlight或者是Windows Phone项目，你可以按照下面来选择相应的环境搭建：
开发Windows Phone
Windows Phone Developer Tools
你可以只安装这个就能进行WP7的开发。这个是All-In-One的安装包，包括一个专门为开发Windows Phone应用程序的Expression Blend、Visual Studio以及开发手机游戏的XNA Game Studio！
具体的清单如下：
安装Windows Phone Developer Tools所包含的工具集合如下：
* Visual Studio 2010 Express for Windows Phone Beta
* Windows Phone Emulator Beta
* Silverlight for Windows Phone Beta
* Microsoft Expression Blend for Windows Phone Beta
* XNA Game Studio 4.0 Beta
以下是我安装Windows Phone Developer Tools的一些截图：
PS：由于是在线安装的，要下载356M的文件，请耐心等待。在安装的时候，有时候会比较卡，也请耐心等待。
另，推荐几个比较不错的学习网址：
https://www.360docs.net/doc/4615506859.html,（专门的手机开发网址，有WP7，Android，iPhone等）Windows Phone 7 完全版电子书、书中的源代码
https://www.360docs.net/doc/4615506859.html,/archive.aspx#windows-phone（30天学习WP7）
Silverlight for Windows Phone Toolkit (Optional)
可选项，提供了一些类似WrapPanel、DatePicker等控件，默认的安装包中是没有这些控件的
开发SilverLight和WPF应用程序
我们可以只装.Net FrameWork 4和Expression Blend4来进行SilverLight和WPF的开发。
.NET Framework 4
.Net FrameWork 提供最基本的可以使得类似Expression Blend这样的程序可以安装允许的。你应该首先安装.Net FrameWork，如果你没有安装的话。
Expression Blend 4
我们可以仅使用Expression Blend来设计和开发Silverlight和WPF应用程序，前提是你装了.NET Framework4。使用Expression Blend我们可以十分方便的设计及编码。Expression Blend和Adobe的产品Photoshop等十分类似，如果你会photoshop的话，掌握Expression Blend不是问题。
使用Visual Studio做开发
如果你要进行更深层次的业务上的开发，那么就建议你安装Visual Studio 2010了。Visual Studio 2010了提供了强大的调试功能。
Visual Studio 2010
我们可以使用Visual Studio来进行开发、调试Silverlight和WPF应用程序。
建议下载的版本是旗舰版，功能比较全面。下载地址
Silverlight 4 Tools
此包是Visual Studio 2010 的外接程序，用于为Microsoft Silverlight 4 和RIA Services 提供工具。它可以安装在Visual Studio 2010 或Visual Web Developer 2010 速成版上。它扩展了现有Silverlight 3 功能和Visual Studio 2010 中的多定向功能，从而还可以使用C# 或Visual Basic 为Silverlight 4 创建应用程序。
推荐的环境及顺序：
Windows 7--->office 2010 ----> Visual studio 2010 ---> Windows Phone Developer Tools ---->Expression Studio 4
推荐理由：使用Expression Studio 4做设计，Visual studio 2010写代码（如果你的硬盘容量允许的话，所有的装下来要10G左右）
Demo1：使用Expression Blend4创建WPF应用程序下面以一个简单的实例来看看我们如果使用Expression Blend来简化我们的WPF开发。
打开Expression Blend4，点击创建项目，如下图：
然后会出现类似Visual Studio中的选择项目类型、填写项目名称、项目路径及使用语言的界面，如下图
这里我们选择WPF Application，项目会被创建，然后我往美化板中托一个Label，写著名的Hello World。
本文将创建一个Silverlight 3 Application + Website + C#完整项目，方便以后解释项目细
节。
创建新项目后，可以在Blend看到当前工作去，我将重要的几个部分添加了标识，下面详细描述各个部分的作用：
A部分:是菜单选项；
B部分：是DockPanel菜单，鼠标点击后，会弹出对应的窗口，例如“对象和时间线”或者“项目管理”等；
C部分：是工具面板菜单
D部分：项目面板
上图可以看出在SilverlightBlendDemo解决方案下，有两个项目：
1. SilverlightBlendDemo: 该项目是Silverlight客户端项目，主要承载Silverlight客户端页面和控件；
2. SilverlightBlendDemoSite: 该项目是Silverlight服务器端项目，主要承载服务器端代码，例如WCF Service或者DAL数据层代码；
E部分：文档切换栏, 该栏目显示所有打开的项目文件，可以自由切换；
F部分：主要工作区，叫做美工板，所有页面和控件设计都在该区域；
G部分：视图和代码切换栏，该栏目提供三个选项，第一个是视图选项，第二个是代码选项，第三个是视图和代码同时显示选项；
H部分：属性和资源选项栏，从这里可以设置控件属性和对应项目资源；
I部分：使用该部分缩放F部分美工板，启动动画效果，设置控件对齐选项以及查看文件注释内容；
以上窗口部件是创建项目后，默认显示的几个窗口，另外还有几个常见的窗口部件，也介绍一下：
1. 首先介绍一下菜单扩展部分，当你把鼠标选中C部分菜单按钮，会弹出扩展菜单按钮，功能如下：
2. 在扩展菜单中，最后一项是Silverlight资源工具按钮，点击选中后，会弹出以下
窗口，其中包含所有控件，样式集合，行为代码集合以及动画效果和媒体文件集合。在设计的时候，如果添加新控件，可以从这个选项进行选择。
3. Object and Timeline - 对象和时间线面板，可以使用该面板对页面控件对象进行分层管理，另外也可以对当前对象进行动画设计，详细动画设计，将在下文描述。
4. 属性设置面板，在上文H部分，我们介绍了属性和资源选项框，这里我把属性框单独列出来，在美工面板创建一个按钮控件后，选中该按钮，在属性面板中显示各种属性，例如背景，笔刷等等，从这个面板可以不用输入代码，直接设计控件属性。
5. 控件模板样式资源面板。从该面板，选择设计控件样式。
6. 调试结果面板，在该面板显示调试错误信息和输出信息；
如下图，然后导航到属性面板，可以看到许多小的分类。这里我们使用Text选项中，选择字体为Old English Text，字体大小为16
我们可以定义Label的Trigger，在左侧面板的Trigger选项卡，可以选择控件的触发事件，并录制一些动作，这里我录制了当鼠标移动到Label上时，Label的位置发生变化的动作。
我们可以像WinForm中那样直接导航到事件选项卡中，直接双击，Expression Blend会自动会为我们生成相应的后台事件代码。
如下图，写这样的弹出窗体代码
按F5或者Ctrl+F5运行程序，运行效果如下