当前位置：文档之家› SilverLight使用

SilverLight使用

SilverLight使用
SilverLight使用

这是8个系列教程的第一部分，这系列示范如何使用Silverlight 2的Beta1版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释Silverlight的一些核心编程概念。

使用VS 2008 创建一个新的Silverlight 应用

我们来开始我们的Digg应用的开发，先选择Visual Studio 2008 中的文件->新项目菜单项，使用新项目对话框创建一个“Silverlight Application” （注：你需要在Beta1发布后，下载和安装VS 2008的Silverlight 工具才能得到这个支持）：

我们将该项目命名为“DiggSample”。在点击OK按钮后，Visual Studio 会显示另外一个对话框，允许我们选择我们是否只要创建一个Silverlight应用项目，或者还要加一个服务器端的https://www.doczj.com/doc/009294034.html, Web项目到包含Silverlight应用的解决方案里去：

在这个例程里，我们将选择还要添加一个https://www.doczj.com/doc/009294034.html, Web Application 项目到解决方案里去，并将它命名为“DiggSample_WebServer”。在点击OK之后，Visual Studio 会为我们创建一个解决方案，里面包含一个Silverlight 客户端应用和一个https://www.doczj.com/doc/009294034.html, web 服务器端应用：

如果我们做一次编译的话，Visual Studio 会自动把编译好的Silverlight 应用拷贝到我们的web服务器项目中去，不需要手工的步骤或配置。VS为我们创建的默认的web服务器项目包含一个https://www.doczj.com/doc/009294034.html,网页和一个静态的HTML网页，我们可以用来运行和测试其中的Silverlight应用。

注：Silverlight应用可用于任何web服务器（包括Linux上的Apache），宿主于静态HTML文件或者任何服务器端生成的网页（包括PHP, Java, Python, Ruby等等）中。在这个Digg样例中，我们不会写任何

服务器端的代码，而是将使用Silverlight的跨域networking功能，来直接访问Digg服务的API。我选择创建一个https://www.doczj.com/doc/009294034.html, 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”.NET Silverlight 应用（用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和https://www.doczj.com/doc/009294034.html,测试网页（内含标签，其引用指向我们的Silverlight 应用）是在我们创建项目时为我们自动添加的，这意味着我们只要点击F5编译，运行和测试就可以了。

学习如何添加控件和处理事件

现在我们的Digg应用什么都不做，在运行它时，只会调出一个空白的网页。

我们可以打开项目中的Page.xaml文件来改变它，往里面加些内容：

我们将开始改变网格的背景颜色，在其中声明一个Button控件。我们将给按钮一个"x:Name"属性，设置其值为“MyButton“，这会允许我们在后台代码类中用编程的方法引用它。我们还将设置它的Content, Width 和Height 属性：

当我们运行应用时，我们的按钮将会在网页的中间出现，内含”Push Me“内容文字，象下面这样：

要给我们的按钮加行为的话，我们可以给它加一个"Click"事件处理函数。我们可以在源码视图中通过输入事件的名称来做：

然后就会提示我们在我们的后台代码类中该使用的事件处理函数：

然后我们可以输入一个要用的新事件处理方法的名称，或者只要点击回车键，使用默认的命名约定来命名事件处理方法：

然后VS就会自动地在我们的后台代码类文件中创建一个占位的事件处理函数实现。我们可以使用这个事件处理函数在按钮被点击时，用新的消息更新它的内容：

在做完上面的改动后，我们可以重新运行应用，再次点击按钮，现在它的内容就会被更新为“Pushed!”的消息：

以下的步骤

在完成我们的应用之前，我们还有不少工作要做... :-)

下一步，是配置我们的应用的总的UI布局结构，在其中安排更多的控件。要做那个，就让我们跳到下一个教程《使用布局管理》。

Silverlight Tutorial Part 2: Using Layout Management

This is part two of eight tutorials that walk through how to build a simple Digg client application using Silverlight 2. These tutorials are intended to be read in-order, and help explain some of the core programming concepts of Silverlight. Bookmark my Silverlight 2 Reference page for more of Silverlight posts and content.

Click here to download a completed version of this Digg client sample.

Understanding Layout Management

Silverlight and WPF support a flexible layout management system that enables developers and designers to easily coordinate how controls are positioned within a UI surface. This layout system supports both a fixed position model where controls are positioned using explicit

coordinates, as well as a more dynamic position model where layout and controls can be automatically sized and flowed as the browser resizes.

Developers using Silverlight and WPF use layout panels to coordinate the position and resizing of controls contained within them. The built-in layout panels in Silverlight 2 include three of the most commonly used ones in WPF:

?Canvas

?StackPanel

?Grid

Canvas Panel

The Canvas panel is a pretty basic layout panel that supports positioning controls contained within it using explicit coordinates.

You position elements in a Canvas using a XAML feature called "Attached Properties" - which allow you to specify a control's position relative to its immediate parent Canvas control's Left, Top, Right or Bottom coordinates. Attached properties are useful as they allow a parent panel to extend the property set of a control contained within it. Canvas, by defining an attached property for “Top” and ”Left” basically adds the ability to define left and top atta chment on Button (or any other UI element that is added to the Canvas), without any need to actually add a property to the Button class, or modify the Button class in any way.

We could add two buttons to a Canvas container, and position them both 50 pixels from the left of the Canvas, and 50 and 150 pixels from the top using XAML like below (the Canvas.Left and Canvas.Top attributes are examples of the attached property syntax):

This would then render our buttons like below:

While the Canvas is useful for scenarios where the UI elements contained within it never move, it tends not to be very flexible as you add more controls into it or handle scenarios where the UI needs to resize or move. In cases like these you end up having to manually write code yourself to move things around inside the Canvas (which is a pain). A better solution for these dynamic scenarios is typically to use an alternative layout panel that has built-in semantics

to-do this for you - like the StackPanel and Grid.

StackPanel

The StackPanel control is a simple layout panel that supports positioning its contained controls in either a row or column layout. StackPanels are typically used in scenarios where you want to arrange a small subsection of the UI on your page.

For example, we could use the StackPanel to vertically arrange three buttons on our page using XAML markup like below:

At runtime the StackPanel would then automatically arrange the Button controls in a vertical stack for us like below:

We could alternatively set the "Orientation" property of the StackPanel to be "Horizontal" instead of Vertical (which is the default):

This will then cause the StackPanel to automatically arrange the Button controls in a horizontal row like below:

Grid Panel

The Grid control is the most flexible layout panel, and supports arranging controls in multi-row and multi-column layouts. It is conceptually similar to an HTML Table element.

Unlike an HTML Table, you don't embed controls within column and row elements. Instead you specify a Grid's Row and Column definitions using and

properties that are declared immediately under the control. You can then use the XAML "Attached Property" syntax on controls contained within the grid to indicate which Grid row and column they should be populated within.

For example, we could declare a Grid layout has three rows and three columns, and then position 4 buttons within it using XAML like below:

The Grid layout panel would then position the Button elements for us like so:

In addition to supporting absolute sizing (for example: Height="60") the Grid's RowDefinition and ColumnDefinition controls also support an AutoSizing mode (Height="Auto"), which automatically sizes the Grid or Row based on the size of the content contained within it (you

can also optionally specify maximum and minimum size constraints - which can be very useful).

The Grid's Row and ColumnDefinitions also support a feature called "Proportional Sizing" - which enables the size of a Grid's Rows and Columns to be spaced proportionally relative to each other (for example: you could have the second row grow at 2x the rate of the first one).

You'll find that the Grid provides a ton of power and flexibility - and it will probably be the most common layout panel control you'll end up using.

Using Layout Panels to Arrange our Digg Page

Remember that the goal when building our Digg sample is to create a page that looks like the one below:

To create this layout we'll begin by adding a root Grid panel that has two RowDefinitions within it. The first Row will be 40 pixels high, and the second will fill the remaining space

(Height="*"):

Tip: Notice above how I've set the Grid's "ShowGridLines" property to "True". This will enable us to easily visualize the Row and Column boundaries within the Grid when we test it at runtime:

We'll then embed a second Grid panel control as a child control within the first row of the root Grid panel container, and use it to arrange the top row (the header). We'll create three columns within it - one for the Title, one for the Search TextBox, and one for the Search Button:

Once this is done we have the basic layout arrangement of our Digg search page in place:

Note: As an alternative to nesting Grids, we could have alternatively had one Grid with 3 columns and 2 rows and used the ColSpan/RowSpan feature of the Grid to merge content across multiple columns (similar to how you can do this with HTML tables). I chose to use the nested Grid approach instead because I thought it would be simpler to follow along.

Now that we have the layout setup all we need to-do is add controls to it.

For the header row we'll use the built-in control (with a CornerRadius of 10 to get a nice rounded edge) and add some text inside it to create the Title. We'll use the control in the second column for the search textbox. And we'll put a search