《零基础学通Silverlight4.doc》由会员分享，可在线阅读，更多相关《零基础学通Silverlight4.doc（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 中的属性面板，可以查看和修改在美工板上或在对象和时间线下选定的对象的属性。如果通过操作鼠标使用对象图柄直接在美工板上修改对象，则属性面板中将反映属性的更改。反之亦然，即：如果通过使用属性面板中转换下的值编辑器来缩放对象，则会在美工板上缩放对象，见图2.4-4。图2
9、.4-4选定对象的名称和类型。切换按钮，用于显示属性或事件视图。搜索框，用于筛选依据输入的文本显示的属性。用于选择画笔编辑器的选项卡。可以将画笔下的选定属性设置为无画笔、纯色画笔、渐变画笔、平铺画笔或画笔资源。带颜色滑块的颜色选取器。可展开和折叠的外观、布局、公共属性等类别。2.4.5调整布局(1)向工作区中添加面板,在窗口菜单上，单击要添加到工作区中的面板的名称。已显示在工作区中的面板将出现在窗口菜单上，旁边有复选标记。(2)工作删除面板,在面板的右上角处，单击关闭。(3)调整面板大小,将指针移到希望调整大小的面板的边框上。当出现水平光标或垂直光标 时，您可以拖动边框来调整面板的大小。(4)
10、 重置为默认视图,在修改工作区(如缩放工作区或调整面板大小)之后，可以轻松地返回到工作区的默认视图。默认视图取决于用户所要配置的工作区是设计工作区还是动画工作区。例如，在动画工作区中，“交互”面板将移动美工板的下面，这样可提供更多的空间来查看时间线。在“窗口”菜单上，单击“重置工作区布局”。(5) 对齐和对齐网格,对齐网格在美工板上提供了一组水平网格线和垂直网格线。如果已启用“网格线对齐”，则当您在美工板上拖动对象时，该对象将与最近的水平和垂直网格线对齐或靠齐。显示对齐网格，执行下列操作之一：(1)在美工板的左下角，单击“显示对齐网格” 。若要隐藏对齐网格，请再次单击该按钮以显示禁用图标 。(
11、2)在“工具”菜单上，单击“选项”。在“选项”对话框中，确保在左侧选择了“美工板”，然后选中“显示对齐网格”复选框。单击“确定”。启用网格线对齐，执行下列操作之一：(1)在美工板的左下角，单击“启用网格线对齐” 。若要禁用网格线对齐，请再次单击该按钮以显示禁用图标 。(2)在“工具”菜单上，单击“选项”。在“选项”对话框中，确保在左侧选择了“美工板”，然后选中“网格线对齐”复选框。单击“确定”。范例 示范使用Expression Blend设计时钟项目Ch4_Exam4_1设计一个时钟外观，如图2.4-10。图2.4-101)启动Microsoft Expression Blend。2)在“新
12、建项目”对话框中，单击“项目类型”下的“Silverlight Application”3)在名称旁边，键入项目的名称。该名称将成为项目文件夹的名称和应用程序命名空间的名称。4)在位置旁边，验证要在其中保存项目的文件夹的路径。若要选择其他文件夹，请单击浏览。5)在语言下拉列表中，选择编程语言Visual C#。6)单击确定。此时，将创建 Silverlight 项目，并将其打开以供编辑。您现在即可在项目的主页 (MainPage.xaml) 中创建内容。7)在工具面板中，选择其中矩形工具8)将矩形拖放至画布上，以建立大约宽220像素，高240 像素宽高的长方形。9)变更图形属性。 按一下 属性
13、，然后指定圆形的填色为黑色，再设定不透明度为30%，以提供阴影效果。图2.4-1110) 将矩形的名称变更为Rect111)请选取阴影图形，然后按 CTRL+C 时行复制，再按 CTRL+V 贴上。并命名为Rect2。12)将新图层移到老图层的左上角，设置纯色画笔，颜色为#FFE4E5F4，不透明度为100%，并命名为Rect2。图2.4-1213) 将矩形拖放至画布上，以建立大約宽180像素，高210 像素宽高的长方形，命名为Rect3。图2.4-1314)采用线性渐变，选取渐变工具，变更渐变的方向，让它由左上方渐变至右下方，颜色从#FF34353F到#FFE9E9F7。图2.4-1415)
14、将矩形拖放至画布上，以建立大约宽140像素，高180 像素宽高的长方形，命名为Rect4，填充颜色为#FFEBE5E516)选取 椭圆形 工具，然后將新椭圆形拖曳至时钟正面上方的中心点，并命名为Ellipse1，高度和宽度都设为 13像素，将笔刷粗细设为 3像素，并將笔刷设为黑色。图2.4-1517)选取 线 工具画秒针，宽度为5像素，选纯色画笔，颜色为红，调整至合适大小，颜色重设为黑，画时针，分针。分别命名为Line1Line2Line318)F5运行，可呈现效果。布局和导航3.1 布局原则Silverlight提供了一个灵活的系统用于在页面上布置界面元素、支持绝对定位和相对定位的布局。布局
15、用于描述在屏幕上元素的过程，为了使界面更具有吸引力、更实用、更灵活，必须花大量的时间来设计界面，Silverlight使用容器来安排布局。每个容器有它自己的布局逻辑，Silverlight注重于创建更加灵活的布局，开发人员能够创建与显示分辨率和窗口无关的、在不同的显示器上可以很好地进行缩放的用户界面，当窗口内容发生变化时可以调整它们自己。布局由所使用的容器决定，在容器中添加其它元素，一个典型的布局应当遵循以下的原则： 容器可以被嵌套。Grid面板是功能最强大的布局控件，可以包含其他布局容器，这些容器以分组来安排元素，如文本框、列表框、工具条、按扭等 不使用屏幕坐标指定元素的位置。各元素应当由它
16、们的容器，根据它们的尺寸、顺序以及其他特定于具体布局容器的信息进行安排。 不应显式设定元素的尺寸。元素应当可以自动改变以适合它们的内容。 容器与元素动态使用多余的空间。如果空间允许，布局容器尽可能为它所包含的元素设置更合适的尺寸。所有容器类都是从Panel抽象类中派生出来的，Panel类提供了少量的共同成员，如下二个常用公有属性： Background属性为面板背景着色的画刷。 Children属性是在面板存储的元素集合。几种布局面板中，最常用的是布局控件是Canvas、StackPanel、Grid，Grid使用的是精确坐标，StackPanel则是使用相对坐标完成布局定义的，在该面板包含的
17、元素使用Margin等属性，最复杂的是Grid，当Grid只有一行和一列的时候，它在功能上等同于一个Canvas，只是Canvas只可以使用绝对坐标而Grid可以使用Margin等相对属性，另外Grid还可以仿StackPanel布局方式，只是使用Grid模访的过程不如直接使用StackPanel更方便。范例 示范使用综合布局实际中，往往将各类布局综合使用，他们可以相互包容，以达到预期设计效果，图3.4-1 是Ch6_Exam4_1运行的结果。图3.4-1如下所示，MainPage.xaml的主要XAML标记摘录如下，其中已添加完整的批注 1 2 3 4 5 6 7 8 91011121314
18、151617181920212223242526272829303132333435363738394041424344454647484950515253 !定义三行三列，中间一行和一列作为边框 !标题放Border元素内，定义背景渐变效果 为各车型ListBoxItem 的SelectionChanged事件处理编写如下程序代码，在Panel中动态加载XAML界面的实例。 1 2 3 4 5 6 7 8 91011121314151617181920212223242526272829303132void SelectionChanged_Click(object sender, Sele
19、ctionChangedEventArgs e) ListBoxItem Car=(ListBox)sender).SelectedItem as ListBoxItem; switch (Car.Content.ToString() case 高尔夫6: this.MyPanel .Children .Clear ();!加载高尔夫6界面，创建Golf.xaml的实例并将它添加到MyPanel中 this.MyPanel.Children.Add(new Golf (); break; case 新明锐: this.MyPanel .Children .Clear (); this.MyPa
20、nel.Children.Add(new Mingrui (); break; case 速腾1.4T: this.MyPanel .Children .Clear (); this.MyPanel.Children.Add(new Shuteng (); break; case 福克斯两厢: this.MyPanel .Children .Clear ();!-加载福克斯两厢界面，创建Fukesi.xaml的实例并将它添加到MyPanel中 - this.MyPanel.Children.Add(new Fukesi (); break; case 科鲁兹: this.MyPanel .Ch
21、ildren .Clear (); this.MyPanel.Children.Add(new Kouluz (); break; 在App.xaml定义全局新式资源 1 2 3 4 5 6 7 8 91011121314151617 定义各车型介绍的xaml界面，下面为福克斯的Fukesi.xaml文件，其它车型文件类同。123456 3.2 导航模板在 Silverlight 应用程序中使用 Frame 和 Page 控件可以实现应用程序导航。页面控件表示内容的分立部分。框架用作页面控件的容器，并使页导航非常简便。在任一时刻，框架只显示一个页面的内容。以编程方式或通过用户操作导航到新页时，
22、框架中显示的页将会更改。可以将 Silverlight 应用程序的根视觉效果设计为包含可导航内容和永久用户界面 (UI) 组件(例如页眉、页脚和导航边栏)的组合。使用Silverlight 导航应用程序模板创建新项目时，该模板会生成一个包含永久 UI 组件的 XAML 文件并为可导航内容生成一个框架。Visual Studio 中的Silverlight导航应用程序模板：“Silverlight Navigation Appication”，默认的模版向我们提供了一个MainPage.xaml页面并给出了一个大致的主页视图。导航框架XAML代码如下： 1 2 3 4 5 6 7 8 91011
23、12131415161718192021222324252627282930313233 Frame是一片可以被导航的区域。可以指定一个默认的视图，任何导航都可以在那片区域被触发,Frame 类提供用于页导航的方法和属性。将 Source 属性设置为要显示的页的 URI，或调用 Navigate 方法并将该页的 URI 作为参数来传递。 UriMapper元素了定义了导航终端，可以用/Home终端来映射/View/Home.xaml终端。 HyperlinkButton一超链按钮，其TargetName定义了目标框架区域。HyperlinkButton 控件位于框架外时，可以通过将 Navig
24、ateUri 属性设置为映射到某一页的 URI 并将 TargetName 属性设置为该框架的名称来启用对该框架内资源的导航。 各个Page页面，在Views目录下，如默认的Home.xaml、About.xaml等。变换特效变换特效在动画中尤其有用，可以改变Silverlight对象的形状的方法，使用变换为图形对象提供旋转、缩放、扭曲和移动的特效，可以改变元素的尺寸和位置，达到奇异的效果。变换特效不仅适用于图形，也适用于控件。4.1旋转变换旋转变换RotateTransform用于将图形对象旋转一个指定的角度，在平面内控制图形旋转，需要两个参数，一个是旋转的中心，另一个旋转的角度，因此具有如下3个属性。 Angle：旋转指定角度值，默认值为0 CenterX：旋转的水平中心点，默认值为0 CenterY：旋转的垂直中心点，默认值为0如： 1 2 3 4 5 6 7 8 910
