Expression_Blend实例中文教程

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

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

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

4、列教程是讲述 Blend，这里就不再对Web过多描述，在后文用到时，我们将详细讲述。既然本系列文章讲述Blend，我想我们应该多了解一些Blend方面的知识。我们一直在说Blend强大，具体它强大在哪里呢？首先作为交互性设计工具，Blend解决了传统开发中开发人员和设计人员配合不容易协调的瓶颈。无论是桌面应用还是Web应用，越来越注重用户体验性，而程序代码设计和美工设计也逐渐被细分化，而两者在项目中的配合是至关重要的，相信有不少开发人员都有过相同的经历和感触，程序开发人员和美工设计人员一遍又一遍的修改框架希望能够达到完美匹配。Blend正是针对该问题推出了一系列的解决方案，例如，在Blend中

5、编辑Silverlight或WPF项目UI代码的同时，也会直接绑定到Visual Studio中，实现双向修改代码功能； 在Blend中，可以快速导入PhotoShop图形和Illustrator矢量图，方便项目UI设计。 其次，Blend是一款通用的设计工具，支持设计跨平台跨浏览器的Silverlight和WPF应用项目，为了简化设计人员的工作量，Blend支持一个简单的可重复利用的元素叫做行为（Behaviors），设计人员可以直接应用不同的行为到项目中，无需编写任何代码，例如，可以直接应用拖拉行为到项目，让项目支持拖拽控件。 在微软Expression官方网站，有大量的行为（Behavi

6、ors）代码下载，免费使用。最后是快捷方便的设计方式，以及软件项目原型设计工具SketchFlow。 在Silverlight中, VisualStateManager的编辑是很复杂的，如果仅靠Visual Studio进行代码编辑，是非常浪费时间和精力的事情，如果使用Blend进行编辑，会大大的提高效率。 另外，使用Blend进行控件的样式和模板设计也是非常方便的，我们将在后文详细描述。 值得一提的是SketchFlow，该项目是现在为数不多的优秀建模工具之一。使用该工具，开发人员可以快速的建立项目原型，以Silverlight的方式展示给客户或者项目团队成员，我们将在后文详细描述。通过以上

7、的描述，我们可以清楚明白，从事Silverlight和WPF项目开发，Blend是必不可少的设计工具，学会了Blend会在开发过程中达到事半功倍的效果。 也正式以上的原因，才会有了本系列文章教程，本系列教程旨在为了让更多的开发人员了解和学习Expression Blend的使用，希望能够让更多的开发人员加入到Silverlight和WPF开发行列。 界面快速入门上一篇主要介绍Expression系列产品，另外概述了Blend的强大功能，本篇将用Blend 3创建一个新Silverlight项目，通过创建的过程，对Blend进行快速入门学习。在开始使用Blend前，首先需要进行Silverlig

8、ht的开发环境搭建，在银光中国网（SilverlightChina.Net）有篇“轻松建立Silverlight开发环境”，其中列出了建立Silverlight开发环境的几个步骤，另外，我在过去发布过一篇“Silverlight开发工具集合”文章，也列出了Silverlight项目开发必装工具软件，这里对于开发环境的搭建，我就不再赘述。Silverlight开发环境搭建成功后，我们将通过实例介绍Blend入门操作，我使用的Blend是英文版本，我将对照翻译成中文。首先使用Blend按照以下步骤创建一个新的Silverlight项目，1. 点击左上角的“File - New Project”，这

9、时会弹出一个新建项目窗口，如下图在上图可以看到Blend支持创建两个类型的项目，一个是Silverlight，另一个是WPF，本系列主要讨论Silverlight，所以，我们选择“Project Type -Silverlight”，在选中Silverlight类型后，在弹出窗口右边会出现四个项目模板，（1） Silverlight 3 Application + Website 该选项是“创建Silverlight 3客户端应用其中包含Website项目”，选择该选项后，Blend会自动创建Web项目在同一个解决方案下，编译后运行，会在Web项目中产生测试页面，在客户端显示Silverlig

10、ht客户端。（2） Silverlight 3 Application该选项是“创建Silverlight 3客户端应用”，选择该选项后，Blend仅创建Silverlight客户端，编译后，自动生成一个测试页面。（3） Silverlight 3 Control Library该选项是“创建Silverlight控件类库”，选择该选项后，Blend会创建Silverlight空白类库，主要用于创建Silverlight自定义控件。（4） Silverlight 3 SketchFlow Application 该选项是“创建Silverlight 3 SketchFlow应用”，选择该选项后

11、，Blend会创建Silverlight 3 SketchFlow应用。在项目模板窗口下，是创建项目的名称，项目路径和项目后台语言支持。本文将创建一个Silverlight 3 Application + Website + C# 完整项目，方便以后解释项目细节。创建新项目后，可以在Blend看到当前工作去，我将重要的几个部分添加了标识，下面详细描述各个部分的作用：A部分: 是菜单选项；B部分：是DockPanel菜单，鼠标点击后，会弹出对应的窗口，例如“对象和时间线”或者“项目管理”等；C部分：是工具面板菜单D部分：项目面板上图可以看出在SilverlightBlendDemo解决方案下，有

12、两个项目：1. SilverlightBlendDemo: 该项目是Silverlight客户端项目，主要承载Silverlight客户端页面和控件；2. SilverlightBlendDemoSite: 该项目是Silverlight服务器端项目，主要承载服务器端代码，例如WCF Service或者DAL数据层代码；E部分：文档切换栏, 该栏目显示所有打开的项目文件，可以自由切换；F部分：主要工作区，叫做美工板，所有页面和控件设计都在该区域；G部分：视图和代码切换栏，该栏目提供三个选项，第一个是视图选项，第二个是代码选项，第三个是视图和代码同时显示选项；H部分：属性和资源选项栏，从这里可以

13、设置控件属性和对应项目资源；I部分：使用该部分缩放F部分美工板，启动动画效果，设置控件对齐选项以及查看文件注释内容；以上窗口部件是创建项目后，默认显示的几个窗口，另外还有几个常见的窗口部件，也介绍一下：1. 首先介绍一下菜单扩展部分，当你把鼠标选中C部分菜单按钮，会弹出扩展菜单按钮，功能如下：2. 在扩展菜单中，最后一项是Silverlight资源工具按钮 ，点击选中后，会弹出以下窗口，其中包含所有控件，样式集合，行为代码集合以及动画效果和媒体文件集合。在设计的时候，如果添加新控件，可以从这个选项进行选择。3. Object and Timeline - 对象和时间线面板，可以使用该面板对页面

14、控件对象进行分层管理，另外也可以对当前对象进行动画设计，详细动画设计，将在下文描述。4. 属性设置面板，在上文H部分，我们介绍了属性和资源选项框，这里我把属性框单独列出来，在美工面板创建一个按钮控件后，选中该按钮，在属性面板中显示各种属性，例如背景，笔刷等等，从这个面板可以不用输入代码，直接设计控件属性。5. 控件模板样式资源面板。从该面板，选择设计控件样式。6. 调试结果面板，在该面板显示调试错误信息和输出信息；今天写到这里了，下次继续写，下面是网友经常问的几个Blend问题，我做了统一回答，希望能帮到更多朋友。 常见的几个问题：为什么Blend中没有相对应的Silverlight控件？答：

15、在Blend中没有Silverlight控件，需要确认是否安装Silverlight Tools for Visual Studio 2008 Sp1 和 Silverlight Toolkit控件扩展包，在Silverlight Tools中包含了基础控件包，而Silverlight Toolkit是扩展控件。为什么Blend中没有智能提示功能？答：确认Blend的版本，在Blend2.5之前的版本，Blend不支持IntelliSense。为什么Visual Studio 2008 Sp1没有Silverlight项目视图设计界面？答：从Silverlight 3开始，微软屏蔽了Visua

16、l Studio 2008 Sp1的Silverlight项目视图设计功能，推荐使用Blend 3进行Silverlight项目视图设计。 在Visual Studio 2010中，重新恢复了Silverlight项目视图设计功能。布局控件快速入门Grid上一篇对Blend 3开发界面进行了快速入门介绍，本篇将基于Blend 3介绍Silverlight控件。对于微软开发工具熟悉的朋友，相信您很快就熟悉Blend的开发界面和控件。XAML概述Silverlight的控件绘制是由XAML语言进行支持的。什么是XAML语言？简单的说，XAML（Extensible Application Mark

17、up Language ）是一款基于XML的描述性语言，中文也叫做可扩展应用程序标记语言。 该语言是由微软开发创建，主要用于构建WPF和Silverlight应用程序用户界面。XAML是Silverlight用户界面设计的基础，使用XAML可以定义Silverlight对象以及属性，相对于后台语言定义控件来说，XAML提供了非常简洁的方式声明控件，有时仅需一句代码就可以完成一个控件的构造。不仅如此，XAML还提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面，而这种实现方式和ASP.NET中的"代码后置"模型非常类似。这样有效的分离了设计人员和开发人员，在同一个项

18、目中，对其进行分工前台程序界面设计和后台逻辑设计，使项目到达协作开发的目的。所以说，XAML是Silverlight用户界面设计的基础，作为Silverlight设计人员，应该对XAML语言熟练掌握，由于本系列是介绍Blend，这里对XAML语言不再进行细述，如果需要系统化学习XAML语言，请访问本文后提供的参考学习资源。对于XAML了一定的认识，下面进入本文正题，Silverlight控件入门。对于Silverlight控件，微软进行了简单分类，第一类： Layout Controls（布局控件)第二类： Item Controls （项目控件)第三类： User Interaction C

19、ontrols（用户交互控件)在随后的几篇中我将介绍这些控件，首先我将介绍布局控件，从名字上可以看出是控制用户界面总体格式的一类控件。通过这类控件，可以很轻松的对用户界面进行编排，在这类控件中，也可以放置其他的项目控件和用户交互控件，达到控制其位置的目的。如果您有HTML的设计经验，也可以简单的把布局控件理解为HTML中的Table标签。在任何一个Silverlight或者WPF项目中，都离不开布局控件，这里我将细述布局控件。在Silverlight标准控件中，包括以下四种布局控件：Grid控件Canvas控件 StackPanel控件Border控件由于该控件在Silverlight和WPF

20、项目开发中占有非常重要地位，所以，我将详细介绍Grid控件的使用和常用属性：Grid控件Grid控件可以认为是Silverlight项目设计中，使用的最多的布局控件，在使用Blend或者Visual Studio 2008 SP1创建Silverlight项目的时候，默认控件代码中就包含了Grid.1 <UserControl2 xmlns="3 xmlns:x="4 x:Class="SilverlightBlendDemo.MainPage"5 Width="640" Height="480">6

21、7 <Grid x:Name="LayoutRoot" Background="White"/>8 </UserControl>在我个人使用的经验中理解，Grid控件和HTML的Table是最近似的。设计人员可以根据需要，自定义设置行数和列数，放置不同的内容和控件到每行每列中。Blend对Grid的设计支持非常的直接和简单。这里我还是用上一篇创建的例程项目，SilverlightBlendDemo，如果你没有该项目，可以在本文后面下载，或者按照上一篇介绍方法创建。在Blend中创建行和列，只需要将鼠标放在界面窗口上深蓝色带上，就可

22、以看到黄色的分割线，鼠标点击后，行和列即可产生。按照上面说的方法，我将创建一个2行2列的效果如下：创建完成后，会以蓝色现条显示在设计界面，而XAML代码则会自动生成，1 <Grid x:Name="LayoutRoot" Background="White">2 <Grid.ColumnDefinitions>3 <ColumnDefinition Width="0.505*"/>4 <ColumnDefinition Width="0.495*"/>5 </G

23、rid.ColumnDefinitions>6 <Grid.RowDefinitions>7 <RowDefinition Height="0.479*"/>8 <RowDefinition Height="0.521*"/>9 </Grid.RowDefinitions>10 </Grid>这样看来Grid设计相当简单，在布局设计过程中，为了方便那些没有设计经验的开发人员，Blend提供了两个布局设计模式：- Canvas界面设计模式，该设计模式是默认设计模式，- Grid界面设计模式点

24、击该按钮，会自动切换界面设计模式在上图中可以看到，在Grid Layout Mode下，每行和每列前都会显示一个“锁”状图标，默认是非锁定状态，点击后，会锁定该行或者列，从代码中可以看出明显变化。当我点击锁定一列，代码将变化为：1 <Grid x:Name="LayoutRoot" Background="White">2 <Grid.ColumnDefinitions>3 <ColumnDefinition Width="323"/>4 <ColumnDefinition/>5 <

25、;/Grid.ColumnDefinitions>6 <Grid.RowDefinitions>7 <RowDefinition Height="0.479*"/>8 <RowDefinition Height="0.521*"/>9 </Grid.RowDefinitions>10 </Grid>这里可以看到ColumnDefinition的宽度变成了固定数字，后面不再有“*”号，这样也就表明，该列不再根据内容的改变而改变，一直以固定宽度显示。相反，如果在数值后，有“*”号，该行或者列宽

26、度将会跟着内容的改变而改变。再次点击锁定的列，会显示自动获取宽度状态图标：代码则自动改变为Width="Auto"：1 <Grid x:Name="LayoutRoot" Background="White">2 <Grid.ColumnDefinitions>3 <ColumnDefinition Width="Auto" MinWidth="323"/>4 <ColumnDefinition/>5 </Grid.ColumnDefinit

27、ions>6 <Grid.RowDefinitions>7 <RowDefinition Height="0.479*"/>8 <RowDefinition Height="0.521*"/>9 </Grid.RowDefinitions>10 </Grid>根据上文所述，Grid如同HTML中的Table，也就是说我们可以按照使用Table的方法，设置Grid的内容。例如，我想放置四个TextBlock控件在Grid中，首先点击左边工具栏菜单然后在设计界面进行简单的绘制，创建四个Text

28、Block控件：选中任一个TextBlock控件，在右边“properties”属性栏则会显示出该控件的所有属性，这里我们将关注Layout栏属性这里我们可以看出，Blend已经自动将控件绘制到相对应的列和行中。通过该属性设置，可以轻松的控制控件在Grid中的位置。这里我们看一下后台代码：1 <Grid x:Name="LayoutRoot" Background="White">2 <Grid.ColumnDefinitions>3 <ColumnDefinition Width="0.505*"/&g

29、t;4 <ColumnDefinition Width="0.495*"/>5 </Grid.ColumnDefinitions>6 <Grid.RowDefinitions>7 <RowDefinition Height="0.479*"/>8 <RowDefinition Height="0.521*"/>9 </Grid.RowDefinitions>10 <TextBlock Margin="46,71,73,90" Text=&

30、quot;第0行，第0列" TextWrapping="Wrap" FontSize="18.667"/>11 <TextBlock Margin="40,71,57,90" Grid.Column="1" Text="第0行，第1列" TextWrapping="Wrap" FontSize="18.667"/>12 <TextBlock Margin="46,73,73,110" Grid.Row=

31、"1" Text="第1行，第0列" TextWrapping="Wrap" FontSize="18.667"/>13 <TextBlock Margin="40,73,79,110" Grid.Column="1" Grid.Row="1" Text="第1行，第1列" TextWrapping="Wrap" FontSize="18.667"/>14 </Grid&g

32、t;在以上代码中可以看到，Blend省略了一些布局代码，如果在布局控件中，如果控件不填写Grid.Column,Grid.Row,则默认值为0.所以说，第一个TextBlock的位置被默认为：<TextBlock Margin="46,71,73,90" Text="第0行，第0列" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" FontSize="18.667"/>第二个Textblock位置则为：<Te

33、xtBlock Margin="40,71,57,90" Grid.Row="0" Grid.Column="1" Text="第0行，第1列" TextWrapping="Wrap" FontSize="18.667"/>第三个TextBlock位置则为：<TextBlock Margin="46,73,73,110" Grid.Row="1" Grid.Column="0" Text="第1

34、行，第0列" TextWrapping="Wrap" FontSize="18.667"/>第四个TextBlock位置代码不变，是完整的。也就是说，从Xaml代码部分，我们可以通过Grid.Column,Grid.Row两个属性控制控件的位置。对于Grid的布局，上面的方法是最通用而且最简单的。 但是在项目中，我们还会使用一些常见属性，配合Grid控制布局，例如Margin，Horizontal Alignment，Vertical Alignment以及Group方法等。熟悉CSS的设计人员，应该知道Margin的作用，主要是控制控件

35、内部对应布局控件的边距的。该属性的赋值方法在CSS中有详解，这里不再赘述，简单的赋值，Margin = "0,1,2,3",表示：对布局控件左边的距离为0对布局控件的顶端距离为1对布局控件的右边距离为2对布局控件的下端距离为3其中0，1，2，3是随意设置的数值，这样就控制了控件在布局控件中的具体位置。对于Horizontal Alignment，Vertical Alignment属性，也是CSS中出现过的属性，简单的说是对齐属性，水平对齐和垂直对齐。这两个属性默认有四个值：左边/顶端对齐中间对齐右边/下端对齐拉伸在上例的代码中，我们可以看到Margin属性都在改变，相对G

36、rid对应行和列的位置都有不同，你可以尝试修改一下，相关数值，查看其位置更改情况。<TextBlock Margin="46,71,73,90" Text="第0行，第0列" Grid.Row="0" Grid.Column="0" TextWrapping="Wrap" FontSize="18.667"/><TextBlock Margin="40,71,57,90" Grid.Row="0" Grid.Colum

37、n="1" Text="第0行，第1列" TextWrapping="Wrap" FontSize="18.667"/><TextBlock Margin="46,73,73,110" Grid.Row="1" Grid.Column="0" Text="第1行，第0列" TextWrapping="Wrap" FontSize="18.667"/><TextBlock M

38、argin="40,73,79,110" Grid.Column="1" Grid.Row="1" Text="第1行，第1列" TextWrapping="Wrap" FontSize="18.667"/>在Blend中控制Margin，是点击以下图标，然后在Properties属性栏目中可以修改Margin数值。在属性栏可以修改其数值：而对于Horizontal Alignment，Vertical Alignment属性，同样可以通过属性栏进行修改，修改后，在Xa

39、ml代码中也会自动更新修改：<TextBlock Margin="40,73,79,110" Grid.Column="1" Grid.Row="1" Text="第1行，第1列" TextWrapping="Wrap" FontSize="18.667" HorizontalAlignment="Left"/>在开发过程中，经常会面对不同分辨率的情况下，项目布局应该随之改变，自适应客户端的终端。Grid控件支持，设置“Auto”自动属性，该G

40、rid将随着内部控件内容的增加而改变，这样有利于动态适应控件尺寸。说到这里，有些人可能对布局控件的尺寸设计有一些困惑，这里我详细描述一下，Grid的尺寸设置策略。默认情况下，Grid支持三种尺寸设置策略，第一种，绝对数值尺寸设置；该设置是最简单的，但是是最不灵活的。例如上面例程代码中，可以直接设置列宽度为绝对数值：<Grid.ColumnDefinitions><ColumnDefinition Width="100"/><ColumnDefinition Width="50"/></Grid.ColumnDef

41、initions>第二种，自动数值尺寸设置；该设置对宽度和高度赋值“Auto”，该Grid尺寸将会随着内部内容的增加而增加，这个设置方法是最常用的一种；<Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>第三种，比例数值尺寸设置；该设置对宽度和高度赋值"*"，或者"2*",Grid将按照设置的比例倍数进行分割布局；<Grid.ColumnDefinitions><Co

42、lumnDefinition Width="*"/><ColumnDefinition Width="3*"/></Grid.ColumnDefinitions>以上设置，将把Grid划分为两列，第二列宽度永远是第一列宽度的3倍。第一列永远是第二列的1/3宽度。在实际项目中，如果需要复杂的项目布局，可以将以上三种尺寸设置方法综合应用，达到最灵活的应用效果。另外需要留意的是Grid支持无限的嵌入，也就是可以嵌套无限个布局控件，这样也提供了非常灵活的布局方式，在Grid中嵌套不同控件。Silverlight和WPF项目设计中，可

43、以使用Group功能，将控件嵌套在同一个布局下，方便开发中控件的布局控制。以上对Grid的描述，是Grid控件在开发中常用的功能和属性，如果想要灵活运用，还需要更多的实践，大家可以按照本文介绍的步骤和方法，多练习几次，就能熟练掌握Grid布局控件。布局控件快速入门Canvas上一篇，我介绍了Silverlight控件被分为三种类型，第一类： Layout Controls（布局控件)第二类： Item Controls （项目控件)第三类： User Interaction Controls（用户交互控件)在以上三种控件类型中，布局控件是最基础的，所以，我从布局控件开始一个快速入门介绍，根据前

44、文所述，我们知道Silverlight标准控件中，包括以下四种布局控件：Grid控件Canvas控件 StackPanel控件Border控件经过上一篇文章的学习，我们已经对Grid有了了解， 本文将继续介绍另外一个布局控件Canvas。Canvas布局控件，相对于其他布局控件的优势在于可以自由的设定其包含区域内控件的位置。该控件在Silverlight游戏设计中最为常见，可以实现游戏中独立部件控制。使用Blend设置Canvas很简单，我在上一篇项目基础上，在0行0列和0行1列中分别创建两个Canvas，然后在两个Canvas中创建两个控件。选中Canvas后，可以在右边“Propertie

45、s”属性栏中修改其属性，从属性栏中可以看出，Canvas是嵌套在Grid中，所以，其位置可以由Grid属性控制。选中Canvas中的控件，可以在右边“Properties”属性栏中看到该控件在容器Canvas中的位置，包括左距离，顶距离，以及Z坐标值。其中Left可以理解为X坐标值，Top为Y坐标值，ZIndex（Z坐标值），如果从3D的角度来理解，是相对于平面的立体值。对于ZIndex的使用，可以看看下例，如果有两个Canvas控件，位置坐标相同，会形成覆盖，这里定义ZIndex，值越大的将会在上方覆盖ZIndex值小的控件。通过这个参数设置，我们可以实现很多不同的布局效果。从上图可以看到，

46、Canvas中的子控件，属性栏中，没有Grid控件中的Margin属性，而是使用Left和Top进行定位。根据微软官方的解释，Canvas中的控件，使用Canvas.left和Canvas.top定位，传递该数值到父容器控件Canvas，重载父容器Canvas的AttachedProperty（附加属性），这样意味着父容器Canvas不能更改子控件的位置。这里引入了AttachedProperty（附加属性），该属性是属于父控件的属性，但是可以被子控件进行设置。上一篇，我们提到过布局控件Group的功能，这里使用Canvas group的功能，将多个Canvas嵌入到一个Canvas控件中，通

47、过父Canvas控件统一控制子容器控件的属性。这里我创建四个Canvas，每个Canvas中包含一个圆形控件。当前，处于相互覆盖状态。按着Shift，分别选中四个Canvas控件，点击鼠标右键，“Group into” - > “Canvas“，选中后，Blend将生成新的Canvas父控件，将选中的四个Canvas控件，作为子控件。1 <Canvas Margin="14,58,130,104" Grid.Row="1">2 <Canvas Height="88" Width="100"&

48、gt;3 <Ellipse Fill="Red" Stroke="Black" Height="84" Width="83" Canvas.Left="11" Canvas.Top="2"/>4 </Canvas>5 <Canvas Width="100" Height="88" Canvas.Left="64">6 <Ellipse Fill="#FF0081FF

49、" Stroke="Black" Height="84" Width="83" Canvas.Left="11" Canvas.Top="2"/>7 </Canvas>8 <Canvas Height="88" Width="100" Canvas.Left="127">9 <Ellipse Fill="#FF71FF00" Stroke="Black"

50、; Height="84" Width="83" Canvas.Left="11" Canvas.Top="2"/>10 </Canvas>11 <Canvas Height="88" Width="100" Canvas.Left="192">12 <Ellipse Fill="#FFF4FF1C" Stroke="Black" Height="84" Wid

51、th="83" Canvas.Left="11" Canvas.Top="2"/>13 </Canvas>14 </Canvas>现在选中父控件的Canvas，将Opacity修改为40，可以看到，所有子控件的Opacity统一修改为40.效果如下：如果，我们分别设置父控件下的四个Canvas控件Opacity属性，即可看到各自Canvas将按照自己属性为主，效果如下：Canvas通过Group的功能，可以实现多个控件实现相同方式下动画效果，在Silverlight开发中也是常用的功能。Canvas布局控

52、件快速入门就介绍到这儿了。布局控件快速入门StackPanel,ScrollViewer和上一篇，介绍了Canvas布局控件在Blend中的使用。本篇继续介绍布局控件StackPanel,ScrollViewer和Border。相对于Grid和Canvas来说，StackPanel,ScrollViewer和Border是比较简单的布局控件，实现的功能相对来说单一。首先来说说StackPanel控件。从字面意思理解，是堆栈面板的意思。堆栈内的所有内容将按照顺序进行排列，排列方式分水平排列和垂直排列两种方式。对于StackPanel的使用，主要是对控件水平或者垂直排列，使用该控件排列控件，比Gr

53、id设置表格控制要容易很多。例如，在Grid中要设置Row和Column，然后将控件放置到各个Cell中，才能达到对齐布局的效果，而在StackPanel中只要使用Orientation属性控制就可以了。这里我们简单演示一下，在Blend中应用StackPanel选中StackPanel后，在主窗口画一个StackPanel容器。然后选择按钮控件，在StackPanel中，画一个高为30的按钮。然后选中该按钮，复制创建三个新按钮，在复制粘贴的时候，会发现，每次创建一个新按钮会在布局中自动向下排列。这点和Grid和Canvas不同，在Grid和Canvas中复制粘贴控件，将会自动覆盖上一个控件，

54、需要用ZIndex控制其位置。选中StackPanel，查看右边Properties属性栏，其中Layout中多了一个Orientation选项，默认为Vertical垂直排列。点击展开下拉菜单，可以看到Horizontal水平排列，选中后，以上四个按钮分布将自动以水平方式排列。和Grid相同，StackPanel也支持Margin和Horizontal Alignment，Vertical Alignment属性，这里我就不在赘述，详细大家可以看“布局快速入门Grid”ScrollViewer控件，是从WPF中移植来的，针对大内容控件的布局控件。由于该控件内仅能支持一个子控件，所以在多数情况

55、下，ScrollViewer控件都会和Stackpanel，Canvas和Grid相互配合使用。如果遇到内容较长的子控件，ScrollViewer会生成滚动条，提供对内容的滚动支持。创建一个ScrollViewer控件，会看到该控件右边自带滚动框，我们将上例拖拽进新创建的ScrollViewer控件，Blend会提示按“Alt”将拖拽控件放入ScrollViewer，放置成功后，由于内容过长，ScrollViewer的滚动条自动激活。对于ScrollViewer的滚动条，可以通过Properties属性栏进行设置控制，可以禁用，隐藏，或者设置仅在需要时候自动显示。HorizontalScrol

56、lBarVisibility和VerticalScrollBarVisibility属性：Auto = 仅在需要时候自动显示滚动条Disabled = 禁用滚动条Hidden = 隐藏滚动条Visible =显示滚动条Border控件，是最简单的布局控件，也是最早期的一款Silverlight布局控件，该控件允许用户创建一个带有边框的布局控件。使用Border控件唯一需要注意的是该控件内仅能支持一个子控件。在Blend中，绘制Border控件同样很简单，将上例中的StackPanel拖拽进新创建的Border控件。Blend会提示按着“Alt”是将控件放置在Border中，否则将修改Margi

57、n进行重新布局。这里我们按着Alt，完成拖拽。Blend自动生成XAML代码如下：1 <Border Margin="154,17,22,80" Grid.Column="1" Grid.Row="1" BorderBrush="Black" BorderThickness="1">2 <StackPanel Margin="20,12,25,15" Orientation="Vertical">3 <Button Heigh

58、t="30" HorizontalAlignment="Left" Margin="8,0,0,0" Width="103" Content="Button"/>4 <Button Height="30" HorizontalAlignment="Left" Margin="8,0,0,0" Width="103" Content="Button"/>5 <Button H

59、eight="30" HorizontalAlignment="Left" Margin="8,0,0,0" Width="103" Content="Button"/>6 <Button Height="30" HorizontalAlignment="Left" Margin="8,0,0,0" Width="103" Content="Button"/>7 </Sta

60、ckPanel>8 </Border>其中BorderBrush是边框颜色；BorderThickness是边框的宽度；修改以上两个属性，同样可以在右边的Properties属性栏进行修改。至此，Silverlight的布局控件，我们已经介绍完了，笔者建议，在学习的过程中，还要配合实践，这样会达到熟练的效果。项目控件和用户交互控件快速入门前文我们曾经描述过，微软把Silverlight控件大致分为三类：第一类： Layout Controls（布局控件)第二类： Item Controls （项目控件)第三类： User Interaction Controls（用户交互控件

61、)前面几篇我们已经对第一类布局控件在Blend中的应用进行了描述。本文将介绍Item Controls，也称为项目控件;和User Interaction Controls，也称为用户交互控件.Item Controls （项目控件)在实际项目中，我们经常会遇到处理数据集合或者数组的情况，而处理数据集合最好的方法就是使用“Binding”绑定。正如您所知道的，在ASP.NET中，就已经应用了“Binding”绑定的概念，其优势在于节省了大量的开发时间，降低了开发难度。而在Silverlight中微软加强了Binding功能，并且使用Item Controls（项目控件）来显示和处理数据集合和数

62、组类型数据。Silverlight提供了四种标准项目控件，分别是ListBox，ComboBox，TabControl和TreeView。 下面，我将演示在Blend中如何使用这些控件。根据上文描述，使用Item Controls前，首先需要绑定数据，而绑定数据需要有相关数据源，所以，我们需要先定义数据源。本文依旧使用前文例程SilverlightBlendDemo，在Silverlight客户端创建一个新的Usercontrol，ItemControlsDemo.xaml.创建完毕后，主设计窗口将呈现ItemControlsDemo的UI设计界面，看右边属性栏，有三个Tab，其中包含“Dat

63、a”，选中Data，该窗口允许用户在Blend中定义数据源，导入XML格式数据，定义外部数据源等功能。首先，我们选择“Define New Sample Data."，定义一个新的例程数据源，名字使用默认SampleDataSource。其中，Define in是指定该数据源的应用访问，默认为整个项目，当然，如果作为测试，也可以指定该数据源仅应用于当前打开文档。这里，我们使用默认设置。创建完成后，在右边Data数据栏中，会出现SampleDataSource选项，而在该数据源下包含一个集合“Collection”，该集合默认有两个属性“Property1”和“Property2”。在

64、项目应用中，可以根据需要再添加新的属性。由于我们添加的是例程数据源，Blend已经在该数据源中添加了例程数据，根据需求，我们可以对例程数据进行修改。首先选择Collection，然后点击编辑例程数据，可以看到，Blend生成的默认例程数据，这里我们可以进行简单修改，Property1默认类型String，Property2默认类型为Boolean，这里我想修改Property2为String，类型修改为String，还可以修改该数据列的具体的格式：为了方便演示我修改两个默认属性名，分别为，“网站”和“网址”点击OK，例程数据建立完成。下面，看看在Blend中如何使用Item Controls装载数据源。首先我们测试ListBox：在左边工具栏，选择ListBox控件，然后在ItemControlsDemo.Xaml设计页面，画一个ListBox。然后从右边Data栏中，选中Collection，拖拽到ListBox空白处，ListBox即可自动绑定例程数据。Blend会自动生成XAML代码，对例程数据进行绑定。1 <