Blend经典入门教程Word文档格式.docx

Blend经典入门教程Word文档格式.docx

《Blend经典入门教程Word文档格式.docx》由会员分享，可在线阅读，更多相关《Blend经典入门教程Word文档格式.docx（111页珍藏版）》请在冰豆网上搜索。

ExpressionDesign（下称Design），是一款专业的图形图像设计编辑工具，主要是为项目美工设计人员准备，如果你对Photoshop，Fireworks或者Illustrator熟悉，可以把Design看做同类产品，其中使用原理大部分都是相同的，而Design的优势是可以和Blend完美无缝结合，创建图形后，可以直接转换成为XAML，供Blend调用，由于本系列教程是讲述Blend，这里就不再对Design过多描述，在后文用到时，我们将详细讲述。

∙ExpressionEncoder

ExpressionEncoder（下称Encoder）是一款专业的视频编辑工具，开发人员可以使用该工具编辑视频项目，并发布到Web服务器，Silverlight项目可以在应用中进行高质量播放调用。

由于本系列教程是讲述Blend，这里就不再对Encoder过多描述，在后文用到时，我们将详细讲述。

∙ExpressionWeb 

ExpressionWeb（下称Web），是一款专业的Web页面设计工具。

如果您对Dreamweaver熟悉，可以把Web看做同类产品。

Web允许开发人员通过即见即所得的模式，设计和开发符合Web标准的网站。

由于本系列教程是讲述Blend，这里就不再对Web过多描述，在后文用到时，我们将详细讲述。

既然本系列文章讲述Blend，我想我们应该多了解一些Blend方面的知识。

我们一直在说Blend强大，具体它强大在哪里呢？

首先作为交互性设计工具，Blend解决了传统开发中开发人员和设计人员配合不容易协调的瓶颈。

无论是桌面应用还是Web应用，越来越注重用户体验性，而程序代码设计和美工设计也逐渐被细分化，而两者在项目中的配合是至关重要的，相信有不少开发人员都有过相同的经历和感触，程序开发人员和美工设计人员一遍又一遍的修改框架希望能够达到完美匹配。

Blend正是针对该问题推出了一系列的解决方案，例如，在Blend中编辑Silverlight或WPF项目UI代码的同时，也会直接绑定到VisualStudio中，实现双向修改代码功能；

在Blend中，可以快速导入PhotoShop图形和Illustrator矢量图，方便项目UI设计。

其次，Blend是一款通用的设计工具，支持设计跨平台跨浏览器的Silverlight和WPF应用项目，为了简化设计人员的工作量，Blend支持一个简单的可重复利用的元素叫做行为（Behaviors），设计人员可以直接应用不同的行为到项目中，无需编写任何代码，例如，可以直接应用拖拉行为到项目，让项目支持拖拽控件。

在微软Expression官方网站，有大量的行为（Behaviors）代码下载，免费使用。

最后是快捷方便的设计方式，以及软件项目原型设计工具SketchFlow。

在Silverlight中, 

VisualStateManager的编辑是很复杂的，如果仅靠VisualStudio进行代码编辑，是非常浪费时间和精力的事情，如果使用Blend进行编辑，会大大的提高效率。

另外，使用Blend进行控件的样式和模板设计也是非常方便的，我们将在后文详细描述。

值得一提的是SketchFlow，该项目是现在为数不多的优秀建模工具之一。

使用该工具，开发人员可以快速的建立项目原型，以Silverlight的方式展示给客户或者项目团队成员，我们将在后文详细描述。

通过以上的描述，我们可以清楚明白，从事Silverlight和WPF项目开发，Blend是必不可少的设计工具，学会了Blend会在开发过程中达到事半功倍的效果。

也正式以上的原因，才会有了本系列文章教程，本系列教程旨在为了让更多的开发人员了解和学习ExpressionBlend的使用，希望能够让更多的开发人员加入到Silverlight和WPF开发行列。

2界面快速入门

上一篇主要介绍Expression系列产品，另外概述了Blend的强大功能，本篇将用Blend3创建一个新Silverlight项目，通过创建的过程，对Blend进行快速入门学习。

在开始使用Blend前，首先需要进行Silverlight的开发环境搭建，在银光中国网（SilverlightChina.Net）有篇“轻松建立Silverlight开发环境”，其中列出了建立Silverlight开发环境的几个步骤，另外，我在过去发布过一篇“Silverlight开发工具集合”文章，也列出了Silverlight项目开发必装工具软件，这里对于开发环境的搭建，我就不再赘述。

Silverlight开发环境搭建成功后，我们将通过实例介绍Blend入门操作，我使用的Blend是英文版本，我将对照翻译成中文。

首先使用Blend按照以下步骤创建一个新的Silverlight项目，

1.点击左上角的“File-NewProject”，这时会弹出一个新建项目窗口，如下图

在上图可以看到Blend支持创建两个类型的项目，一个是Silverlight，另一个是WPF，本系列主要讨论Silverlight，所以，我们选择“ProjectType-Silverlight”，在选中Silverlight类型后，在弹出窗口右边会出现四个项目模板，

（1）Silverlight3Application+Website 

该选项是“创建Silverlight3客户端应用其中包含Website项目”，选择该选项后，Blend会自动创建Web项目在同一个解决方案下，编译后运行，会在Web项目中产生测试页面，在客户端显示Silverlight客户端。

（2）Silverlight3Application

该选项是“创建Silverlight3客户端应用”，选择该选项后，Blend仅创建Silverlight客户端，编译后，自动生成一个测试页面。

（3）Silverlight3ControlLibrary

该选项是“创建Silverlight控件类库”，选择该选项后，Blend会创建Silverlight空白类库，主要用于创建Silverlight自定义控件。

（4）Silverlight3SketchFlowApplication 

该选项是“创建Silverlight3SketchFlow应用”，选择该选项后，Blend会创建Silverlight3SketchFlow应用。

在项目模板窗口下，是创建项目的名称，项目路径和项目后台语言支持。

本文将创建一个Silverlight3Application+Website+C# 

完整项目，方便以后解释项目细节。

创建新项目后，可以在Blend看到当前工作去，我将重要的几个部分添加了标识，下面详细描述各个部分的作用：

A部分:

是菜单选项；

B部分：

是DockPanel菜单，鼠标点击后，会弹出对应的窗口，例如“对象和时间线”或者“项目管理”等；

C部分：

是工具面板菜单 

D部分：

项目面板

上图可以看出在SilverlightBlendDemo解决方案下，有两个项目：

1.SilverlightBlendDemo:

该项目是Silverlight客户端项目，主要承载Silverlight客户端页面和控件；

2.SilverlightBlendDemoSite:

该项目是Silverlight服务器端项目，主要承载服务器端代码，例如WCFService或者DAL数据层代码；

E部分：

文档切换栏,该栏目显示所有打开的项目文件，可以自由切换；

F部分：

主要工作区，叫做美工板，所有页面和控件设计都在该区域；

G部分：

视图和代码切换栏，该栏目提供三个选项，第一个是视图选项，第二个是代码选项，第三个是视图和代码同时显示选项；

H部分：

属性和资源选项栏，从这里可以设置控件属性和对应项目资源；

I部分：

使用该部分缩放F部分美工板，启动动画效果，设置控件对齐选项以及查看文件注释内容；

以上窗口部件是创建项目后，默认显示的几个窗口，另外还有几个常见的窗口部件，也介绍一下：

1.首先介绍一下菜单扩展部分，当你把鼠标选中C部分菜单按钮，会弹出扩展菜单按钮，功能如下：

2.在扩展菜单中，最后一项是Silverlight资源工具按钮 

，点击选中后，会弹出以下窗口，其中包含所有控件，样式集合，行为代码集合以及动画效果和媒体文件集合。

在设计的时候，如果添加新控件，可以从这个选项进行选择。

3.ObjectandTimeline-对象和时间线面板，可以使用该面板对页面控件对象进行分层管理，另外也可以对当前对象进行动画设计，详细动画设计，将在下文描述。

4.属性设置面板，在上文H部分，我们介绍了属性和资源选项框，这里我把属性框单独列出来，在美工面板创建一个按钮控件后，选中该按钮，在属性面板中显示各种属性，例如背景，笔刷等等，从这个面板可以不用输入代码，直接设计控件属性。

5.控件模板样式资源面板。

从该面板，选择设计控件样式。

6.调试结果面板，在该面板显示调试错误信息和输出信息；

今天写到这里了，下次继续写，下面是网友经常问的几个Blend问题，我做了统一回答，希望能帮到更多朋友。

如果您在学习中遇到问题，请留言或者加入QQ群讨论。

超级群22308706， 

100844510（200人满）

常见的几个问题：

为什么Blend中没有相对应的Silverlight控件？

答：

在Blend中没有Silverlight控件，需要确认是否安装SilverlightToolsforVisualStudio2008Sp1和SilverlightToolkit控件扩展包，在SilverlightTools中包含了基础控件包，而SilverlightToolkit是扩展控件。

为什么Blend中没有智能提示功能？

确认Blend的版本，在Blend2.5之前的版本，Blend不支持IntelliSense。

为什么VisualStudio2008Sp1没有Silverlight项目视图设计界面？

从Silverlight3开始，微软屏蔽了VisualStudio2008Sp1的Silverlight项目视图设计功能，推荐使用Blend3进行Silverlight项目视图设计。

在VisualStudio2010中，重新恢复了Silverlight项目视图设计功能。

3布局控件快速入门Grid

上一篇对Blend3开发界面进行了快速入门介绍，本篇将基于Blend3介绍Silverlight控件。

对于微软开发工具熟悉的朋友，相信您很快就熟悉Blen