Expression_Blend实例中文教程.docx

《Expression_Blend实例中文教程.docx》由会员分享，可在线阅读，更多相关《Expression_Blend实例中文教程.docx（112页珍藏版）》请在课桌文档上搜索。

1、ExpressionBlend实例中文教程开篇随着计算机软件开发分工细微环节化，微软对己有的产品线进行了调整，在保持原有经典开发工具YiSUUlSlUdio基础上，又推出了一套新的设汁开发工具系列，ExpressionStudio。ExpressionStUdio设计工具系列包含四项主要产品： ExpressionBIerldExpressionBlend（下称BIend）,是一款用于设计桌面和Heb应用用户界面的可视化工具。用户可以通过拖拉控件方式创建用户交互界面：另外BIend中，包含一款软件原型建模工具SketChFI。,，该工具允许用户快速开发出专业的项目原型，创建设计原型后，以丰富的

2、界面效果展示给客户，该工具将在后文具体讲解并描述。 EXPrCSSiOnDCSignEXPreSSiOnDeSign（下称DeSign），是,款专业的图形图像设计编辑工具,主要是为项目美工设计人51打算，假如你对PhOtcShOP,Firoworks或者IlIUStrMOr熟识,可以把DeSign看做同类产品，其中运用原理大部分都是相同的,而DeSign的优势是可以和BIend完备无健结合,创建图形后，可以干脆转换成为XAM1.,供BIend调用，由于本系列教程是讲解并描述Blend,这里就不再对DeSign过多描述，在后文用到时，我们将具体讲解并描述. ExprcSSionEncoderEX

3、PreSSionEnCoder（下称EnCOder）是款专业的视频编辑工具,开发人员可以运用该工具编辑视频项目，并发布到Web服务器，SiIVerIighl项目可以在应用中进行高质墩播放调用。由于本系列教程是讲解并描述Blend,这里就不再对EnCoder过多描述，在后文用到时，我们将具体讲解并描述。 EXDreSSiOnNChExpressionWeb（下称Web）,是一款专业的Web页面设计工具。假如您对DreamWeaVer熟识，可以把Web看做同类产品。Web允许开发人员通过即见即所得的模式，设计和开发符合Web标准的网站。由于本系列教程是讲解并描述Blend,这里就不再对Web过多描

4、述,在后文用到时，我们将具体讲解并描述。既然本系列文章讲解并描述BIend,我想我们应当多了解一些BIend方面的学问。我们始终在说Blend强大，具体它强大在哪里呢？苜先作为交互性设计工具，Blend解决了传统开发中开发人员和设计人员协作不荷洁协调的瓶颈。无论是束面应用还是Web应用，越来越留意用户体验性，而程序代码设计和美工设计也渐渐被细分化,而两者在项目中的协作是至关重要的，信任有不少开发人m都有过相同的经脸和感受，程序开发人m和美工设计人员一遍又一遍的修改框架希望能够达到完备匹配。Blend正是针对该问题推出了一系列的解决方案，例如,在BIend中编辑SiIVerlight或IPF项目

5、Ul代码的同时，也会干脆绑定到ViSUalStUdiO中，实现双向修改代码功能：在Blend中，可以快速导入PholoShOP图形和HIUSlraIor矢量图,便利项目UI设计.祢D其次，Blend是一款通用的设计工具，支持设计跨平台跨阅读器的SiIVerIight和WPF应用项目，为了简化设计人员的工作量，BIend支持一个简洁的可重纪利用的元素叫做行为(Behaviors),班计人员可以干脆应用不同的行为到项目中，无需编写任何代码，例如，可以干脆应用拖拉行为到项目，让项H支持拖拽控件。在微软EXPreSSiOn官方网站，有大量的行为(BehHviOrS)代码卜.载，免费运用。最终是快拢便利

6、的设计方式，以及软件项目原型设计工具SkelChFlow。在Silverlight中，VisuaIStateManager的编辑是很困难的，假如仅靠ViSUalStUdi。进行代码编辑，是特别奢侈时间和精力的事情，假如运用BIend进行编辑，会大大的提高效率。另外，运用BIend进行控件的样式和模板设计也是特别便利的，我们将在后文具体描述。值得一提的是SketChFIow,该项目是现在为数不多的优秀建模工具之一。运用该工具，开发人员可以快速的建立项目原型，以SilVerlight的方式展示给客户或者项目团队成员，我们将在后文具体描述。通过以上的描述,我们可以清晰明白，从事SiIVerIight

7、和WPF项目开发,Blend是必不行少的设计工具，学会了Blend会在开发过程中达到事半功倍的效果。也正式以上的缘由，才会有了本系列文章教程，本系列教程旨在为f让更多的开发人员了解和学习EXpreSSionBIend的运用，希望能够让更多的开发人员加入到Silverlight和WPF开发行列。界面快速入门上一篇主要介绍EXPreSSion系列产品，另外概述了BIend的强大功能，本篇将用BIend3创建一个新SilVerlight项目,通过创建的过程,对BIeIld进行快速入门学习。在起先运用BIend前，首先须要进行SiIVerlighl的开发环境搭建，在银光中国网(SilverlightC

8、hina-Net)有篇“轻松建立SiIVerIight开发环境”,其中列出了建立SiIVerligl开发环境的几个步骤，另外，我在过去发布过一篇Silverlight开发工具集合”文章,也列出了SilVerIight项目开发必装工具软件，这里对于开发环境的搭建，我就不再赘述。SilVerliRht开发环境搭建胜利后，我们将通过实例介绍BIend入门操作，我运用的BIend是英文版本，我将比照翻译成中文。首先运用Blend依据以下步骤创建一个新的SBVerIight项目,1.点击左上角的“File-NeWProject，这时会弹出一个新建项目窗口,如下图在上图可以看到BIend支持创建两个类型的

9、项目，一个是SilVerIight,另一个是WPF,本系列主要探讨SilVerligh3所以，我们选择“ProjectType-SilVerIiglH”，在选中SiIVerlighI类型后，在弹出窗口右边会出现四个项目模板，(1) Silverlight3Application+Iebsite该选项是“创建SiIYetlighl3客户端应用其中包含WebSile项FT,选择该选项后，BIend会自动创建Web项目在同一个解决方案卜编译后运行，会在Web项目中产生测试页面，在客户端显示Siherlight客户端。(2) Silverlight3Application该选项是“创建SilVerli

10、ght3客户端应用”,选择该选项后,BIend仅创建SilVerlight客户端，编课后，自动生成个测试页面。(3) Silverlight3Control1.ibrary该选项是“创建SilYerlighl控件类库”，选择该选项后，BIend会创建SiIVerlight空白类库，主要用于创建SiWenight自定义控件。(4) Silverlight3SketchFlowApplication该选项是“创建SiNerlighl3SkeIChFl二应用”，选择该选项后，Blend会创建Silverlight3SketChFlOW应用。在项目模板窗口F.是创建项目的名称，项目路径和项目后台语言支

11、持。本文将创建一个SilVerIight3Application+Iebsite+C#完整项目，便利以后说明项目细微环节。创建新项目后，可以在Blend看到当前工作去，我将重要的几个部分添加了标识,下面具体描述各个部分的作用：A部分：是菜单选项：B部分I是DoCkPaneI菜单，鼠标点击后，会弹出对应的窗口，例如“对象和时间线”或者“项目管理”等：C部分：是工具面板菜单这两个选项用于对象和路径选择这两个选项用于调整美工板块的视图，可以平移或者缩放画笔工具.主要用于对象的颜色绘制控件对象工具，主要用于描绘路径,形状，文本以及控件等资源工具，显示更生V曲也献部.D部分；项目面板*SoUbon-Si

12、tvertightBlendDemo-(2pre如SilverIiohWkrdDcmoReferencesPropertiesQAppjcaml(MamPaqeJtami*SilvcrIightBImdDcfnoSitcBDefaulthtfnl融sltk.II上图可以看出在SikorlightBlendDem。解决方案下，有两个项目：1. SiIverlighIBlendDcmo:该项目是SiIYerIight客户端项目,主要承载SiIVerIight客户端页面和控件；2. SiIverlightBlendDcmoSito:该项目是SiIVerlight服务器端项目,主要承教服务器端代码，例

13、如WCFSerViCe或者DA1.数据层代码:E部分：文档切换拦，该栏目显示全部打开的项目文件，可以自由切换：F部分：主要工作区，叫做美工板，全部页面和控件设计都在该区域；G部分：视图和代码切换栏，该栏目供应三个选项,第一个是视图选项,其次个是代码选项，第三个是视图和代码同时显示选项：78sr1 VUerControl2 x三lns*httpzschna.icroft.cowinfx206xalprntation,3 ln:xhttp:/sche*as.icrosoft.cowinfx2e6xl-4 x:Cls$s*Silverlieht61endDeio.MainPegeN5 WidthF6

14、40”Hight三w480-H部分：属性和资源选项栏，从这里可以设置控件属性和对应项目资源:I部分：运用该部分缩放F部分美工板，启动动画效果，设置控件对齐选项以及查看文件注择内容：以上窗口部件是创建项目后，默认显示的几个窗口，另外还有几个常见的窗口部件，也介绍一下：1.首先介绍一下菜单犷展部分，当你把鼠标选中C部分菜单按钮，会如出扩展菜单按钮，功能如下：2 .在扩展菜单中，最终项是SilVerlight资源工具按钮，点击选中后，会弹出以下窗口，其中包含全部控件，样式集合，行为代码集合以及动画效果和媒体文件集合。在设计的时候，假如添加新控件，可以从这个选项进行选择。SeorSProRBBAccc

15、ssiWc1.istBaxT11Accordion Controls43StylesAreaDataPointAfMSCrieSBdwion8BvOeUPointtaSeriesEnects，Medla二:BorderOBubMeCrweTheme Categortes24 locations1S45BubWeSebw0BureaueiacfcThecneBusylndiartorButtonalendarJCaienddfSuttonCCaJendarltem11CanvasP1OianQcPropcrtychartActon一-、TennAMPtfWrUI?臼ClllrnCsteKPE3：

16、(Accordionltcm瑞AutcCompetc6oxJIBlurfffcct(fBubblcDatdPant|1Jt(IhefCcmtrofl.Ooaooo.4 .属性设置面板，在上文H部分，我们介绍r属性和资源选项框，这里我把屈性框单独列出来，在美工面板创建一个按钮控件后，选中该按钮，在属性面板中显示各种属性，例如背景，箱刷等等，从这个面板可以不用输入代码，干脆设计控件属性。Propcrt-ResourcesData5 .控件模板样式资源面板。从该面板，选择设计控件样式。PropertiesReSOUr-xDdta三回但6AppjcamiIinkedT(KResourceOgdiona

17、ryljusmI(BQeSOJyDktiororyIJ所I,MainPaQexaml6.调试结果面板，在该面板显示调试错误信息和输出信息:ResultsDescnptaonThedosingXM1.tagUserCont*ismvnatced.今日写到这里了，下次接着写，下面是网友常常问的几个Blend问题我做了统一回答，希里能帮到更多挚友“常见的几个问题：为什么Blend中没有相对应的Silverlight控件？答:在Blend中没有没IVerIight控件,须要确认是否安装SiIVerIightToolsforVisualStudio2008Spl和SiIverIightTOOIkit控件

18、扩展包，在SilverlightTools中包含了基础控件包,而SiIVerIightToolkit是扩展控件.为什么Blend中没有智能提示功能？答：确认Blend的版本,在Blcnd2.5之前的版本，Blend不支持IntelliSensee为什么ViSUalStudio2008Spl没有SiIVerlight项目视图设计界面？答：从SiIYerIighI3起先，微软屏蔽了VisualSludio2008Spl的SilVerIighl项目视图设计功能，举荐运用BIend3进行SilVerlight项目视图设计。在VisualStudio2010中，重新史原了Silverlight项目视图设

19、计功能。布局控件快速入门Grid上篇对BIend3开发界面进行了快速入门介绍，本篇将基于BIend3介绍SilVerIight控件。对于微软开发工具熟识的挚友，信任您很快就熟识BIend的开发界面和控件。XAM1.概述Silverlight的控件绘制是由XAM1.语言进行支持的.什么是XAM1.语言？简洁的说,XAM1.(ExtensibleApplicationMarkup1.anguage)是,款基于XM1.的描述性语言，中文也叫做可扩展应用程序标记语言。该语言是由微软开发创建，主要用于构建WPF和SiIVerIigIH应用程序用户界面。XAM1.是SiIVerliglU用户界面设计的基础

20、,运用XAM1.可以定义SiIVerIight对象以及属性，相对于后台语言定义控件来说，XAM1.供庖了特别简洁的方式声明控件，有时仅需句代码就可以完成一个控件的构造。不仅如此，XAH1.还供应了一种便于扩展和定位的语法来定义和程序逻辑分别的用户界面，而这种实现方式和SP.NET中的.代码后置”模皇特别类似。这样有效的分别了设计人员和开发人员，在同一个项目中，对其进行分工前台程序界面设计和后台逻辑设计，使项目到达协作开发的目的.所以说，XAM1.是SihCrIight用户界面设计的基础，作为SiIVerIight设计人员,应当对XAM1.语言娴熟驾驭,由于本系列是介绍Blend,这里对XAM1

21、.语言不再进行细述，假如须要系统化学习XAM1.语言，请访问本文后供应的参考学习资源.对于XAM1.了肯定的相识，下面进入本文正题，SilVerIight控件入门。对于SiIVerlight控件，微软进行了简洁分类,第一类：1.ayoutControls（布局控件）其次类：ItCmControls（项目控件）第三类：UserInteractionControls（用户交互控件）在随后的几篇中我聘介绍这些控件，首先我将介绍布局控件，从名字上可以看出是限制用户界面总体格式的一类控件。通过这类控件，可以很轻松的对用户界面进行编排，在这类控件中，也可以放巴其他的项目控件和用户交互控件,达到限制其位置的

22、目的。假如您有HTM1.的没计阅历,也可以简洁的把布局控件理解为HW1.中的TabIe标签。在任何个SilVCrlight或者鼾T项目中，都高不开布局控件，这里我符细述布局控件。在Silverlight标准控件中，包括以下四种布局控件：Grid控件Canvas控件StackPanel控件Border控件由F该控件在SihCrIight和WPF项目开发中占有特别重要地位，所以,我将具体介绍Grid控件的运用和常用属性：Grid控件Grid控件可以认为是SilVerIight项目设计中,运用的最多的布局控件，在运用BIend或者ViSUHISludio2008SPI创建SiIVerIighl项目的

23、时候,默认控件代码中就包含了Grid67 8 在我个人运用的阅历中理解，Grid控件和HTM1.的TabIe是最近似的。设计人员可以依据须要，自定义设置行数和列数，放置不同的内容和控件到每行每列中。Blend对Grid的设计支持特别的干脆和简洁。这里.我还是用上一篇创建的例程项目，SilverlightBlendDemo,假如你没有该项目，可以在本文后面卜.载，或者依据上篇介绍方法创建.在Blend中创建行和列，只须要将鼠标放在界面窗口上深蓝色带上，就可以看到黄色的分割线，鼠标点击后，行和列即可产生。依据上面说的方法，我将创建个2行2列的效果如下:创建完成后，会以蓝色现条显示在设计界面，而XA

24、M1.代码则会自动生成，IXIl2Grid,ColumnDefinitions3ColumnOefinEonWdth=O.5O5*4 5 6 7 8 9 10 这样看来Grid设计相当简洁，在布局设计过程中，为了便利那些没仃设计阅历的开发人足，Blend供应了两个布局设计模式：-CanVaS界面设计模式，该设计模式是默认设计模式，-Grid界面设计模式点击该按钮，会自动切换界面设计模式在上图中可以看到，在Grid1.ayOUtMode下,每行和每列前都会显示个“锁”状图标，默认是非锁定状态，点击后，会锁定该行或者列，从代码中可以看出明显变更。锹光中（SSikerlqhtCHINA当我点击锁定一

25、列，代码将变更为:IXk3 4 ColumnDefinition5 6 Grid.RowDeitions7 8 9 10这里可以看到COIUmnDCfinitiOn的宽度变成了固定数字，后而不再有“*”号,这样也就表明，该列不再依据内容的变更而变更，始终以固定宽度显示。相反,假如在数值后，有“小号，该行或者列宽度将会跟着内容的变更而变更。再次点击锁定的列，公显示自动获得宽度状态图标:代码则自动变更为KidIh=Aulo”:IXh10 11 ColumDefinitionWidth=AutoMinWdth=323w12 13 14 Grid.RowDefiitions789 10 依据上文所述，

26、Gr据犹如HTO1.中的Table,也就是说我们可以依据运用TabIe的方法，设置Grid的内容。例如，我想放置四个TeXtBIoCk控件在Grid中，首先点击左边工具栏菜单然后在设计界面进行简洁的绘制，创建四个TextBlock控件：第。行，第1列第附，第。列第1行，第0列第1行，第加J钿光中OSSiVerightCHINA选中任一个TeXtBIOCk控件，在右边“properties”屈性栏则会显示出该控件的全部属性，这里我们将关注1.ay。Ut栏属性这里我们可以看出，Blend已经臼动将控件绘制到相对应的列和行中。通过该属性设置，可以轻松的限制控件在Grid中的位置。这里我们看一下后台代

27、码：I12 Grid.ColumnDefiitions3 4 5 6 Grid.RowDefiitions7 8 9 10 ,18.667711 12 13 14 在以上代码中可以看到，BlOnd省略了一些布局代码，假如在布局控件中，假如控件不填写Grid.Column,Grid.Row,则默认值为0.所以说,第一个TeXtBk)Ck的位置被默认为：j)ing=*WrapEontSize=*18.667”/其次个TeXtblOCk位置则为:CFexlBlockMargin=*40,71,57,90*GridJSW=OGrid,Column=*!*TeXl=第O行，第1列TexlHTapping

28、=zrWrapFOntSiZe=18.6677第三个TeXtBlOCk位置则为：第四个TeXtBlOCk位宜代码不变，是完整的。也就是说，从Xaml代码部分，我们可以通过Grid.Column,Grid.Row两个属性限制控件的位置.对于Grid的布局,上面的方法是最通用而且最简洁的。但是在项目中，我们还会运用一些常见属性,协作Grid限制布局，例如Margin,HorizontalAlignment,VerticalAlignment以及GroUP方法等。熟识CSS的设计人m,应当知道Yargin的作用，主要是限制控件内部对应布局控件的边距的。该屈性的赋值方法在CSS中有详解，这里不再赘述,

29、简洁的赋值，Margin=0.1,2,3”,表示：对布局控件左边的距离为O对布局控件的顶端距离为1对布局拄件的右边电离为2对布局拄件的下端距离为3其中0,1,2,3是I意设置的数值,这样就限制了控件在布局控件中的具体位乱对于HOriZOntaIAlignment.VerticalAlignmCnt属性，也是CSS中出现过的属性，简洁的说是时齐属性，水平对齐和垂直对齐.这两个属性默认有四个值：左边/顶端对齐中间对齐右边/下对齐拉伸在上例的代码中，我们可以看到Margin属性都在变更相对Grid对应行和列的位置都有不同，你可以尝试修改一下，相关数值，查看其位置更改状况。第1行，第I列.TeXtWr

30、aPPing=WrapFontSize=*18.667*在BIend中限制Margin,是点击以下图标，然后在ProPCrtiCS属性栏目中可以修改Margin数值。在属性栏可以修改其数值:JkJ而对于HOriZonlalAlignment,VerticalAIignmenI屈性，同样可以通过属性栏进行修改，修改后，在Xaml代码中也会自动更新修改：CTexiBlockMargin=40,73,79,110”Grid.Column=*l*Grid.Row-*I*Text=第1行，第1列TextWrapping=*Wrap*FontSixe=*18.667*HorizontalAiignment

31、=*1.eftA，/在开发过程中，常常会面对不同辨别率的状况下，项目布局应当随之变更，自适应客户端的终端。Grid控件支持，设置“Auto”自动属性，该Grid将随着内部控件内容的增加而变更，这样有利于动态适应控件尺寸。说到这里，有些人可能时布局控件的尺寸设计有一些困惑，这里我具体描述一下，Grid的尺寸设置策略。默认状况下，Grid支持三种尺寸设置策略，第一种，肯定数值尺寸设该设置是最简洁的，但是是最不敏然的。例如上面例程代码中，可以干脆设置列宽度为肯定数值：其次种，自动数值尺寸设该设置对宽度和鬲度赋值“Auto，该Grid尺寸将会随着内部内容的增加而增加，这个设巴方法是最常用的一种；Gri

32、d.ColumnDefinitions)第三种，比例数值尺寸设置:该设置对宽度和高度赋值或者2*,Grid将依据设置的比例倍数进行分割布局：Gri以上设置，将把Grid划分为两列，其次列宽度恒久是第列宽度的3倍。第列恒久是其次列的1/3宽度。在实际项目中，假如须要困难的项目布局，可以将以上三种尺寸设置方法综合应用，达到最敏捷的应用效果。另外须要留意的是Grid支持无限的嵌入，也就是可以嵌套无限个布同控件，这样也供应了特别敏然的布局方式，在Grid中嵌套不同控件。SilYerlighl和WPI-项目设计中，可以运用GrOUP功能，将控件嵌套在同一个布局卜.，便利开发中控件的布局限制。至。行，第O

33、列篙O行，第1列第1行,第。列GrJCM-GOrderSctCurrentSdecbonPathMakeIntoUSCrCOntroUCanvMScrollViewerStackPanef以上对Grid的描述，是Grid控件在开发中常用的功能和属性，假如想要敏捷运用，还须要更多的实践,大家可以依据本文介绍的步骤和方法，多练习几次,就能娴熟驾驭Grid布局控件。布局控件快速入门Canvas上一篇，我介绍rSilverlight控件被分为三种类型，第一类11.ayoutControls（布局控件）其次类：IteControls（项目控件）第三类：UserInteractionControls（用户

34、交互控件）在以上三种控件类型中，布局控件是最堪础的，所以，我从布局控件起先一个快速入门介绍，依据前文所述，我们知道SiNerlight标准控件中，包括以下四种布局控件：Grid控件Canvas控件SlackPanel控件BOrder控件经过上一篇文章的学习，我们已经对Grid有了了解，本文将接着介绍另外一个布局控件CanvaSoCanVa8布局控件，相对于其他布局控件的优势在于可以自由的设定其包含区域内控件的位置。该控件在SiIyerIight嬉戏设计中最为常见，可以实现嬉戏中独立部件限制。运用BIend设置CanYaS很简洁，我在上篇项目基础上，在。行。列和0行1列中分别创建两个Canvas

35、,然后在两个CanVaS中创建两个控件。选中CanVaS后，可以在右边“Properties”属性栏中修改其属性，从属性栏中可以看出，CanVaS是嵌套在Grid中,所以，其位置可以由Grid属性限制。1.ayout选中CanVaS中的控件，可以在右边“Properlies”属性栏中看到该控件在容器CanVaS中的位置,包括左距离，顶距离,以及Z坐标值。其中1.efl可以理解为X坐标值，Top为丫坐标值，ZlndeX（Z坐标值）,假如从3D的角度来理解，是相对于平面的立体值。对于Zlndex的运用，可以看看卜例，假如有两个CanvaS控件，位置坐标相同，会形成覆盖,这里定义ZIndex,值越大

36、的将会在上方覆盖ZIndCX值小的控件.通过这个参数设置，我们可以实现许多不同的布局效果。从上图可以看到Canvas中的了控件，属性栏中，没有Grid控件中的Vargin属性，而是运用1.eft和Top进行定位。依据微软正式的说明，Canvas中的控件，运用Canvas.left和Canvas.top定位,传递该数值到父容器控件Canvas.乘载父容器CanVaS的AttaChedPrOPerty（附加属性），这样意味着父容器CanVaS不能更改了控件的位置。这里引入了AttaChCdProPerty（附加属性），该网性是属父控件的属性，但是可以被子控件进行设置.上一篇，我们提到过布局控件Gr

37、oUP的功能，这里运用CanVaSgroup的功能，将多个Canvas嵌入到一个CanVaS控件中，通过父Canvas控件统一限制子容器控件的属性。这里我创建四个Canvas,每个CanVaS中包含个例形控件。当前，处于相互覆盖状态。按著Shif3分别选中四个CanVaS控件，点击鼠标右键，*Groupinto”-wCanvasu,Carvas3酬2例以3(PinAct证ContainerMokeintoUscrControUGpKoPasteGddCM*GChangelayoutTypeUngroupSUdcPanH选中后，Blend将生成新的CanVaS父控件，将选中的四个Canvas控件,作为子控件。l2345678CanvasHeight=88-Width;100Canvas.1.eft=,1279elpseFill=,FF71FF00,Stroke=rBIackHeight=84MWdth=,