《零基础学通Silverlight4》由会员分享，可在线阅读，更多相关《零基础学通Silverlight4（74页珍藏版）》请在金锄头文库上搜索。
1、零基础学通 Silverlight4Expression Blend 入门2.1 概述Expression Blend 是一款功能齐全的专业设计工具，可用来针对基于Silverlight 构建的 Web 应用程序制作精美复杂的用户界面。这样可让设计人员集中精力从事创作，开发人员集中精力从事编程，开发与设计人员可以高效地合作。Expression Blend 和 Visual Studio 共享同一种项目格式，这二种工具分别针对开发和设计人员。2.2 视图Expression Blend 提供了两个应用程序视图来制作场景，第一个是设计视图，在该视图中，可以使用各种工具及各类控件，以可视化的方式创
2、建和操作元素。第二个视图是 XAML 代码视图，在该视图中，可直接编辑 XAML 以创建可视化元素。2.3 工作区Blend 中的工作区包含所有可视界面元素。这些元素包括美工板、面板、工具面板、工作区配置、创作视图和菜单。Expression Blend 具有两个工作区：“设计”工作区和“动画”工作区。您可以通过按 F6 在二者之间进行切换。“设计”工作区主要用于常规创作。“动画”工作区将“时间”面板移动到美工板下，以便有更多的空间来显示时间线。下面以“设计”工作区来说明，见图 2.3-1。图 2.3-1 (1)文档窗口 此区域显示当前打开的所有 XAML 文档。(2)项目面板、“资产”面板、
3、“状态”面板、“对象和时间线面板(3)工具面板(4)美工板(5)属性面板和资源面板(6)设计视图、XAML视图和拆分视图。您可以使用设计视图来创作文档，以便在美工板上呈现直观的画面;也可以使用标记视图通过可扩展应用程序标记语言 (XAML) 本身创作文档。拆分视图将显示设计视图和XAML两个视图，并且您可以使用视图菜单上的拆分视图方向项来更改窗口的方向。2.4 主要面板2.4.1 工具条在应用程序中创建和修改对象。可以通过使用鼠标选择工具并在美工板上进行绘制来创建对象。也可以使用图柄在美工板上更改对象，或者可以在属性面板中修改对象的属性，见图 2.4-1。图 2.4-1(1)选择工具 用于选择
4、和路径选择(嵌套对象和路径段)对象和路径。(2)视图工具 用于调整美工板的视图，例如平移、缩放以及调整三维内容的摄影轨迹。(3)画笔工具 用于处理对象的可视属性，例如转换画笔、绘制对象，或者选择某个对象的属性以应用于另一个对象。(4)对象工具 用于在美工板上绘制最常用的对象，例如路径、形状、版式面板、文本和控件。(5)资产工具 用于访问资产面板并显示库中最近用过的资产。资产面板列出了您可以在美工板上绘制的所有控件、样式、媒体、行为和效果。虽然最常用的控件会显示在工具面板中，但资产面板列出了可用于 Microsoft Expression Blend 项目的所有控件。 通过单击工具面板底部的资产
5、，或单击窗口菜单上的资产，您可以打开资产面板。若要向美工板添加控件、样式或媒体对象，请执行下列操作之一：选择了类别或子类别后，单击列表中的某个项，然后使用指针在美工板上绘制对象。选择了类别或子类别后，双击列表中的某个项，将新对象插入到活动版式面板中。选择了类别或子类别后，将列表中的某个项拖到美工板上。若要在美工板上向对象添加行为或效果，可以在美工板上或在对象和时间线面板中将行为或效果拖到对象上。2.4.2 对象和时间线面板查看美工板上所有对象的层次结构，选择对象以便您可以对其进行修改，创建和修改动画时间线，见图 2.4-2。图 2.4-2(1)对象视图 显示文档的可视化树。 您可以使用对象视图
6、的层次结构特点深入到不同的详细信息级别。可以在对象视图中添加层，以在美工板上更好地组织对象，使它们能够作为组进行锁定和隐藏。可以通过将拆分栏向锁定列的左边拖动到所需宽度，来调整对象视图的宽度。(2)情节提要选取器和情节提要选项，显示已创建的情节提要的列表。情节提要选项 在弹出菜单中提供选项，您可以使用这些选项来复制、反转、删除、重命名或关闭情节提要。也可以创建新的情节提要。(3)播放控件 提供可用于在时间线中导航的情节提要控件。也可以拖动播放指针来定位(或推移)时间线。(4)播放指针在时间线上的位置 按毫秒 (HH:mm:xxx) 显示当前时间。也可以直接在此字段中输入时间值以跳到特定的时间点
7、。精度取决于对齐选项中设置的对齐分辨率。(5)播放指针 指示动画所在的时间点。可以在时间线中拖动播放指针，以便预览动画。这种技术称为推移。(6)时间线缩放 设置时间线的缩放分辨率。通过放大，可以编辑动画的更多细节;而通过缩小，可更全面地显示在更长时间段内发生的情况。如果在放大之后无法在所需的时间位置设置关键帧，请验证设置的对齐分辨率是否足够高。(7)时间线上设置的关键帧 指定特定时间点上属性值的变化。关键帧具有不同的级别。为Angle元素设置的关键帧为简单关键帧;为RenderTransform元素设置的关键帧为复合关键帧;为DetailsPane对象设置的关键帧为对象级关键帧。2.4.3 项
8、目面板查看与当前打开项目相关联的所有文件，打开项目文件以供编辑，管理项目文件，见图 2.4-3。用于筛选项目文件列表的搜索框包含 Silverlight 应用程序项目和相应网站项目的解决方案。项目引用，如 DLL 文件。主文档的代码隐藏文件。 Silverlight 应用程序的网站项目图 2.4-32.4.4 属性面板通过使用 Microsoft Expression Blend 中的属性面板，可以查看和修改在美工板上或在对象和时间线下选定的对象的属性。如果通过操作鼠标使用对象图柄直接在美工板上修改对象，则属性面板中将反映属性的更改。反之亦然，即：如果通过使用属性面板中转换下的值编辑器来缩放对
9、象，则会在美工板上缩放对象，见图 2.4-4。图 2.4-4选定对象的名称和类型。切换按钮，用于显示属性或事件视图。搜索框，用于筛选依据输入的文本显示的属性。用于选择画笔编辑器的选项卡。可以将画笔下的选定属性设置为无画笔、纯色画笔、渐变画笔、平铺画笔或画笔资源。带颜色滑块的颜色选取器。可展开和折叠的外观、布局、公共属性等类别。2.4.5 调整布局(1)向工作区中添加面板,在窗口菜单上，单击要添加到工作区中的面板的名称。已显示在工作区中的面板将出现在窗口菜单上，旁边有复选标记。(2)工作删除面板,在面板的右上角处，单击关闭。(3)调整面板大小,将指针移到希望调整大小的面板的边框上。当出现水平光标
10、或垂直光标 时，您可以拖动边框来调整面板的大小。(4) 重置为默认视图,在修改工作区(如缩放工作区或调整面板大小)之后，可以轻松地返回到工作区的默认视图。默认视图取决于用户所要配置的工作区是设计工作区还是动画工作区。例如，在动画工作区中，“交互”面板将移动美工板的下面，这样可提供更多的空间来查看时间线。在“窗口”菜单上，单击“重置工作区布局”。(5) 对齐和对齐网格,对齐网格在美工板上提供了一组水平网格线和垂直网格线。如果已启用“网格线对齐”，则当您在美工板上拖动对象时，该对象将与最近的水平和垂直网格线对齐或靠齐。显示对齐网格，执行下列操作之一：(1)在美工板的左下角，单击“显示对齐网格” 。
11、若要隐藏对齐网格，请再次单击该按钮以显示禁用图标 。(2)在“工具”菜单上，单击“选项”。在“选项”对话框中，确保在左侧选择了“美工板”，然后选中“显示对齐网格”复选框。单击“确定”。启用网格线对齐，执行下列操作之一：(1)在美工板的左下角，单击“启用网格线对齐” 。若要禁用网格线对齐，请再次单击该按钮以显示禁用图标 。(2)在“工具”菜单上，单击“选项”。在“选项”对话框中，确保在左侧选择了“美工板”，然后选中“网格线对齐”复选框。单击“确定”。范例 示范使用 Expression Blend 设计时钟项目 Ch4_Exam4_1 设计一个时钟外观，如图 2.4-10。图 2.4-101)启
12、动 Microsoft Expression Blend。2)在“新建项目”对话框中，单击“项目类型”下的“Silverlight Application”3)在名称旁边，键入项目的名称。该名称将成为项目文件夹的名称和应用程序命名空间的名称。4)在位置旁边，验证要在其中保存项目的文件夹的路径。若要选择其他文件夹，请单击浏览。5)在语言下拉列表中，选择编程语言 Visual C#。6)单击确定。此时，将创建 Silverlight 项目，并将其打开以供编辑。您现在即可在项目的主页 (MainPage.xaml) 中创建内容。7)在工具面板中，选择其中矩形工具8)将矩形拖放至画布上，以建立大约宽
13、220 像素，高 240 像素宽高的长方形。9)变更图形属性。 按一下 属性，然后指定圆形的填色为黑色，再设定不透明度为 30%，以提供阴影效果。图 2.4-1110) 将矩形的名称变更为 Rect111)请选取阴影图形，然后按 CTRL+C 时行复制，再按 CTRL+V 贴上。并命名为 Rect2。12)将新图层移到老图层的左上角，设置纯色画笔，颜色为#FFE4E5F4，不透明度为 100%，并命名为 Rect2。图 2.4-1213) 将矩形拖放至画布上，以建立大約宽 180 像素，高 210 像素宽高的长方形，命名为 Rect3。图 2.4-1314)采用线性渐变，选取渐变工具，变更渐变
14、的方向，让它由左上方渐变至右下方，颜色从#FF34353F 到#FFE9E9F7。图 2.4-1415)将矩形拖放至画布上，以建立大约宽 140 像素，高 180 像素宽高的长方形，命名为 Rect4，填充颜色为#FFEBE5E516)选取 椭圆形 工具，然后將新椭圆形拖曳至时钟正面上方的中心点，并命名为 Ellipse1，高度和宽度都设为 13 像素，将笔刷粗细设为 3 像素，并將笔刷设为黑色。图 2.4-1517)选取 线 工具画秒针，宽度为 5 像素，选纯色画笔，颜色为红，调整至合适大小，颜色重设为黑，画时针，分针。分别命名为Line1Line2Line318)F5 运行，可呈现效果。布
15、局和导航3.1 布局原则Silverlight 提供了一个灵活的系统用于在页面上布置界面元素、支持绝对定位和相对定位的布局。布局用于描述在屏幕上元素的过程，为了使界面更具有吸引力、更实用、更灵活，必须花大量的时间来设计界面，Silverlight使用容器来安排布局。每个容器有它自己的布局逻辑，Silverlight 注重于创建更加灵活的布局，开发人员能够创建与显示分辨率和窗口无关的、在不同的显示器上可以很好地进行缩放的用户界面，当窗口内容发生变化时可以调整它们自己。布局由所使用的容器决定，在容器中添加其它元素，一个典型的布局应当遵循以下的原则： 容器可以被嵌套。Grid 面板是功能最强大的布局控件，可以包含其他布局容器，这些容器以分组来安排元素，如文本框、列表框、工具条、按扭等 不使用屏幕坐标指定元素的位置。各元素应当由它们的容器，根据它们的尺寸、顺序以及其他特定于具体布局容器的信息进行安排。 不应显式设定元素的尺寸。元素应当可以自动改变以适合它们的内容。 容器与元素动态使用多余的空间。如果空间允许，布局容器尽可能为它所包含的元素设置更合适的尺寸。所有容器类都是从 Panel 抽象类中派生出来的，Panel 类提供了少量的共同成员，如下二个常用公有属性： Background 属性为面板背景着色的画刷。 Children 属性是在面板存储的元素集
