使用VS2008创建一个新的Silverlight应用
我们来开始我们的Digg应用的开发，先选择VisualStudio2008中的文件->
新项目菜单项，使用新项目对话框创建一个“SilverlightApplication”（注：
你需要在Beta1发布后，下载和安装VS2008的Silverlight工具才能得到这
个支持）：
我们将该项目命名为“DiggSample”。在点击OK按钮后，VisualStudio会显
示另外一个对话框，允许我们选择我们是否只要创建一个Silverlight应用项
目，或者还要加一个服务器端的项目到包含Silverlight应用的解
决方案里去：
在这个例程里，我们将选择还要添加一个Application项目到解
决方案里去，并将它命名为“DiggSample_WebServer”。在点击OK之后，Visual
Studio会为我们创建一个解决方案，里面包含一个Silverlight客户端应用和
一个服务器端应用：
如果我们做一次编译的话，VisualStudio会自动把编译好的Silverlight应
用拷贝到我们的web服务器项目中去，不需要手工的步骤或配置。VS为我们创
建的默认的web服务器项目包含一个网页和一个静态的HTML网页，我
们可以用来运行和测试其中的Silverlight应用。
注：Silverlight应用可用于任何web服务器（包括Linux上的Apache），宿
主于静态HTML文件或者任何服务器端生成的网页（包括PHP,Java,Python,
Ruby等等）中。在这个Digg样例中，我们不会写任何服务器端的代码，而是将
使用Silverlight的跨域networking功能，来直接访问Digg服务的API。我选
择创建一个服务器项目，主要是想获得自动的部署，并且使用它内
置的web服务器来做测试。
理解Silverlight应用里都有些什么
在默认情形下，一个新建的Silverlight应用项目包含一个和一个
文件，以及与它们相关的后台（codebehind）类文件（可以用VB,C#,
Ruby或Python来编写）：
XAML文件是XML文本文件，可以用来用声明的方式指定Silverlight或WPF
应用的用户界面。XAML还可更广泛地用来用声明的方式代表对象。
文件一般用来声明譬如象画刷和样式对象这样可在整个应用中共享的
资源。的后台Application类可用来处理应用级的事件，象
Application_Startup,Application_Exit和
Application_UnhandledException。
文件，在默认情形下，是在应用激活时装载的起始的UI控件。在其
中，我们可以使用UI控件来定义我们的用户界面，然后在Page的后台代码类里
处理它们的事件（详见后文）。
在我们编译DiggSample项目时，在默认情形下，VisualStudio会把代码和XAML
标识编译进一个标准的程序集文件中，然后把它和任何静态的资源（象图
片或我们想要包含的静态文件）包装进硬盘上一个叫做“”的文
件中去：
“.xap”文件（其音发作“zap”）使用标准的.zip压缩算法来减小客户端下
载的大小。一个“helloworld”Silverlight应用（用VB或C#编写的）
其大小大概为4KB。
注：Beta1版本中的一些控件是在程序集中实现的，如果使用这些控件的话，
这些程序集会重新发布于应用的.xap文件中（会增加应用的大小，超出4KB
的基底大小）。在Digg应用中使用的所有控件将会在Beta2版和最终版的核心
Silverlight下载包中，这意味着完成的应用的总下载大小大概只在6-8KB范
围内（所以是非常小，下载起来非常快）。
要宿主和运行一个Silverlight2应用，你可以把
的HTML页面中（不需要JavaScript）并将其指向.xap文件。Silverlight
然后就会自动下载这个.xap文件，生成实例，将其宿主于浏览器中的HTML网页
中。这是跨浏览器（Safari,FireFox,IE等），跨平台（Windows,Mac,andLinux）
工作的。
HTML和测试网页（内含
应用）是在我们创建项目时为我们自动添加的，这意味着我们只要点击F5编译，
运行和测试就可以了。
学习如何添加控件和处理事件
现在我们的Digg应用什么都不做，在运行它时，只会调出一个空白的网页。
我们可以打开项目中的文件来改变它，往里面加些内容：
我们将开始改变网格的背景颜色，在其中声明一个Button控件。我们将给按钮
一个"x:Name"属性，设置其值为“MyButton“，这会允许我们在后台代码类中用
编程的方法引用它。我们还将设置它的Content,Width和Height属性：
当我们运行应用时，我们的按钮将会在网页的中间出现，内含”PushMe“内容
文字，象下面这样：
要给我们的按钮加行为的话，我们可以给它加一个"Click"事件处理函数。我们
可以在源码视图中通过输入事件的名称来做：
然后就会提示我们在我们的后台代码类中该使用的事件处理函数：
然后我们可以输入一个要用的新事件处理方法的名称，或者只要点击回车键，使
用默认的命名约定来命名事件处理方法：
然后VS就会自动地在我们的后台代码类文件中创建一个占位的事件处理函数实
现。我们可以使用这个事件处理函数在按钮被点击时，用新的消息更新它的内容：
在做完上面的改动后，我们可以重新运行应用，再次点击按钮，现在它的内容就
会被更新为“Pushed!”的消息：
以下的步骤
在完成我们的应用之前，我们还有不少工作要做...:-)
下一步，是配置我们的应用的总的UI布局结构，在其中安排更多的控件。要做
那个，就让我们跳到下一个教程《使用布局管理》。
Silverlight教程第二部分：使用布局管理
3
【原文地址】SilverlightTutorialPart2:UsingLayoutManagement
【原文发表日期】Friday,February22,20085:55AM
这是8个系列教程的第2部分，这个系列示范如何使用Silverlight2的Beta1
版本来创建一个简单的Digg客户端应用。这些教程请依次阅读，将有助于您理
解Silverlight的一些核心编程概念。
理解布局管理
Silverlight和WPF都支持一种灵活的布局管理系统，能让开发者和设计师轻
松的定位UI上的控件。该布局系统对显式指定坐标的控件支持固定的定位模
型；除此之外，还支持一种更为动态的定位模型，控件和布局能随着浏览器的大
小改变而自动改变其大小和方位。
在Silverlight和WPF中，开发者可以用布局面板来协调包含在其中的控件的
位置和大小。SilverlightBeta1中内建的布局面板包括在WPF中最常用的3
种：
Canvas
StackPanel
Grid
Canvas面板
Canvas面板是一种很基础的布局面板，它支持对其中的控件采用绝对坐标定位。
你可以通过一种XAML特性---"附加属性”对Canvas中的元素进行定位。用
附加属性，你可以指定控件相对于其直接父Canvas控件的上、下、左、右坐标
的位置。附加属性很有用，因为它让父面板可以扩展其中包含的控件的属性集。
Canvas通过定义扩展属性Top和Left,就能定义其中Button（或其他任何
UI元素）的Left,Top，而不需要真正向Button类中添加这个属性，或修改
Button类。
我们可以向Canvas容器中添加两个按钮，指定其距离Canvas左侧的距离为
50像素，离上边的距离则分别为50像素和150像素。使用如下XAML语法即
可完成（其中和都是附加属性的例子）：
这些代码绘制的界面效果如下：
Canvas适用于其中包含的UI元素比较固定的情形，但是如果你想向其中添加
更多的控件，或者UI需要改变大小或能够移动，Canvas显得不太灵活。这时，
你不得不忙于手写代码来移动Canvas中的东西（这很痛苦）。应付这种动态的
场景，更好的办法通常是使用其它带有相关功能的内建语义的布局面板，如
StackPanel和Grid。
StackPanel
StackPanel是一种简单的布局面板，它支持用行或列的方式来定位其中包含的
控件。StackPanel常用于安排页面上的一个很小的UI部分。
例如，我们可以用下面的XAML标签在页面上垂直的排布3个按钮：
在运行时刻，StackPanel会自动在一个垂直地堆叠（stack）中排列我们的按钮
（【译注：这也是为什么叫StackPanel的原因】），如下所示：
同样，我们还可以把Orientation属性设置为Horizontal而不是Vertical
（默认值）：
这会让StackPanel水平地排布3个按钮，如下图所示：
Grid面板
Grid控件是最灵活的布局面板，它支持用多行和多列的方式排布控件。在概念
上，它和HTML里的Table（表格）类似。
不同于Table的是，你不需要将控件内嵌到行/列元素中，而是通过定义
行和列。这两个属性需要定义在
控件上，用XAML的“附加属性”语法指定它属于哪一行、哪一列。
比如，我们可以用如下语法定义3行3列的Grid布局，然后在其中放置4个按
钮：
以上代码会按下图方式排布按钮：
除了支持绝对尺寸定义（如：Height="60"），Grid的RowDefinition和
ColumnDefinition控件还支持自动改变大小的模式（Height="Auto"），这样会
根据其中内容的尺寸自动改变Grid或Row的尺寸（你也可以指定最大或最小
尺寸限制）。
Grid的Row和ColumnDefinitions还支持叫做"ProportionalSizing"（按
比例缩放）的特性。用这个特性，可以让Grid的行列按相对比例的方式排放（如：
你可以指定第二行的尺寸为第一行的2倍）。
你会发现Grid提供了非常多的功能和灵活性-而它也许会成为你最终最常用
的布局面板控件。
用布局面板排布我们的Digg页面
我们创建Digg例子的目标，是得到最终看起来像下图的页面：
要创建这种布局，我们首先添加一个其中包含两个RowDefinition的根级Grid
面板。第一行的高度是40像素，而第二行则占据所有剩下的空间（Height="*"）：
小技巧：注意上面我将Grid的ShowGridLines属性设置为True.这样我们在
运行时就能轻易的看到其行列的分界线：
接下来，我们在刚才的根级Grid面板里，添加第二个Grid面板到第一行的位
置，用它来排布页面顶部的行（页面头部）。我们在其中创建3列：分别容纳标
题，搜索文本框，和搜索按钮：
完成了这些后，我们就得到了Digg搜索页面的基本布局，如下所示：
注：如果不用嵌套的Grid，我们还可以用一个2行3列的Grid来完成这个布
局，配合使用Grid的ColSpan/RowSpan特性来合并多个列中的内容（和你在
HTMLtable中的做法类似）。我不这么做，而是选择使用嵌套Grid的原因，
是因为这样更便于学习和理解。
现在我们已经完成了布局，接下来要做的是向其中添加控件。
对头部的行，我们用内建的
得到圆角效果）并在其中添加一些文本来创建标题。我们用内建的
搜索
索结果。
注：下面我会直接在控件中内嵌样式信息（FontSize,Colors,Margins等）。
在这个系列教程中，晚一点我会演示如何用Styles来提取、封装这些设定到一
个独立的文件中（类似CSS），以便于在整个应用程序中重用。
现在，让我们运行一下应用程序，就会显示出如下的界面：
动态改变应用程序的尺寸
你也许注意到了，在上面的XAML中我们的顶层控件设置成了固定的高度和宽
度：
这样设置，我们的Silverlight应用程序会一直保持这个固定的尺寸。放大浏
览器的尺寸会更明显：
虽然在某些场合下，将内嵌的应用程序固定在HTML页面的一个固定尺寸的区域
内会很有用，但我们的Digg搜索程序不一样，我们宁愿它能自动随着浏览器而
缩放，就像一个普通的HTML页面那样。
好消息是，这很容易实现。只要去除根控件上的Width和Height属性就行了：
这样，我们的Silverlight应用程序就会自动扩展（或收缩），以填满其嵌入
的HTML容器。因为我们用来测试的文件将
Silverlight控件放置在一个HTML
100%,所以Digg应用程序最终会填满整个浏览器：
注意页面头部中的文字内容的尺寸是如何随着浏览器宽度而自动改变的：
当我们缩小浏览器尺寸时，带水印的文本框和搜索按钮会保持同样的尺寸，因为
其Grid容器列的宽度是固定的。包含"DiggSearch"标题的
却会自动调整尺寸，因为其Grid列的宽度设置成了Width="*".
我们不需要编写一行代码就可以启用这个布局行为，Grid容器和布局系统会为
我们自动调整大小或流动其中的任何东西。
下一步
现在我们已经创建好了Digg程序的布局结构，并且定义好了页面头部的行。
下一步，我们会实现该程序的搜索行为-让它在程序的终端用户搜索某个标题
时，能够真正的从去获取故事内容。
如果你想知道怎么实现，请继续阅读下一篇：使用Networking获取数据并填
充DataGrid。
Silverlight教程第三部分：使用Networking取回数据并填充DataGrid
这是8个系列教程的第三部分，这系列示范如何使用Silverlight2的Beta1
版本建造一个简单的Digg客户端应用。这些教程旨在按顺序阅读，帮着解释
Silverlight的一些核心编程概念。
使用Networking取回Digg故事
Silverlight2有内置的networkingAPI，允许Silverlight客户端调用远程
的REST,SOAP/WS*,RSS,JSON和XMLHTTP服务。Silverlight2还包含了内
置的socketAPI（s），允许Silverlight客户端通过非HTTP
协议来通信（对聊天服务等这样的场景非常理想）。
跨域网络访问
Silverlight2应用在做网络调用时，始终可以回调到它们的“原始（origin）”
服务器（意味着它们可以调用下载的应用来自的同域的URL）。Silverlight2
应用还可以做跨域网络调用（意味着它们可以调用与下载的应用来自的不同的域
上的URL），只要远程的web服务器拥有一个XML策略文件，表明客户端是允
许做这些跨域调用的。
Silverlight2定义了一个XML策略文件格式，允许服务器管理员精确地控制一
个客户端应该有些什么访问权。Silverlight2也遵守默认的Flash跨域策略文
件格式-这意味着你可以使用Silverlight2来调用web上已经允许Flash客户
端跨域访问的任何现有的远程REST,SOAP/WS*,RSS,JSON或XML端点
（end-point）。
有一套非常酷的通过HTTP通信的DiggAPIs。因为他们有一个Flash
跨域策略文件在他们的服务器上，我们可以直接从我们的SilverlightDigg客
户端应用中调用它们（而不要求我们通过我们的web服务器去访问他们的API）。
主题FeedAPI
我们要允许终端用户使用我们的应用输入一个搜索主题（譬如，
“Programming”），然后点击“搜索”按钮，从取回符合条件的前N
条故事：
我们可以使用tStoriesRESTAPIfeedAPI来实现。它在URL
中接受一个主题参数（譬如，GET/stories/topic/programming），然后返回一
个匹配那个主题的XML格式的Digg故事集。点击这里看一下这个XML格式的例
子。
使用ent来异步调用DiggRESTFeed
在上面的搜索按钮被点击之后，我们将处理它的Click事件，从
WaterMarkTextBox控件中取回要搜索的主题字符串，然后启动一个发向Digg的
网络调用，为那个主题取回相应的XML列表。
Silverlight在命名空间下包含了WebClient辅助类（该类也在完
整的框架下）。我们可以使用这个类从URL异步下载内容。异步下载Digg
故事的好处是，在等待远程服务器的回复时，我们的UI不用阻塞或变得没有反
应（允许我们拥有一个非常流畅的用户体验）。
通过WebClient类执行异步下载，我们要做的是注册一个
DownloadStringCompleted事件处理方法（它将在请求的内容被下载之后被调
用），然后调用adStringAsync(url)辅助方法来开始下载：
使用上面的代码，我们现在就可以异步取回一个XML数据的字符串，内含有关用
户想要的任何主题的Digg故事。
使用LINQtoXML把XML格式的Digg故事分析成Story类对象
至此，我们可以取回Digg故事数据的XML片段了，下一步将是对其进行分析
（par），并将它转换成我们可以操作和绑定到控件上的DiggStory对象。
我们将首先定义一个DiggStory类，该类拥有可以映射到来自Digg的XML内容
上的属性（我们将利用C#新的"自动属性"的特性来实现）：
然后我们就可以使用LINQ（是内置于Silverlight2中的）和LINQtoXML（是
包含在我们的Silverlight应用中的一个额外的库）来轻松地分析和过滤从
Digg返回的XML文档，使用下面的代码把它翻译成一个DiggStory对象序列：
注意上面，我们现在有了来自XML的我们可以操作的强类型的DiggStory对象。
在DataGrid控件中显示Digg故事
我们将使用新的SilverlightDataGrid控件来在我们的应用中显示Digg故事。
要使用它，我们要引用SilverlightData控件程序集，然后把前面网页上的
“Todo”文字替换成一个DataGrid控件声明：
DataGrid允许你明确地配置列的声明和显示类型（为取得最大的控制），或者，
你也可以设置它的AutoGenerateColumns属性成true，让DataGrid对数据源使
用反射，基于你的对象的定义，为你创建默认的列。
然后我们就可以更新我们的后台代码类，用编程的方法将DataGrid的
ItemSource属性绑定到在点击搜寻按钮时从Digg取回的故事序列：
现在，运行我们的Silverlight应用，做一个搜索的话，我们将看到从Digg取
回的实时主题故事数据的列表：
Silverlight的Datagrid支持你预期客户端网格控件应该拥有的所有的标准功
能：双向原地编辑，选择，卷动，改变表列大小等等。它还支持自动流动的布
局，意味着它可以动态地扩展或收缩来充满包含它的内容容器。DataGrid还拥
有一个丰富的模板模型，允许你对显示和表列数据的编辑进行定制。我在将来
会撰写更多的贴子，讨论如何使用DataGrid。
以下的步骤
现在我们可以从取回Digg故事数据，并在我们的应用中将故事数据
显示出来了。
下一步将是回到我们的标识，去掉我们目前正在使用的行内的样式
声明。
要做那个，让我们跳到下一个教程：《使用样式元素更好地封装观感（Lookand
Feel）》。
Silverlight教程第四部分：使用Style元素更好地封装观感(木野狐译)
这是8个系列教程的第4部分，这个系列示范如何使用Silverlight2的Beta1
版本来创建一个简单的Digg客户端应用。这些教程请依次阅读，将有助于您理
解Silverlight的一些核心编程概念。
使用Style元素更好地封装观感（LookandFeel）
WPF和Silverlight支持一种Style机制，它允许我们把控件的属性值封装成
可重用的资源。我们可以把这些样式声明保存在独立于页面的其他文件中，然后
就可以在一个应用程序中跨控件和页面重用（甚至跨多个应用程序重用）。在
做一些基本定制的场景下，概念上类似于在HTML中重用CSS.
注：除了定义基本属性设置（Color,Font,Size,Margins等），WPF和
Silverlight里的样式还可以被用来定义和重用控件模板(ControlTemplates)
-控件模板可以带来超级丰富的皮肤功能，以及改变控件结构的功能（并支持目
前HTML中的CSS做不到的定制场景）。我会在这个系列的第7部分讨论控件
模板。
对我们的Digg例程而言，我们会在项目的文件中定义样式。这使得
该样式可以在整个应用程序中，被跨页面、跨控件地重用：
首先让我们来为Digg页面的
封装样式：
我们可以在文件中，用下列标签来创建两个Style元素，分别封装
注意上述代码中，我们是如何为每个Style元素赋予一个唯一的"Key"值的。
接下来我们就可以更新我们的
keys来引用对应的样式定义。我们会使用一种叫做“标签扩展”(markup
extensions)的XAML特性来完成它。标签扩展用于非字面量的值需要被设置时
（另一个适用场景是绑定表达式）。
我们还可以对文件中的其它控件也做类似的分离样式的处理，这样
做之后，文件内容会变成类似这样：
用这种方式封装样式设定，可以让开发者更好的关注应用程序的行为语义，并且
还可以让我们跨控件/页面的重用样式。
注：Beta1中需要注意的一个问题是，当你输错样式名称和属性定义时，其错误
信息不是很清楚（它会引发异常，但不告诉哪里设置不对）。这会在Beta2中
得到改进。同时，如果你在加载样式时看到错误消息，请一定仔细查看拼写错误。
下一步
现在我们已经通过Style引用，将文件中的标签进行了一定的清
理。让我们更进一步来自定义我们的故事数据的外观。
您可以跳到下一篇教程以了解具体方法：《使用ListBox和Databinding来
显示列表数据》。
Silverlight教程第五部分：用ListBox和DataBinding显示列表数据(木野狐译)
这是8个系列教程的第5部分，这个系列示范如何使用Silverlight2的Beta1
版本来创建一个简单的Digg客户端应用。这些教程请依次阅读，将有助于您理
解Silverlight的一些核心编程概念。
用ListBox和DataBinding显示我们的Digg故事
前面我们使用了DataGrid控件来显示我们的Digg故事。当我们想用多列的格
式来显示内容时，它很适合。然而对我们的Digg应用程序而言，也许我们想稍
微改变一下页面的显示方式，让它看起来不太像网格，而更像一个列表。好消息
是，这很容易实现-并且我们不需要改变任何程序代码。
首先我们将DataGrid控件替换为
("StoriesList")：
重新运行一下程序，搜索故事，ListBox会显示搜索结果如下：
你可能觉得奇怪-为什么每个条目都变成了"ory"?这是
因为我们把DiggStory对象绑定给了ListBox（而绑定的默认行为会调用这些
对象的ToString()方法）。如果我们想改用每个DiggStory对象的Title属
性来显示条目，可以设置ListBox的DisplayMemberPath属性：
这样做之后的效果如下：
如果要每次显示不止一个值，或者定制每个条目的布局，我们可以覆盖ListBox
控件的ItemTemplate，并提供一个自定义的DataTemplate.然后在这个
DataTemplate内，定制每个DiggStory对象如何显示。
例如，我们可以用DataTemplate同时显示DiggStory的Title和NumDiggs
值，如下所示：
在DataTemplate中，我们可以绑定DiggStory对象中我们所需的任何公共属
性。注意上面我们是如何用{Binding属性名}语法，配合两个TextBlock控
件来完成这一点的。
设置了上述DataTemplate后，我们的ListBox会显示如下：
让我们再进一步，修改DataTemplate的定义如下。其中使用了两个StackPanel
-一个用于水平地堆叠行，另一个用来垂直地堆叠文本块(TextBlock)。
上述DataTemplate会使我们的ListBox用如下方式显示条目：
我们在文件中定义如下的Style规则（注意如何使用
LinearGradientBrush来获得DiggPanel上的好看的渐变背景效果）：
关于ListBox有一点值得注意-即使我们定制了其条目的显示方式，它仍然会
提供悬浮以及选中状态的语义，不管你使用的是鼠标还是键盘（上/下方向键，
Home/End，等）：
ListBox还支持完整的流式改变大小的功能-并在需要的时候提供内容的自动
卷动功能（注意当窗口变小时，水平滚动条是如何出现的）：
下一步
我们现在已经把数据的显示切换成了基于列表的方式，并清理了其内容列表。
现在让我们来完成这个程序的最后一点功能性行为-实现一个主/从工作流程，
让用户在列表中选择某个文章时能查看其细节。详见下一篇：《使用用户控件
实现主/从场景》。
Silverlight教程第六部分：使用用户控件实现主从表场景
本文发布于:2022-11-25 19:30:23，感谢您对本站的认可！
本文链接：http://www.wtabcd.cn/fanwen/fan/90/20395.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
