【Asp.net精品源码栏目提醒】:网学会员为广大网友收集整理了,【精品】Silverlight基础教程 - 其它资料,希望对大家有所帮助!
Silverlight 教程第一部分:使用 Silverlight 2 和 VS 2008 创建“Hello World”程序【原文地址】Silverlight Tutorial Part 1: Creating Hello World with Silverlight 2 and VS 2008【原文发表日期】 Friday February 22 2008 5:57 AM这是 8 个系列教程的第一部分,这系列示范如何使用 Silverlight 2 的 Beta1 版本建造一个简单的 Digg 客户端应用。
这些教程旨在按顺序阅读,帮着解释 Silverlight 的一些核心编程概念。
使用 VS 2008 创建一个新的 Silverlight 应用我们来开始我们的 Digg 应用的开发,先选择 Visual Studio 2008 中的文件-新项目菜单项,使用新项目对话框创建一个“Silverlight Application” (注:你需要在 Beta1 发布后,下载和安装 VS 2008 的 Silverlight工具才能得到这个支持):我们将该项目命名为“DiggSample”。
在点击 OK 按钮后, Visual Studio 会显示另外一个对话框,允许我们选择我们是否只要创建一个 Silverlight 应用项目,或者还要加一个服务器端的
ASP.NET Web 项目到包含 Silverlight 应用的解决方案里去:在这个例程里,我们将选择还要添加一个
ASP.NET Web Application 项目到解决方案里去,并将它命名为“DiggSample_WebServer”。
在点击 OK 之后,Visual Studio 会为我们创建一个解决方案,里面包含一个Silverlight 客户端应用和一个
ASP.NET web 服务器端应用:如果我们做一次编译的话, Visual Studio 会自动把编译好的 Silverlight 应用拷贝到我们的 web 服务器项目中去,不需要手工的步骤或配置。
VS 为我们创建的默认的 web 服务器项目包含一个
ASP.NET 网页和一个静态的 HTML 网页,我们可以用来运行和测试其中的 Silverlight 应用。
注: Silverlight 应用可用于任何 web 服务器(包括 Linux 上的 Apache),宿主于静态 HTML 文件或者任何服务器端生成的网页(包括 PHP Java Python Ruby 等等)中。
在这个 Digg 样例中,我们不会写任何服务器端的代码,而是将使用 Silverlight 的跨域 networking 功能,来直接访问 Digg 服务的 API。
我选择创建一个
ASP.NET web 服务器项目,主要是想获得自动的部署,并且使用它内置的 web 服务器来做测试。
理解 Silverlight 应用里都有些什么在默认情形下,一个新建的 Silverlight 应用项目包含一个 Page.xaml 和一个 App.xaml 文件,以及与它们相关的后台(code behind )类文件(可以用 VB C Ruby 或 Python 来编写):XAML 文件是 XML 文本文件,可以用来用声明的方式指定 Silverlight 或 WPF 应用的用户界面。
XAML还可更广泛地用来用声明的方式代表.NET 对象。
App.xaml 文件一般用来声明譬如象画刷和样式对象这样可在整个应用中共享的资源。
App.xaml 的后台Application 类可用来处理应用级的事件,象 Application_Startup Application_Exit 和Application_UnhandledException。
Page.xaml 文件,在默认情形下,是在应用激活时装载的起始的 UI 控件。
在其中,我们可以使用 UI 控件来定义我们的用户界面,然后在 Page 的后台代码类里处理它们的事件(详见后文)。
在我们编译 DiggSample 项目时,在默认情形下,Visual Studio 会把代码和 XAML 标识编译进一个标准的 .NET 程序集文件中,然后把它和任何静态的资源(象图片或我们想要包含的静态文件)包装进硬盘上一个叫做“DiggSample.xap”的文件中去:“.xap”文件(其音发作“zap”)使用标准的 .zip 压缩算法来减小客户端下载的大小。
一个“hello world”.NETSilverlight 应用(用 VB 或 C编写的)其大小大概为 4KB。
注: Beta1 版本中的一些控件是在程序集中实现的,如果使用这些控件的话,这些程序集会重新发布于应用的 .xap 文件中(会增加应用的大小,超出 4KB 的基底大小)。
在 Digg 应用中使用的所有控件将会在Beta2 版和最终版的核心 Silverlight 下载包中,这意味着完成的应用的总下载大小大概只在 6-8KB 范围内(所以是非常小,下载起来非常快)。
要宿主和运行一个 Silverlight 2 应用,你可以把标签加到任何标准的 HTML 页面中(不需要JavaScript )并将其指向 .xap 文件。
Silverlight 然后就会自动下载这个.xap 文件,生成实例,将其宿主于浏览器中的 HTML 网页中。
这是跨浏览器(Safari FireFox IE 等),跨平台(Windows Mac and Linux)工作的。
HTML 和
ASP.NET 测试网页(内含标签,其引用指向我们的 Silverlight 应用)是在我们创建项目时为我们自动添加的,这意味着我们只要点击 F5 编译,运行和测试就可以了。
学习如何添加控件和处理事件现在我们的 Digg 应用什么都不做,在运行它时,只会调出一个空白的网页。
我们可以打开项目中的 Page.xaml 文件来改变它,往里面加些内容:我们将开始改变网格的背景颜色,在其中声明一个 Button 控件。
我们将给按钮一个x:Name属性,设置其值为“MyButton“,这会允许我们在后台代码类中用编程的方法引用它。
我们还将设置它的 Content Width 和Height 属性:当我们运行应用时,我们的按钮将会在网页的中间出现,内含”Push Me“内容文字,象下面这样:要给我们的按钮加行为的话,我们可以给它加一个Click事件处理函数。
我们可以在
源码视图中通过输入事件的名称来做:然后就会提示我们在我们的后台代码类中该使用的事件处理函数:然后我们可以输入一个要用的新事件处理方法的名称,或者只要点击回车键,使用默认的命名约定来命名事件处理方法:然后 VS 就会自动地在我们的后台代码类文件中创建一个占位的事件处理函数实现。
我们可以使用这个事件处理函数在按钮被点击时,用新的消息更新它的内容:在做完上面的改动后,我们可以重新运行应用,再次点击按钮,现在它的内容就会被更新为“Pushed”的消息:以下的步骤在完成我们的应用之前,我们还有不少工作要做... :-下一步,是配置我们的应用的总的 UI 布局结构,在其中安排更多的控件。
要做那个,就让我们跳到下一个教程《使用布局管理》。
Silverlight 教程第二部分:使用布局管理 木野狐译【原文地址】Silverlight Tutorial Part 2: Using Layout Management【原文发表日期】 Friday February 22 2008 5:55 AM这是 8 个系列教程的第 2 部分,这个系列示范如何使用 Silverlight 2 的 Beta1 版本来创建一个简单的 Digg客户端应用。
这些教程请依次阅读,将有助于您理解 Silverlight 的一些核心编程概念。
理解布局管理Silverlight 和 WPF 都支持一种灵活的布局管理系统,能让开发者和设计师轻松的定位 UI 上的控件。
该布局系统对显式指定坐标的控件支持固定的定位模型;除此之外,还支持一种更为动态的定位模型,控件和布局能随着浏览器的大小改变而自动改变其大小和方位。
在 Silverlight 和 WPF 中,开发者可以用布局面板来协调包含在其中的控件的位置和大小。
SilverlightBeta1 中内建的布局面板包括在 WPF 中最常用的 3 种: Canvas StackPanel GridCanvas 面板Canvas 面板是一种很基础的布局面板,它支持对其中的控件采用绝对坐标定位。
你可以通过一种 XAML 特性--- 附加属性”对 Canvas 中的元素进行定位。
用附加属性,你可以指定控件相对于其直接父 Canvas 控件的上、下、左、右坐标的位置。
附加属性很有用,因为它让父面板可以扩展其中包含的控件的属性集。
Canvas 通过定义扩展属性 Top 和 Left 就能定义其中 Button (或其他任何UI 元素)的 Left Top,而不需要真正向 Button 类中添加这个属性,或修改 Button 类。
我们可以向 Canvas 容器中添加两个按钮,指定其距离 Canvas 左侧的距离为 50 像素,离上边的距离则分别为 50 像素和 150 像素。
使用如下 XAML 语法即可完成(其中 Canvas.Top 和 Canvas.Left 都是附加属性的例子):这些代码绘制的界面效果如下:Canvas 适用于其中包含的 UI 元素比较固定的情形,但是如果你想向其中添加更多的控件,或者 UI 需要改变大小或能够移动,Canvas 显得不太灵活。
这时,你不得不忙于手写代码来移动 Canvas 中的东西(这很痛苦)。
应付这种动态的场景,更好的办法通常是使用其它带有相关功能的内建语义的布局面板,如 StackPanel 和 Grid。
StackPanelStackPanel 是一种简单的布局面板,它支持用行或列的方式来定位其中包含的控件。
StackPanel 常用于安排页面上的一个很小的 UI 部分。
例如,我们可以用下面的 XAML 标签在页面上垂直的排布 3 个按钮:在运行时刻,StackPanel 会自动在一个垂直地堆叠(stack)中排列我们的按钮(【译注:这也是为什么叫StackPanel 的原因】),如下所示:同样,我们还可以把 Orientation 属性设置为 Horizontal 而不是 Vertical (默认值):这会让 StackPanel 水平地排布 3 个按钮,如下图所示:Grid 面板Grid 控件是最灵活的布局面板,它支持用多行和多列的方式排布控件。
在概念上,它和 HTML 里的 Table(表格)类似。
不同于 Table 的是,你不需要将控件内嵌到行/列元素中,而是通过定义和属性来定义 Grid 的行和列。
这两个属性需要定义在标签内。
这样之后,你就可以在其中的控件上,用 XAML 的“附加属性”语法指定它属于哪一行、哪一列。
比如,我们可以用如下语法定义 3 行 3 列的 Grid 布局,然后在其中放置 4 个按钮:以上代码会按下图方式排布按钮:除了支持绝对尺寸定义(如:Height60),Grid 的 RowDefinition 和 ColumnDefinition 控件还支持自动改变大小的模式(HeightAuto),这样会根据其中内容的尺寸自动改变 Grid 或 Row 的尺寸(你也可以指定最大或最小尺寸限制)。
Grid 的 Row 和 ColumnDefinitions 还支持叫做 Proportional Sizing (按比例缩放)的特性。
用这个特性,可以让 Grid 的行列按相对比例的方式排放(如:你可以指定第二行的尺寸为第一行的 2 倍)。
你会发现 Grid 提供了非常多的功能和灵活性 - 而它也许会成为你最终最常用的布局面板控件。
用布局面板排布我们的 Digg 页面我们创建 Digg 例子的目标,是得到最终看起来像下图的页面:要创建这种布局,我们首先添加一个其中包含两个 RowDefinition 的根级 Grid 面板。
第一行的高度是 40像素,而第二行则占据所有剩下的空间(Height):小技巧:注意上面我将 Grid 的 ShowGridLines 属性设置为 True. 这样我们在运行时就能轻易的看到其行列的分界线:接下来,我们在刚才的根级 Grid 面板里,添加第二个 Grid 面板到第一行的位置,用它来排布页面顶部的行(页面头部)。
我们在其中创建 3 列:分别容纳标题,搜索文本框,和搜索按钮:完成了这些后,我们就得到了 Digg 搜索页面的基本布局,如下所示:注:如果不用嵌套的 Grid,我们还可以用一个 2 行 3 列的 Grid 来完成这个布局,配合使用 Grid 的ColSpan/RowSpan 特性来合并多个列中的内容(和你在 HTML table 中的做法类似)。
我不这么做,而是选择使用嵌套 Grid 的原因,是因为这样更便于学习和理解。
现在我们已经完成了布局,接下来要做的是向其中添加控件。
对头部的行,我们用内建的控件(设置其 CornerRadius 为 10,以得到圆角效果)并在其中添加一些文本来创建标题。
我们用内建的控件来创建第二列的搜索文本框。
并在第 3列放置一个搜索. 然后我们在第二行放一些占位文字,稍后我们会在这里显示搜索结果。
注:下面我会直接在控件中内嵌样式信息(FontSize Colors Margins 等)。
在这个系列教程中,晚一点我会演示如何用 Styles 来提取、封装这些设定到一个独立的文件中(类似 CSS),以便于在整个应用程序中重用。
现在,让我们运行一下应用程序,就会显示出如下的界面:动态改变应用程序的尺寸你也许注意到了,在上面的 XAML 中我们的顶层控件设置成了固定的高度和宽度:这样设置,我们的 Silverlight 应用程序会一直保持这个固定的尺寸。
放大浏览器的尺寸会更明显:虽然在某些场合下,将内嵌的应用程序固定在 HTML 页面的一个固定尺寸的区域内会很有用,但我们的Digg 搜索程序不一样,我们宁愿它能自动随着浏览器而缩放,就像一个普通的 HTML 页面那样。
好消息是,这很容易实现。
只要去除根控件上的 Width 和 Height 属性就行了:这样,我们的 Silverlight 应用程序就会自动扩展(或收缩),以填满其嵌入的 HTML 容器。
因为我们用来测试的 SilverlightTestPage.html 文件将 Silverlight 控件放置在一个 HTML元素中,并且其 CSS设置中宽高均为 100 所以 Digg 应用程序最终会填满整个浏览器: