from: http://silverlight.jc.jishu.me/

Expression Blend入门

教程中使用的是Expression Blend 2.0 sp1版本。

2.1. 启动Expression Blend

开始菜单 > 程序 > Microsoft Expression > Microsoft Expresion Blend 2点击动行！如图2.11所示

2.2. 新建项目

主菜单中选择：文件(F) > 新建项目(W)，这会出现“图2.21”的界面，这时在“位置”中选择一个保存的位置，Expression Blend会建立项目需要的一些文件：“bin,obj,Properties,App.xaml,App.xaml.cs,Page.xaml,Page.xaml.cs, sl1.csproj”。并进入了设计界面。这时建立一个Silverlight项目对应生成一个.xap文件。

图2.21

2.3. 切换视图

为了更灵活的办公，设计试图的另换切换可以带来很大的方便。这时您可以按“Shift”快捷键，这时界面属性和状态时间轴面板都就隐藏了，为您承让出更多的空间任意发挥创意了！

菜单中选择：窗品（W）> 活动工作区（A）> 动画工作区（A），这时您的环境布局有了很大的改变。这时您还可以在菜单中选择：窗品（W）> 活动工作区（A）> 设计工作区（A）切换到您想要的布局模式。

平移快捷键：您可以把美工板中任意画上些内容，在工具框中选择工具后，在画面点下鼠标移动后放开即可。然后可把左下角的设为800%。这时按下空格同时，在美工板拖拽，就可以实现移动画布的显示位置。

代码和设计模式切换，菜单中选择：视图（V）> 活动文档视图（V） 下面进行切换代码或设计模式。

设计布局

在左下角的美工板里，有辅助设计视图，分别为“显示/隐藏对齐网格”，“启用/禁用网格线对齐”，“启用/禁用对齐线对齐”。您可以灵活的试试，使工作变的轻松些。

2.4. 颜色

在Silverlight中使用的颜色是8位16进制的，其中前两位是透明颜色。

示例：属性面板改变按钮的字体颜色、背景颜色

第一步：在工具框中选择按钮控件，在美工板中绘制一个按扭，并选中如“图3”所示。

图3

第二步：打开属性面板菜单：窗口（W）> 属性（T），打开属性面板，如“图2.41”所示。

图2.41

其中Background为背景颜色，Foreground为前景（文字颜色）颜色，点击图中所示的Background，然后再在下面的调色板中进行选择想要的颜色。然后点击Foreground，然后在下面选择想要的字体颜色。

2.5. 属性面板

设计手里的法宝，因为在属性面板中，每一个控件（路径、按扭、文本）的内容是不一样的，所以建议朋友自由查看，并找出其中则律才是成功之道。下面更出常见属性的解示，供需要朋友查询：

名称/图标	说明	名称/图标	说明
Background	背景色	BorderBrush	边框颜色
Foreground	字体颜色	OpacityMask	一个作为Brush实现的不透明蒙版，该蒙版应用到此元素所呈现内容任何Alpha通道蒙板。
Fill	控件内部填充的颜色	Stroke	边框的颜色
ZIndex	层次，如果两个控件的某个部分都在一个像素中，其这时会显示ZIndex大的控件像素	ToolTip	鼠标上去控件，提示的信息。
VerticalAlign	竖向对齐	HorizontalAlign	横向对齐
Opacity	透明度	BorderThickness	上下左右里各边框的粗丝。
Visibility	是否可见 值：显示/隐藏	Content	内容，一般为文本框中的数据。
Margin	控件与父控件的距离。	Padding	控件内部的填充距离，填出边距指在对象和其它子控件的边框之间的距离。默认零
Width	宽（像素）	Height	高（例素）
Cursor	当控件放在控件上时，鼠标的形状。	IsHitTestVisible	该值声明是否可以返回此元素作为其呈现内容的某些部分的点击测试记过。
Row	在Grid表格控件中第几行中出现	Column	在Grid表格控件中第几个列中出现
RowSpan	在Grid表格控件中横向跨单格出现，如2，向右出现在两个单元格中。	ColumnSpan	在Grid表格控件中坚向跨单元格显示，如2，向下出现在2个单元格中。
IsTabStop	控件是否包含在Tab键定位中。换句话说就是按Tab时是否在控件中停留焦点。	TabIndex	一个值，该值决定元素的逻辑定位顺序。
Tag	任意对象值，该值可用于存储有着于元素的自定义信息。（换句话说，不用也行）	FontStretch	字体在屏幕上紧缩或加宽的程度。默认值是Normal。
FontStyle	设置字体形状，可以把字体设为斜体	FontWeight	设置字体的粗细程度
RenderTransform	影响此元素的呈现位置的转换信息。呈现转换通常用于动态显示元素的临时效果或者向元素的临时效果。变形器。	IsEnable	是否启用，激活状态。
Clip	用于定义元素内容轮廓的几何图形。几何图形之外的元素或内容将从视觉上在呈现的布局中剪切掉。名词：遮罩！	RenderTransformOrign	由x、y两个数组组成。呈现转换相对于元素 边界的中心点。
MaxWidth	最大宽度约束	MaxHeight	最大高度约束
MinWidth	最小宽度约束	MinHeight	最小高度约束
HorizontalScrollBarVisibility	横向滚动条选项显示	VerticalScrollBarVisibility	竖向滚动条显示选项

2.6. Silverlight常用控件介绍

形状	名称	控件
	Path 路径	可以化出各种各样的图形。
	Button按扭	使用者选择点击，出发程序代码。
	Canvas画布	使用的固定坐标，适应与自由布局。
	CheckBox复选框	通过选中，获取使用者的操作。
	StackPanel堆叠	自动布局的容器控件，使里面的子控件按顺序显示。
	Grid 网格	可以定义多个单元格，使布局更整齐。
	Image 图像	用与显示指定的图像文件。
	Line 直线	直线图形
	Border 边框	容器控件，可以定义丰富的边框，和背景定义。
	Password密码框	用与输入密码
	RadioButton 单选框	用与多个选项只可选一值时使用。
	Path 铅笔	更简单的方式创建Path对象。
	Rectangle 矩形	矩形图形
	ScrollBar 滚动条	一般用在显示一个控件的哪个部份的控件。
	ScrollViewer放大局部器	个允许您滚动其中所含的子元素的元素。该元素仅包含单个子元素。因此在大多数情况下，需要在其中使用堆叠面板、画布面板或网格面板等版式面板。“ScrollViewer”可用于其他控件（如列表框）的模板中，以支持内容滚动功能。当“ScrollViewer”中的内容过多时，可以启用内容剪切。还可以对滚动条进行控制，令其处于不可用、隐藏或可见状态，或者使其仅仅在需要时自动显示。
	ListBox列表控件	显示多个数据，由使用者选择。常用与多的数据，可以绑定。
	Slider 滑块	设置一个最大或最小值，通过滑块设置或获取其比例中的值。
	TextBlock 文本块	显示有格式文本，可在属性框中按需要定义
	TextBox 输入框	可以输入键盘输入的文本框
	Ellipse 椭圆形	创建椭圆形状。
	Media Element 媒体播放元素	支持在线播放mp3、.wma、.wmv格式音频视频格式，支持流媒体mms、rtsp协议。

几何图形

在Silverlight中的失量图形控件主要分为三个：Ellipse椭圆形状、Rectangle矩型形状、Path曲线，供美工朋友实现绘制界面。Blend 提供了标准的矢量绘图功能，以便您能够像在任何矢量图形程序中那样绘制形状、路径和蒙板。如果需要绘制更高级的图形和作品，请考虑使用替代的矢量图形程序（如 Microsoft Expression Design 2）。Expression Design 2 甚至还允许用户将图形导出为 XAML，以便在 Expression Blend 中使用。

绘制形状

在“工具箱”中，单击“矩形”、“椭圆形”或“线”。

在美工板上，从任意点开始拖动以定义矩形或椭圆的宽度和高度，或者定义线的起点和终点，即可绘制矩形、椭圆形或线。请注意，在绘制形状时，宽度和高度尺寸将如下所示：

快捷键：

如果在拖动时按住 Shift，则在绘制矩形时会创建正方形，在绘制椭圆时会创建圆，在绘制线时会将其约束到 15 度角的倍数。

如果在拖动时按住 Alt，将会从中心往外绘制形状，而不是从左上角开始绘制。

绘制直线

用“笔”工具绘制直线

在“工具箱”中，单击“笔”。

在美工板上，单击一次以定义线的起点，再单击一次以定义线的终点。

提示：

若要将线的角度限制为 45 度的倍数，请在单击以定义线的端点时按住 Shift。

用“线”工具绘制直线

在“工具箱”中，单击“线”。

从所需的线起点处开始拖动，然后在所需的线终点处松开鼠标按键。

提示：

若要将线的角度限制为 15 度的倍数，请在绘制线时按住 Shift。

绘制曲线

可以使用“笔”工具绘制曲线形状，从而在美工板上形成路径对象。

绘制曲线

在“工具箱”中，单击“笔”。

在美工板上单击以放置第一个节点，并且有选择地拖动指针以定义该曲线的初始方向（切线）。

对于后续的每个点，在美工板上单击并有选择地拖动指针以创建所需的曲线。

若要封闭路径，请单击所创建的第一个节点。光标应变为笔封闭光标，以指示将封闭该路径。如果希望结束路径而不将最后一个节点连接到第一个节点，请再次单击“笔”工具，或者单击工具箱中或“对象和时间线”下的任意位置。

说明：

拖动操作将定义节点的控制柄，该图柄用于描述线在该节点处的切线。绘制路径期间和完成绘制之后，可以通过更改该节点的控制柄的角度和长度，修改曲线的形状。有关详细信息，请参阅更改曲线的形状和重定义路径上点的控制柄。有关可以针对路径进行的修改的快速参考，请参阅笔和路径选择的使用。

在矩形边角设置圆角

选择要编辑的矩形。

执行下列操作之一：

在美工板上，将鼠标指针移到从矩形左上角伸出的虚线的任意一端，然后在光标显示为圆角半径图柄时进行拖动。

提示：

在拖动任一圆角半径图柄时按住 Shift，即可分别编辑 X 和 Y 圆角半径。

在“属性”面板的“外观”下，更改“RadiusX”和“RadiusY”属性的值。

将形状转换为路径

在“工具箱”中，单击“选择”，然后选择要转换为路径的形状。

在“对象”菜单上，指向“路径”，然后单击“转换为路径”。

说明：

将形状转换为路径后就不能再编辑形状所特有的属性（如，矩形的圆角半径）。而且，如果在转换之前向形状应用了样式，则已转换路径的属性将重置为路径的默认值（无填充画笔，有黑色笔划）。

删除路径的一部分

在“工具箱”中，单击“路径选择”。

选择包含要删除的线段的路径，然后选择该线段使其突出显示。

按 Delete键。

向现有路径添加点

在“工具箱”中，单击“选择”，然后选择要为其添加点的路径。

再次在“工具箱”中单击“笔”。

当悬停在路径上时，“笔”工具将变为以指示可以添加点。单击以添加点。

说明：

如果向曲线段添加点，所产生的点将会定义适当的控制柄以描述曲线在该点处的切线。或者，如果向直线段添加点，则不会定义任何控制柄。

用线连接两条路径

选择要在其间绘制线的路径对象。（若要选择多个对象，请按住 Ctrl 键。）

在“工具箱”中，单击“笔”。

当悬停在某个开放端点上时，“笔”工具将变为以指示可以延伸当前路径。单击并有选择地拖动该端点。附加到该点的线段将突出显示。此时，可以选择添加更多点，然后再将此路径连接到另一条路径。

当悬停在另一个开放端点上时，“笔”工具将变为以指示即将用线连接点，或者，“笔”工具将变为以指示即将闭合该路径。单击并有选择地拖动该端点。

说明：

拖动操作将定义点的控制柄以用于描述线上该点处的切线。绘制完路径之后，可以通过更改该点的控制柄的角度和长度来修改曲线的形状。

更改曲线的形状

在“工具箱”中，单击“路径选择”。

执行下列操作之一：

单击要修改的曲线任意一侧的节点（光标将变为），然后拖动节点或控制柄，以更改曲线的切线（光标将变为）。

单击要修改的曲线任意一侧的曲线段（光标将变为），然后拖动曲线段或控制柄，以更改曲线的切线（光标将变为）。

提示：

通常，在拖动一个控制柄时，会同时调整其相对的图柄，以生成一条光滑、统一的曲线。但是，在拖动控制柄时按住 Alt 以分别调整每个控制柄，即可打断此种关联。

重定义路径上点的控制柄

在“工具箱”中，单击“路径选择”。

选择包含要修改的点（或顶点）的路径。

按住 Alt，然后在光标变为如下光标之一时单击节点，再从节点拖离以重定义控制柄。

光标		执行的操作
	“转换点”光标	使任何尖角点变得平滑（如果已经平滑，则通过单击点来更改曲线的角度）
	“转换段”光标	获取一条段，并使其弯曲通过鼠标位置
	“转换切线”光标	独立于另一边调整选定的切线

或者，可以单击路径的节点或段以显示切线图柄，然后在光标变为“移动切线”光标时单击并拖动某个切线端点。

合并形状或路径

在美工板上选择两个或更多路径或形状。（若要选择多个对象，请按住 Ctrl 键。）

在“对象”菜单上，指向“合并”，然后单击下列选项之一：

若要将所有形状或路径均合并到单一对象中，请单击“相并”。

若要根据相交部分剪切形状或路径，但保留所有未相交部分，请单击“相割”。

若要保留对象的重叠区域并删除不重叠区域，请单击“相交”。

若要保留非重叠区域并删除重叠区域，请单击“相斥”。

若要删除最后选定的形状以外的其他所有选定形状，请单击“相减”。

所产生的对象将取代在合并之前选定的最后一个对象，并采用该对象的属性。

	合并前的两个形状		相交
	相并		相斥
	相割		相减

生成复合路径

选择要转换成复合路径的两条或更多路径。（若要选择多个对象，请按住 Ctrl 键。）

在“对象”菜单上，指向“路径”，然后单击“生成复合路径”。

产生的路径将取代在复合之前选定的最底端路径（在 Z 顺序中），并采用该路径的属性。

两条路径转换为一条复合路径

释放复合路径

在创建复合路径之后，可以随时分离复合路径，但不会还原各个路径对象的原始属性。

选择复合路径。

在“对象”菜单上，指向“路径”，然后单击“释放复合路径”。

创建不透明蒙板

不透明蒙板是一种忽略其颜色并将其不透明度传递给蒙板对象的画笔。在不透明蒙板中不透明的部分，应用蒙板的对象将是不透明的；而在不透明蒙板中透明的部分，应用蒙板的对象将是透明的。可以通过“属性”面板的“外观”部分，为任何对象定义不透明蒙板。有关不透明蒙板的详细信息，请参阅“不透明蒙板”。

使用渐变画笔为对象创建不透明蒙板

在“工具箱”中，单击“选择”，然后在美工板上选择一条路径。

从“属性”面板中的“画笔”下的列表中选择“OpacityMask”，单击“渐变画笔” 选项卡，然后在颜色编辑器的底部选择“线性渐变” 或“径向渐变” 选项。

为了确保蒙板至少允许其背后的一个或多个对象显露出一小部分，请至少将一个梯度停止点的 Alpha 值定义为小于 100% 的值。

使用画笔资源为对象创建不透明蒙板

在美工板上创建一个“Grid”或其他版式面板元素。

双击该面板元素将其激活，以便添加子元素。

添加用于组成不透明蒙板的各种子元素。

对于包括版式面板在内的所有元素，在“属性”面板中的“外观”下调整“Opacity”属性。

完成不透明蒙板的设计之后，在“对象和时间线”下选择该版式面板，然后在“工具”菜单上指向“生成画笔资源”，并选择下列可用画笔类型之一：

生成图形画笔资源 图形画笔使用图形喷涂区域。所使用的图形可以包含形状、文本、视频、图像或其他图形。

生成可视画笔资源 可视画笔使用可视效果喷涂区域。如果该画笔是从包含动画或交互控件的面板创建的，则可以在运行时更新所使用的可视效果。此时，将显示“创建 Brush 资源”对话框。

说明：

画笔资源可由美工板上的任意对象生成，其中包括从 Microsoft Expression Design 2 导入的作品资源。请记住，在将画笔用作不透明蒙板时，将忽略画笔的颜色，因为只有不透明值才会产生蒙板效果。

此时，将显示“创建 Brush 资源”对话框。

在“资源名(关键字)”下，输入关键字名称。其他元素通过此名称引用该资源，从而应用该资源。

在“定义位置”下，选择适当选项，以确定资源的定义范围：

若要使资源能够由应用程序中的所有文档使用，请选择“应用程序”。

若要使资源只能由当前文档使用，请选择“本文档(Window: Window)”。

若要使资源只能由创建资源时所在的对象或其子对象使用，请选择“本文档(对象)”。

若要在一个能够在其他项目中重用的资源字典文件中定义资源，请选择“资源字典”。接下来，可以选择现有的资源字典文件，或者“新建”资源字典文件。

单击“确定”以退出该对话框并创建资源。

若要将画笔资源作为不透明蒙板应用于对象，可以执行下列操作之一：

在“资源”面板中，找到所需的画笔资源，然后将其拖到美工板上要应用蒙板的对象上。

选择要应用蒙板的对象，然后在“属性”面板中的“画笔”下，单击“画笔资源” 选项卡，并选择所需的画笔资源。

布局控件

本章主要抄写自微软MSDN资料!

3.1. 层的概念

层提供了一种快速简便的方法，来创建页面级布局容器以用于组织内容。从 Microsoft Expression Design 2 等其他程序导入内容时，层特别有用。从 Expression Design 2 导入的作品可使用每个导入层的画布面板。

您可以使用“工具”菜单上的“新建层”命令来创建新层。Expression Blend 将根据当前文档的“LayoutRoot”所指定的内容来创建新层。
层的概念图

3.2. 组

组的创建与元件不同，“组”达不到代码重用的目的。组本身是一个容器，可使用Grid或Canvas等容器控件实现，优点可通过移动组而移动组中所有控件，使组内的控件为一个整体。在层面板“对象和时间轴”面板里面清楚看到层次结构，容易找到要选中的对象。
上节中“层的概念”可以由“组”来实现。比如把多个控件组成一个组时，也是把一组控件放在一个层的下面。下面举例：
3.3. 子控件

Ø 子控件的选择
在美工面板中，通过双击“组”可以进入子控件的编辑状态，也可以通过使用“交互”面板中的“对象和时间轴”中，按层的方式一级一级层次展开找到您要找的控件。如图3.31中所示。

图3.31
Ø 子控件的选择

图3.32
创建一个椭圆形和一个Grid（表格）容器控件，然后用鼠标移动椭圆形控件到容器控件的里时，会出现如图3.32中显示的效果，提示您按ALT键拖动以放置进去，这样就是让椭圆形作为Grid的子控件。
3.4. Grid网格控件

与其他用来管理更具体的布局功能的布局容器相比，网格面板是最灵活的布局容器。Microsoft Expression Blend 提供了两种布局编辑模式以配合网格面板使用：
Ø 画布布局模式（默认模式）提供了与在画布面板中进行编辑类似的编辑体验。在这种模式下，当移动已设置的列或行分隔线时，位于这些行和列内的元素会保持不动。
Ø 网格布局模式（高级）提供了更高级的布局功能。在这种模式下，设计时网格面板的行为与网格的运行时行为相似。
Ø 通过单击在选定网格面板时显示在左上角的模式图标，或者通过在“选项”对话框（位于“工具”菜单上）的“美工板”部分内选中或清除“使用网格布局模式”复选框，可以在这两种模式之间切换。

适用于网格面板的布局模式

在“网格”布局模式下，对象在分为三行和三列的网格面板中的排列方式

Ø 定位、调整大小和排列
在网格面板中布局的核心是如何使用对齐、边距以及 Width 和 Height 属性来有效地定位、排列元素以及调整元素大小：
u 对齐 决定元素相对于其父元素的位置。
u 边距 决定控件四周以及子元素外部与面板边界之间的空白区域的大小。
u 宽度和高度 以像素为单位（即，设备无关 单位，每单位约为 1/96 英寸）测量的固定值。可以将这些属性设置为“Auto”，以使子元素根据父面板的大小自动调整大小。

Ø 排列子元素
您可以通过划分网格区域来排列网格中的元素。通过使用列和行分隔线创建一系列行和列，以便定义用于在网格中布置元素的区域，可以达到此目的。当网格面板是文档中的活动元素时，会沿网格的顶端和左侧显示蓝色标尺。使用“选择”工具将鼠标指针移动到标尺上时，指针将变为带有加号 (+) 的箭头，并且会有一条橙色的线显示列或行的添加位置。单击顶端标尺上的任意位置，将在网格中的该位置添加一列；而单击左侧的标尺，会添加一行。
添加列网格分隔线

可以在网格面板中绘制子元素，使其相互重叠。重叠的元素将按照 Z 顺序（绘制元素或将其放到父元素中的顺序）进行显示。可以使用“对象”菜单上的“排序”来更改元素的 Z 顺序；也可以在“交互”面板的“对象和时间线”下右键单击相应的项，指向“排序”，然后单击所需的命令，从而更改元素的 Z 顺序。子元素也可以跨越多列或多行。也可以启用对齐，以便通过与对齐线进行对齐，更好地排列对象。通过对齐，在美工板上拖动对象时，既可以将对象与同一容器元素（如版式面板）中其他对象的边距、基线（对于文本对象）或对齐线（红色虚线）对齐，也可以将对象与网格面板中的列和行分隔线对齐。

Ø 从网格面板中移除行或列
双击顶端或左侧标尺上的网格分隔线，即可将行或列删除。或者，也可以单击网格分隔线，再按 Delete。

Ø 调整行和列的大小
在处于网格面板的“网格布局模式”下时，网格面板顶端和左侧的标尺周围将显示锁图标。可以使用这些锁图标来设置要对网格中的行和列使用的大小调整选项。可以设置行的高度值和列的宽度值。有三个不同的选项可用于在网格中调整行和列的大小，这些选项又会影响子元素在网格中的排列方式。这些调整大小选项如下所示：

u 固定大小 使用像素值 (px)；通过单击锁图标将其设置为“像素调整大小”（锁定位置）来进行设置。固定大小意味着行或列不会调整大小。
u 星形调整大小 使用星号值 (*)；通过单击锁图标将其设置为“星形调整大小”（解锁位置）来进行设置。星形调整大小与 HTML 中的按百分比调整大小的效果相似。
u 自动调整大小 不使用定义的“Width”和“Height”属性；通过单击锁图标将其设置为“自动调整大小”来进行设置。自动调整大小意味着网格面板中的元素将随父元素一起调整大小。

为网格面板中不同的列设置的星形调整大小和自动调整大小

在美工板上选择一个网格分隔线后，可以使用“属性”面板选择调整大小选项，并在使用星形或固定大小调整时调整“Width”属性。也可以在“属性”面板中设置列网格分隔线的“MaxWidth”和“MinWidth”属性。

Ø 定位子元素
在“画布布局模式”下，可以通过直接在美工板上工作并将元素拖动到网格面板中的任意位置（甚至拖到边界以外）来直观地定位元素，也可以在“属性”面板的“布局”下输入精确的位置值。

在“网格布局模式”下，可以通过设置每个元素的边距来设置子元素在网格中的位置。边距指定一个元素相对于定义网格的行和列或网格中的单元格边缘偏移的量。将子元素拖动到网格中时将会设置边距，边距表示从选定元素的边缘到下一条网格线（行或列）的距离。通过单击边距（节点）修饰工具即可设置边距。如果边距修饰工具如或所示是断开的，则表示尚未设置边距。如果边距修饰工具如或所示是封闭的，则表示已经设置边距。若在运行时调整网格的大小，则任何未设置边距的元素将保留在原位，而绑定到边距的元素则会在调整边距的大小时随之移动。
Expression Blend 也会使用简单的规则来设置默认的对齐方式：如果所绘制或调整大小的子元素跨越行或列的中间，则 Width 和 Height 将设置为 Auto；否则它将被固定。也可以设置对齐方式选项，以指示在调整网格大小时是否强制应用边距。对齐方式在网格中显示为实线（已设置对齐方式）或虚线（未设置对齐方式），如下图所示。
网格面板中的一个按钮，已绑定到（已设置边距 – 请注意显示的边距值）左侧和右侧，但未绑定到（未设置边距）顶部和底部

水平对齐
u Left 。在调整大小时，定位到左侧但向右拉伸。
u Center。无论如何调整大小，始终定位到水平中心。
u Right。在调整大小时，定位到右侧但向左侧拉伸。
u Stretch。在调整大小时，同时沿两个水平方向拉伸。

垂直对齐
u Bottom。在调整大小时，定位到底端但向顶端拉伸。
u Center。无论如何调整大小，始终定位到垂直中心。
u Top。在调整大小时，定位到顶端但向底端拉伸。
u Stretch。在调整大小时，同时沿两个垂直方向拉伸。

边距设置 以像素为单位（或设备无关单位，每单位约等于 1/96 英寸）测量的“Top”、“Left”、“Right”和“Bottom”边距的固定值。当您将子元素拖动到网格中时会设置这些值，它们表示从选定元素的边缘到下一条网格线的距离。
Ø 调整子元素的大小
主要有两种用于子元素的调整大小选项：固定大小或自动调整大小。固定大小的元素在“布局”类别中设置了特定的“Width”和“Height”值。自动调整大小的元素将“Width”和“Height”值设置为“Auto”，并且根据父面板的大小自动调整大小。
u MinWidth 和 MinHeight 元素在行或列中可以调整或缩放到的最小大小。
u MaxWidth 和 MaxHeight 元素在行或列中可以调整或缩放到的最大大小。如果不希望设置最大大小，可以将其设置为“Infinity”。
u 剪切内容 决定父面板是否应该剪切其子元素。
3.5. Canvas画板控件

Canvas画布控件是一个自由发挥容器控件，在这些控件中最比较简单的吧。因为其只需要设置绝对的位置（x、y）和Zindex层次。其它都不需要，没有规则。使用此控件比较简单，直接拖动 控件到美工板中，相信您会Grid的同时，这个也会了。哪就略过吧！
3.6. StackPanel 堆叠控件

图3.61
堆叠面板允许您按指定的方向堆叠控件。根据在堆叠面板中定义的属性，内容可以垂直（默认情况）流动或水平流动。堆叠面板主要用在列表控件中，例如用在列表框中，或者组合框的弹出列表中。在堆叠面板中创建或绘制的任意元素都将作为最后一个子元素自动添加到该面板的元素堆叠顺序中。如果添加更多子元素，堆叠面板将剪切（或隐藏）其不能容纳的那些元素。

方向 默认情况下，堆叠面板中的元素将垂直堆叠，但也可以水平堆叠。在“属性”面板中的“布局”下，将“Orientation”设置为“Horizontal(横向)”或“Vertical（坚向）”。

嵌套面板 可以使用嵌套的版式面板（也就是说，可以将版式面板用作子元素）来包含并列的元素。嵌套面板的堆叠方式与父堆叠面板中包含其他任何子元素的方式完全相同。

3.7. Border控件

Border 是一个简单的元素，用于在其他元素周围绘制边框和/或背景。Border 只能包含一个子元素。可能需要在 Border 元素中放入网格面板或画布面板，以便您能够处理多个子元素。
3.8. ScrollViewer控件

ScrollViewer 允许滚动其包含的子元素。它仅包含一个子元素，因此在大多数情况下，都需要在其中使用堆叠面板、画布面板或网格面板等版式面板。每次向 ScrollViewer 中添加子元素时，新的子元素都会覆盖现有的子元素。ScrollViewer 用在其他控件（如列表框）的模板中，以提供对内容滚动的支持。当 ScrollViewer 中的内容太长时，可以选择剪切此内容。还可以控制滚动条是禁用、隐藏、可见，还是仅在需要时自动显示。
3.9. 变形处理

元件、场景、组实现

3.1. 场景、元件逻辑介绍
Silverlight中第一浏览出.xap中的界面时，这个界面可称为主场景，这个主场景从开发的角度来说只不过是一个控件，因为silverlight在HTML中也是充当一个Object控件。所以.xaml文件中的最顶级的控件元素可以是Grid（网格）、UserControl（用户控件）、Canvas（Canvas）等容器控件。从逻辑角度看这个顶级的控件，承载着整个Silverlight应用程序的所有画面，所以我们可以称其为场景。

元件是在场景中放的对象，也是一个.xaml文件。例：一个人在一个“世界”里算是一个元件，世界是场景，人是元件。如果把一个“人”当是场景，一个胳膊就是元件。实体上场景、元件、用户控件都是一个.xaml文件，这些名称可以为其改变逻辑意义。在这里称元件为控件的原因是，Silverlight Runtime Library运行库中己经有很多控件了，为了让思路上他们区分开，所以“元件”更直观的代替了用户创建的.xaml（用户控件，程序员喜欢用的名）。

很明显这是使用了OO面向对象的逻辑，而XML是实现这种逻辑的魔法棒！使用元件的优势：

1、 可以更好的与程序员共鸣，元件与元件独立，思路清晰了！

2、 文件变小，因为每二次使用元件时直接引用即可，小了很多代码的重写。

3、 改一更百，如果改了元件，所有引用元件的地方都会更新。

3.2. Expression Design 中绘制角色
Expression Design是一个专业的失量图形绘画软件，速度和功能上最胜与Expression Blend的绘制，所以有力与美工朋友的发挥。Expression Blend主要设计.xaml程序界面，用与程序代码的直接调用。所以我们可以在Expression Design中设计好，然后放入Expression Blend中进行布局和动画调用。

启动Expression Design工具

选择Windows开始菜单 > 程序 > Microsoft Expression > Microsoft Expression Design 2运行程序，这时出现Expression Design 的界面如图3.21所示。

请选程序中择菜单：文件 > 新建命令，出现图3.22所示界面。请把宽为500像素,高500像素,分辨率：96，后按确定进入设计界面。

这时进入了设计界面，和Adobe Photoshop功能类似，而Photoshop基本使用位图，Expression Design则主要针对失量图形。因为本教程主要针对的是Silverlight，所以Expression Design略说一下，如有不明可找相关书籍学习。

下面列出两个角色，请仿照图3.23中的两个动画的逐帧中的走路时的两个形象在Expression Design中绘画出。也可去/meigong_sl/download_sanmao.html中下载，进行参考。

基本步骤：选择在Expression Design中选择“笔”工具把第一个形象绘出轮廓，选中对象后右键菜单中可进行上下层移动，在属性面板设置路径的填充颜色、边框颜色。

画完第一个形象后，我们直接复制一份一样的，然后进行更改就可。选中第一份，在菜单的编辑 > 复制，再选择编辑 > 粘贴就可。或选中第一个帧的形象，按着Alt键，然后拖动复制出第二个一样的形象。

把第二个形象中按照图2.23中所示的形象的不同之处更改。

3.3. Expression Blend导入“Expression Design中的角色”

在Expression Design设计好两个的帧图形后，在菜单中选择：“文件 > 导出”命令，保存位置和文件名您可自己设定。如图3.31所示的，把要导出的项为“整个文档”，导出属性设为“XAML Silverlight 画布”。点击“全部导出”按钮后，Expression Design会把路径、文本使用Xaml文本代码表达，不可表达的使用图片导出了。

这时可以退出Expression Design程序，打开Expression Blend程序。选择菜单：“文件 > 新建项止(W)”命令，打开“新建菜目”窗口，如图3.32所示。

在“新建项目”窗口中选择“Silverlight 2 应用程序”，并选择保存位置和名称，点击确定，如图3.32所示。

在我的电脑或Windows资源管理器中找到导出的保存位置，然后选中导出的.xaml文件，右键菜单复制或按Ctrl + C快捷键。

转回Expression Blend中，使用“窗口 > 项目”命令可显示隐藏“项目”窗口。在“项目”窗口中的SilverlightApplication5的项目图标上右键菜单中，选择粘贴命令。把导出的.xaml文件导入的项目中。如图3.33所示。

这时在“SilverlightApplication5”下多了一个文件，并且双击打开。下节我们接着再续！

3.4. 创建“元件”
导入到Expression Blend中后，双击“三毛.xaml”文件，进入编辑状态。并Control+A全选，右键菜单复制。

选择菜单“文件 > 新建项（N）”命令，弹出图3.34“新建项”窗口。输入名称 “sanmao.xaml”，选中“包括代码文件”选项，点击确定（这时己经完成建立了一个空白的sanmao的元件）。

这时进入了sanmao.xaml的设计界面，选择菜单“编辑 > 粘贴”命令，这时在sanmao.xaml中出现了您在Expression Design中设计的角色。如图3.41中所示。

请注意：这里的元件在第六章的“动画制作”中继续使用。

3.5. 引用“元件”
Page.xaml文件是新建“Silverlight2应用程序”项目时，模板自动创建的，是Silverlight打开时所显示的界面，是app.xaml.cs中程序入口中定义的。所以现在我们需要page.xaml加载我们创建的元件，下面为操作步骤。

1、在“项目”窗口，双击page.xaml，进入page.xaml文件的设计状态。

2、选择菜单：“项目 > 生成解决方案”命令，更新一下Expression Blend中的元件状态。

3、单击工具栏中的最后一个图标，打开“资源库”面板，如图3.51中界面。在选项卡中选择“自定义控件”，单击“sanmao”后，“资源库”窗口会自动关闭。

4、 在Expression Blend会把“资源库”中找到sanmao元件添加到工具栏中，如图3.52所示。

5、 双击sanmao元件，添加元件到page.xaml场景中。按F5查看效果。

动画制作

本文是接着《元件、场景、组实现》的创建的角色，接着实现的动画。

Silverlight到今才发展了两个版本，在同行业与Flash相比肯定有很多不及之处。新的技术是否有新前景呢？

动画在Expression中的支持是很灵活的，对资源的管理也透明，和Flash有着得大的改变。下面和您一起探讨常用的几种动画类型，在Expression Blend中的实现。

6.1. 逐帧动画
Expression blend2 sp1版本中有对Silverlight 2的动画设计方面完善了很多，但还有很多不完美的地方。在时间轴中无法对控件的Visibility可见/隐藏属性设置（在旭找到其它方法可以时，将会改变这里的错误）。所以这时使用Opacity（透明度）设为0%方法，达到显示/隐藏控件的目的^^下面进入正式操作。

1、打开“项目”窗口，双击打开“sanmao.xaml“文件。

2、单击角色，设为选中状态，选择菜单“对象 > 取消分组”命令，然后我们可以为其重新分组。如图3.34所示。

3、单击空白位置，取消选择。使用鼠标在空白的无对象的地方开始点下鼠标，并拖动选中左边的第一帧的角色后放开，如图3.35中所示。

4、选中后按Ctrl+G，或在菜单中选择“对象 > 组合 > Grid ”命令。让第一个角色为一组，并且同样的方法选中第二个角色。并按Ctrl+G进行分组。选中第一个角色，打开属性面板，名称设为“boy1”，选中第二个角色，属性中名称设为“boy2”。然后使用拖动第二个角色到第一个角色并上与第一个角色重叠，如图3.36所示。

这里我们要实现这两个角色循环出现，一种走路的效果。

6、 把两个图形移动到左上角，点击左上外的图标将Grid的编辑模式设为“网格处于‘画布’布局模式”，然后在“对象和时间轴”窗口中，选中“UserControl”顶层，并将设计画布中的大小设为和两个角色大小一致。如图6.1.61。

7、 打开“交互”窗口，在对象时间轴的面板中，选中boy2层，如图6.1.61中所示：

8、 打开“属性”窗口，把外观面板中的“Opacity（透明度）”设为0。

9、 现在开始创建动画，打开交互窗口中“对象和时间线”面板中单击图标，打开“创建Storyboard资源”，如图6.2.62图中所示。

10、 确定后，进入了run的动画编辑界面。拖动黄色的动画时间位置针可控制动画的间隔时间长度。如图6.2.91。

11、 把时间线移动到“0:00:300”的位置，如图6.2.101所示。

12、 在“对象和时间线”窗口中选择boy1层，在“属性”窗口中设Opacity为0%。再选中把boy2层，在“属性”窗口中设Opacity为100%。

13、 再把时间线移动“0:00:500”位置，在“对象和时间线”中选中boy2层，在“属性”面板中的Opacity设为0%。并选中boy1层，在“属性”窗口中的Opacity设为100%，如图6.1.131。

14、 在动画单击选择中选中“run”，如图6.2.131。

在“属性”窗口中，把RepeatBehavior属性设为“Forever”。使动画为重复播放。

提示：现在您可以在“对象和时间线”窗口中，单击按钮查看一下效果吧^^

15、 在“对象和时间线”窗口中选择“UserControl”顶层，打开属性窗口，点击事件图标如图6.2.131所示。

16、 切换到了事件列表中后，在Loaded输入框中输入“Starting”（可任意），键入回车，程序转入Visual Studio 2008程序代码设计界面。在自动生成的代码中插入代码：

17、保存并关闭Visual Studio 2008，回到Expression Blend中。

6.2. 移动动画
继续上面的操作，选择文件菜单：“文件 > 保存”命令，关闭sanmao.xaml文档。并打开page.xaml文档。

这时可能在page.xaml里面显示可能不正常，腿和手的显示的位置错了，哪是因为大小与元件内的大小不同。点击选择元件，然后选择菜单：“编辑 > 删除”命令删除，双击工具框中的“sanmao”重新添加到画布中，如图6.21所示。

提示：如果工具框中没有“sanmao”元件，可以点击图标打开资源库的“自定义控件”选项卡中找到，列表是选择“sanmao”就会添加的工具框中。

在“交互”窗口中找到“对象和时间轴”面板，单击“sanmao”层右边的眼图标，让设计中的角色暂时就隐藏。

在板中使用“笔”工具画出如图6.22所示的路径。

在“交互”窗口的“对象和时间轴”面板中单击“sanmao”层中的图标，让“sanmao”层显示出来，如图6.23所示。

并单击“sanmao”层选中角色，选择菜单：“对象 > 顺序 > 上移一层”命令。

然后打开“属性”窗口，找到“转换”面板，然后点击“缩放”项项卡，打开缩放控制界面。如图6.24中所示，并把X和Y的值进行设定，使画面中的大小适合路径中的大小。当然这里还有“倾斜、旋转、移位…”操作，可以灵活的试试。

在“工具框”中选择选择工具，单击选中添加到场景中的元件，并拖动到右上角边的位置。如图6.25所示。

接着6.2节中步骤继续操作，打开交互窗口中“对象和时间线”面板，单击“图标按钮”，弹出图6.2.1所示界面。

图6.2.1
名称（关键字）输入“run ”，单点“确定”按钮后会进入“Run”动画的编辑状态。把时间线移到0:00.5000位置，选中“sanmao”层，在“属性”窗口中找到“转换”面板，单击“”转换选项卡，将Y的值设为“256”。如图6.22所示界面。

图6.22
目前效果如图6.23的示。

图6.23
现路径动画
在“交互”窗口中“对象和时间线”中的时间线移动到0:01.000位置。选中“sanmao”层，可以使用鼠标拖动角色中间的圆点，这时的属性窗口中的“转换面板”里，选择“中心点”选项卡，分别X为“-0.533”和Y为“0.633”。如图6.234所示。

图6.234
然后当鼠标移动到角色的左上角外面周围变成时，点击拖动。或在属性面板中的“转换”面板中切换到“旋转”面板，将Angle设为“183.661”，效果如图6.235界面所示。

图6.235
按着以上方法，使用移动的方法将移动画的方法将后面的路径动画完成^^下载示例文件

6.3. 颜色动画
如果还继续6.2节中的操作，选择菜单：“文件 > 关闭项目”命令完成上一个程序！
选择菜单：“文件 >新建项目”命令，选择项目类型为“Silverlight2应用程序”，名称设为“zhezhao”，语言设为Visual C#，位置随意，如图6.31所示。

图6.31
单击“确定”按钮，进入项目的编辑主场景的状态，选择工具框中“矩形”工具，绘制矩形，如图6.32所示。

图6.32
单击“交互”窗口中“对象和时间线”面板中“”图标，名称为“Animation1”并点击确定，创建一个动画。然后将“时间线”移动到0:01.000位置后，使用选择工具，单击绘制区的矩形为选中状态，打开属性面板，将其中Fill设为红色。如图6.33所示。

图6.33
6.4. 遮罩动画制作
接着6.3节续继操作，单击”交互“窗口”对象和时间线“面板中”关闭Storyboard“图标，取消当前动画的编辑状态。在绘制区中选中矩形，打开属性窗口中的画笔面板中选择”OpacityMask“蒙版颜色，然后点击”渐变画笔“选项卡，单击“径向渐变”，如图6.41中所示。

图6.41
单击“交互”窗口中“对象和时间线”面板中“图标”，在列表中单击“Animation1”项，进入“Animation1”的编辑状态。将“时间线”移动到0:02.000位置，单击第一个颜色滑块，将A（透明度）设为0%，如图6.42。

图6.42
在“交互”窗口中“对象和时间线”面板中，将时间线移动到0:03.000位置。把每二个颜色滑块的A（透明度）设为0%。点击“播放”按钮查看效果。

Silverlight对象资源：入门篇

什么是对象Resources(资源)

对象资源是为了对象重用，使用了面向对象的逻辑，使得改一更百的效果。对象资源其实就是一个对象，比如100是一个数字类型的对象，当二个矩形的宽都使用了100这个对象资源时，其两个矩形的宽是100。当更改100对象资源为200后，己应用100的对象资源的矩形的宽同时更新成200。

示例：对象资源的应用

打开Expression Blend 2应用程序，选择菜单：“文件
> 新建项目”命令，弹出图1所示窗口。

图1

设置“选择项目类型”为“Silverlight2应用程序”，输入名称单击确定进入设计界面。在美工板上绘制三个矩形，如图2中所示。

图2

创建对象资源

选择第一个矩形，使用“窗口
> 属性”命令打开属性窗口，将画笔面板中的Fill（填充）颜色设为“#FF3AFF00”（绿色）。单击“将画笔转换为资源”按钮，弹出“创建Brush资源”窗口，如图3所示。

图3

输入名称（关键字）为“GreenColor”，定义位置为“应用程序”。单击确定。

请注意：定义位置表示对象资源所使用的范围，“应用程序”表示整个项目中所有位置都可使用，“本文档”，列表中
“UserControl：…”第一个表示当前文档，向下选择，表示只在某个子控件中才可使用！

将画笔面板中的Strock（边框颜色）设为“#FFFFD900”黄色。单击“将画笔转换为资源”按钮，弹出“创建Brush资源”窗口，“名称（关键字）”设为“YellowColor”，定义位置为“应用程序”，单击确定。

在属性窗口中找到Width（宽），将值设为“136”，单击其右边的“高级属性”图标，在菜单中选择“转换为新资源”，如图4所示。

图4

在弹出的“创建Brush资源”窗口中， “名称（关键字）”设为“矩形统一宽”，定义位置可选择“应用程序”。单击确定。

找到Width下面的Height，将值设为“56”，单击其右边的“高级属性”图标，在菜单中选择“转换为新资源”，在弹出的“创建资源”窗口中，“名称（关键字）”设为“矩形统一高”，定义位置可选择“应用程序”。单击确定。

小结：所创建的资源有：“GreenColor、YellowColor、矩形统一宽、矩形统一高”，下面就要使用这几个对象资源了。

应用对象资源

选择第二个矩形，使用“窗口
> 属性”命令打开属性窗口，找到画笔面板中的Fill（填充）颜色项，单击其右边的“高级属性”图标，在弹出菜单中选择“本地资源 > GreenColor”，如图5中所示。

图5

选择Stroke（边框）颜色，选择“画笔”选项卡，在“本地Brush资源”列表中选择“YellowColor”，如图6所示。

图6

相同的方法找到Width属性，单击其右边的“高级属性”图标，在弹出菜单中选择“本地资源 > 矩形统一宽”，将Height设成“矩形统一高”。选择第三个矩形，使用和第二个矩形一样的方法，Fill（填充）颜色设为“GreenColor”，Stroke（边框）颜色设为“YellowColor”，Width（宽）设为“矩形统一宽”，Height（高）设为“矩形统一高”。

设置对象资源

选择菜单：“窗口 > 资源”命令，打开“资源”窗口，如图7所示。

图7

单击App.xaml左边的图标，显示出我们添加的所有资源信息，如图8所示。

图8

单击GreenColor右边的下拉按钮，并选择颜色为红色，这时会同时更新所有使用GreenColor对象资源的属性都变为了红色。

Silverlight对象资源：控件模板(Template)

模板皮服与样式大为不同，如果把样式为化妆，而模板就是为控件带上面具。因为更换模板后可以让控件的指定完全更变显示内容，这因控件的不同“状态”也有所不同。Silverlight 运行库中有很多控件支持模板换服功能，比如：“Button, Slider,CheckBox,RadioButton…”等。

控件名	说明
TextBox	文本框
PasswordBox	密码输入框
Button	按钮
CheckBox	复选框
RadioButton	单选框
ComboBox	下拉列表
ListBox	列表控件
ScrollBar	滚动条控件
Slider	滑块调节控件
DataGrid	数据表格控件

状态名称	说明
Base	基础状态，用与创建元素。
Normal	默认状态，所在Button 控件中。
MouseOver	鼠标指针悬停在控件上。
Pressed	控件已按下。
Disabled	控件被禁用。
Focused	控件具有焦点。
Unfocused	控件不具有焦点。
Checked	应用于CheckBox控件，当IsChecked 属性为为true时，使用当前状态。
Unchecked	应用于CheckBox控件，当IsChecked 属性为为false时，使用当前状态。
Normal AlternatingRow	具有奇数编号索引的行的默认状态。
Normal Selected	当选中行时触发的状态。
Unfocused Selected	当行处于编辑模式且 DataGrid 丢失焦点时触发的状态。
MouseOver Selected	当选择了行且鼠标指针悬停在该行上时触发的状态。

示例效果

一、创建基础组件

1、选择菜单：“文件 > 新建项目”命令，在弹出的“新建项目”窗口中选择“Silverlight应用程序”，名称设为“mode1”，并点击确定。

2、在工具框中选择“CheckBox控件”，在美工画板中绘制一个大小为197×241的控件，如图1所示。

图1

3、选择“笔”工具，在美工板中绘制一个大小为197×241的小树。然后将绘制的路径选中，使用菜单“对象 > 分组 > Canvas”，将其进行如组。如图2中所示。

图片2

二、创建模板

1、选中在美工板中创建的CheckBox控件，选择菜单命令：“对象 > 编辑控件部件（模板）> 创建空项”，弹出“创建ControlTemplate资源”窗口，如图3所示。

图3

这时将“名称（关键字）”设为“tree1”，并点击确定。

2、使用菜单命令“窗口 > 交互”命令，显示和隐藏“交互”窗口，这时状态面板如图4所示。

图4

当前选定的状态为“Base”，是最基础的状态，下面FocusStates、CheckStates、CommonStates都在此状态之上进行改变。

这时，我们己为CheckBox的默认面貌全部摘下！现在要是按F5测试运行，则发现是一算空白，下面我们将会为CheckBox的选中和无选中的状态时，有新的界面出现，换上新的服装。

三、设置CheckBox控件“无选状态”模板的动画

1、在美工板中选择“小树”，选择菜单：“编辑 > 剪切”命令。

2、选择空白的CheckBox控件，选择菜单：“对象 > 编辑控件部件（模板）> 编辑模板”。

3、选择菜单：“编辑 > 粘贴”，在属性面板中的Margin属性Left、Top、Right、Bottom全设为0。

4、在“交互 > 状态”面板中选择“UnChecked”项，如图5所示。

图5

5、单击”对象和时间线“窗口下的“显示时间线”按钮，拖动时间针到0:00.500的位置。美工板中，使用鼠标双击小树，进入小树的组的编辑状态后，选中第一个叶子，拖动叶子的角将叶子变小，其它叶子同样使用指针选择并拖动边角的方法缩放，如图6中所示。

图6

四、设置CheckBox控件“选中状态”模板的动画

1、在“交互 > 状态”面板中选择“Checked”项，如图7所示。

图7

2、单击”对象和时间线“窗口下的“显示时间线”按钮，拖动时间针到0:00.500的位置。美工板中，使用鼠标双击小树，进入小树的组的编辑状态后，选中第一个叶子。打开属性窗口，在转换面板中，将“转换”选项卡中的X,Y中的值设为8（可任意，只要不和原值一样就可），然后再设成原值，其意是创建关键针记录原位置。转到“缩放”选项卡，将X和Y中的值设为8（可任意，只要不和原值一样就可），然后再设为原值。这种方法同样应用到其它的叶子，如图8中所示。

图8

3、在“交互”窗口中“对象和时间线”面板中单击“返回到[UserControl]范围”按钮，取消模板的编辑状态。

五、模板重用

1、在工具框中选择“CheckBox控件”，在美工画板中绘制一个大小为197×241的控件。

2、选择菜单：“对象 > 编辑控件部件(模板) > 应用资源 > tree1”。即可，效果如图9所示。

图9

3、按F5查看效果，点击小树看看效果吧~

Silverlight对象资源：样式（Style）

介绍

样式Style用与定义某类控件的属性设置集合，创建一个样式以后，可应用到多个控件上。而一个控件使用一个样式。例中：创建了一个Button（按钮）类型的样式，并将这个Button样式的ForeColor设为红和FontSize设为30后，引用此样式的Button按钮都会将ForeColor默认值设为红，FontSize默认值设为30了（如果引用的样式中和控件中同时定义了属性值，会使用控件中设的值）。

创建样式

1、 选择菜单：“文件 > 新建项目”命令，在弹出的“新建项目”窗口中选择“Silverlight应用程序”，名称设为“style1”，并点击确定。
2、 在美工板中绘制三个矩形，如图1所示。

图1
3、 选中第三个矩形，然后选择菜单“对象 > 编辑样式 > 创建空项”命令，弹出“创建Style资源”窗口，如图2所示。

图2
将“名称（关键字）”设为“modelRec”，并点击确定。这时Expression Blend自动创建了样式，并进入样式的编辑状态。
4、 将Fill（填充）颜色设为“#FFFFF65A”黄色，和Stroke（边框）色设为“#FFB3FF56”鲜绿色。Width（宽）设为156，Height（高）设为76。
5、 选择菜单“窗口 > 交互”命令显示出交互窗口，在“对象和时间线”面板中点击按钮退出Style（样式）的编辑状态。如图3所示.

图3
1、 选中第二个矩形，选择菜单“对象 > 编辑样式 > 应用资源 > ModelRec”命令，使得第二个矩形也和第三个矩形一样的颜色和边框和大小。
2、 打开属性窗口，将属性右边的“高级属性选项”按钮，弹出菜单中选择“重置”。同样的方式，将属性右边的“高级属性选项”按钮，弹出菜单中选择“重置”。将属性右边的“高级属性选项”按钮，弹出菜单中选择“重置”。将属性右边的“高级属性选项”按钮，弹出菜单中选择“重置”。
3、 选择第一个矩形，重复第和第步的操作，如图所示效果。

图4

编辑样式

1、 选择菜单“窗口 > 资源”命令，打开资源窗口，点击图标展开Page.xaml > UserControl后，如5所示。

图5
2、 单击ModelRec右边的“编辑资源”按钮，进入“ModelRec”样式的编辑状态。
3、 这时进入了一个按钮复本的样本编辑界面，您可以任意更改属性面板中的值。使得改这一样式，而改多个控件的目的。