Sliverlight教程

1、Silverlight教程第一部分： 使用Silverlight 2 和 VS 2008創(chuàng)建“Hello World”程序這是8個(gè)系列教程的第一部分，這系列示范如何使用Silverlight 2的Beta1版本建造一個(gè)簡單的Digg客戶端應(yīng)用。這些教程旨在按順序閱讀，幫著解釋Silverlight的一些核心編程概念。使用 VS 2008 創(chuàng)建一個(gè)新的Silverlight 應(yīng)用我們來開始我們的Digg應(yīng)用的開發(fā)，先選擇Visual Studio 2008 中的文件->新項(xiàng)目菜單項(xiàng)，使用新項(xiàng)目對(duì)話框創(chuàng)建一個(gè)“Silverlight Application” （注：你需要在Beta1發(fā)布后，

2、下載和安裝 VS 2008的Silverlight工具才能得到這個(gè)支持）： 我們將該項(xiàng)目命名為“DiggSample”。在點(diǎn)擊OK按鈕后， Visual Studio 會(huì)顯示另外一個(gè)對(duì)話框，允許我們選擇我們是否只要?jiǎng)?chuàng)建一個(gè)Silverlight應(yīng)用項(xiàng)目，或者還要加一個(gè)服務(wù)器端的ASP.NET Web項(xiàng)目到包含Silverlight應(yīng)用的解決方案里去： 在這個(gè)例程里，我們將選擇還要添加一個(gè)ASP.NET Web Application 項(xiàng)目到解決方案里去，并將它命名為“DiggSample_WebServer”。在點(diǎn)擊OK之后，Visual Studio 會(huì)為我們創(chuàng)建一個(gè)解決方案，里面包含一個(gè)S

3、ilverlight 客戶端應(yīng)用和一個(gè)ASP.NET web 服務(wù)器端應(yīng)用： 如果我們做一次編譯的話， Visual Studio 會(huì)自動(dòng)把編譯好的 Silverlight 應(yīng)用拷貝到我們的web服務(wù)器項(xiàng)目中去，不需要手工的步驟或配置。VS為我們創(chuàng)建的默認(rèn)的web服務(wù)器項(xiàng)目包含一個(gè)ASP.NET網(wǎng)頁和一個(gè)靜態(tài)的 HTML網(wǎng)頁，我們可以用來運(yùn)行和測(cè)試其中的Silverlight應(yīng)用。 注： Silverlight應(yīng)用可用于任何web服務(wù)器（包括Linux上的Apache），宿主于靜態(tài)HTML文件或者任何服務(wù)器端生成的網(wǎng)頁（包括 PHP, Java, Python, Ruby等等）中。在這個(gè)Dig

4、g樣例中，我們不會(huì)寫任何服務(wù)器端的代碼，而是將使用Silverlight的跨域networking功能，來直接訪問 Digg服務(wù)的API。我選擇創(chuàng)建一個(gè)ASP.NET web服務(wù)器項(xiàng)目，主要是想獲得自動(dòng)的部署，并且使用它內(nèi)置的web服務(wù)器來做測(cè)試。 理解Silverlight應(yīng)用里都有些什么在默認(rèn)情形下，一個(gè)新建的Silverlight應(yīng)用項(xiàng)目包含一個(gè)Page.xaml和一個(gè) App.xaml文件，以及與它們相關(guān)的后臺(tái)（code behind ）類文件（可以用VB, C#, Ruby 或Python來編寫）： XAML文件是XML文本文件，可以用來用聲明的方式指定 Silverlight 或

5、WPF應(yīng)用的用戶界面。XAML還可更廣泛地用來用聲明的方式代表.NET對(duì)象。 App.xaml 文件一般用來聲明譬如象畫刷和樣式對(duì)象這樣可在整個(gè)應(yīng)用中共享的資源。App.xaml的后臺(tái)Application類可用來處理應(yīng)用級(jí)的事件，象 Application_Startup, Application_Exit 和Application_UnhandledException。 Page.xaml 文件，在默認(rèn)情形下，是在應(yīng)用激活時(shí)裝載的起始的UI控件。在其中，我們可以使用UI控件來定義我們的用戶界面，然后在Page的后臺(tái)代碼類里處理它們的事件（詳見后文）。 在我們編譯DiggSample項(xiàng)目時(shí)，

6、在默認(rèn)情形下，Visual Studio 會(huì)把代碼和XAML標(biāo)識(shí)編譯進(jìn)一個(gè)標(biāo)準(zhǔn)的 .NET 程序集文件中，然后把它和任何靜態(tài)的資源（象圖片或我們想要包含的靜態(tài)文件）包裝進(jìn)硬盤上一個(gè)叫做“DiggSample.xap”的文件中去： “.xap”文件（其音發(fā)作“zap”）使用標(biāo)準(zhǔn)的 .zip壓縮算法來減小客戶端下載的大小。一個(gè)“hello world”.NET Silverlight 應(yīng)用（用VB或C#編寫的）其大小大概為4KB。 注： Beta1版本中的一些控件是在程序集中實(shí)現(xiàn)的，如果使用這些控件的話，這些程序集會(huì)重新發(fā)布于應(yīng)用的 .xap 文件中（會(huì)增加應(yīng)用的大小，超出4KB的基底大小）。在D

7、igg應(yīng)用中使用的所有控件將會(huì)在Beta2版和最終版的核心Silverlight下載包中， 這意味著完成的應(yīng)用的總下載大小大概只在6-8KB范圍內(nèi)（所以是非常小，下載起來非常快）。 要宿主和運(yùn)行一個(gè)Silverlight 2 應(yīng)用，你可以把<object>標(biāo)簽加到任何標(biāo)準(zhǔn)的HTML頁面中（不需要 JavaScript ）并將其指向 .xap 文件。Silverlight然后就會(huì)自動(dòng)下載這個(gè).xap 文件，生成實(shí)例，將其宿主于瀏覽器中的HTML網(wǎng)頁中。這是跨瀏覽器（Safari, FireFox, IE等），跨平臺(tái)（Windows, Mac, and Linux）工作的。HTML和A

8、SP.NET測(cè)試網(wǎng)頁（內(nèi)含<object>標(biāo)簽，其引用指向我們的Silverlight 應(yīng)用）是在我們創(chuàng)建項(xiàng)目時(shí)為我們自動(dòng)添加的，這意味著我們只要點(diǎn)擊F5編譯，運(yùn)行和測(cè)試就可以了。 學(xué)習(xí)如何添加控件和處理事件現(xiàn)在我們的Digg應(yīng)用什么都不做，在運(yùn)行它時(shí)，只會(huì)調(diào)出一個(gè)空白的網(wǎng)頁。我們可以打開項(xiàng)目中的Page.xaml文件來改變它，往里面加些內(nèi)容：我們將開始改變網(wǎng)格的背景顏色，在其中聲明一個(gè)Button控件。我們將給按鈕一個(gè)"x:Name"屬性，設(shè)置其值為“MyButton“，這會(huì)允許我們?cè)诤笈_(tái)代碼類中用編程的方法引用它。我們還將設(shè)置它的Content, Width

9、 和 Height 屬性： 當(dāng)我們運(yùn)行應(yīng)用時(shí)，我們的按鈕將會(huì)在網(wǎng)頁的中間出現(xiàn)，內(nèi)含”Push Me“內(nèi)容文字，象下面這樣：   要給我們的按鈕加行為的話，我們可以給它加一個(gè)"Click"事件處理函數(shù)。我們可以在源碼視圖中通過輸入事件的名稱來做：然后就會(huì)提示我們?cè)谖覀兊暮笈_(tái)代碼類中該使用的事件處理函數(shù)：然后我們可以輸入一個(gè)要用的新事件處理方法的名稱，或者只要點(diǎn)擊回車鍵，使用默認(rèn)的命名約定來命名事件處理方法：然后VS就會(huì)自動(dòng)地在我們的后臺(tái)代碼類文件中創(chuàng)建一個(gè)占位的事件處理函數(shù)實(shí)現(xiàn)。我們可以使用這個(gè)事件處理函數(shù)在按鈕被點(diǎn)擊時(shí)，用新的消息更新它的內(nèi)容： 在做完上面的改動(dòng)后

10、，我們可以重新運(yùn)行應(yīng)用，再次點(diǎn)擊按鈕，現(xiàn)在它的內(nèi)容就會(huì)被更新為“Pushed!”的消息： 以下的步驟在完成我們的應(yīng)用之前，我們還有不少工作要做. :-) 下一步，是配置我們的應(yīng)用的總的UI布局結(jié)構(gòu)，在其中安排更多的控件。 要做那個(gè)，就讓我們跳到下一個(gè)教程使用布局管理。 Silverlight 教程第二部分：使用布局管理 (木野狐譯) · 3 ·【原文地址】Silverlight Tutorial Part 2: Using Layout Management 【原文發(fā)表日期】 Friday, February 22, 2008 5:55 AM 這是8個(gè)系列教程的第

11、2部分，這個(gè)系列示范如何使用 Silverlight 2 的 Beta1 版本來創(chuàng)建一個(gè)簡單的 Digg 客戶端應(yīng)用。這些教程請(qǐng)依次閱讀，將有助于您理解 Silverlight 的一些核心編程概念。 理解布局管理Silverlight 和 WPF 都支持一種靈活的布局管理系統(tǒng)，能讓開發(fā)者和設(shè)計(jì)師輕松的定位 UI 上的控件。該布局系統(tǒng)對(duì)顯式指定坐標(biāo)的控件支持固定的定位模型；除此之外，還支持一種更為動(dòng)態(tài)的定位模型，控件和布局能隨著瀏覽器的大小改變而自動(dòng)改變其 大小和方位。在 Silverlight 和 WPF 中，開發(fā)者可以用布局面板來協(xié)調(diào)包含在其中的控件的位置和大小。Silverlight Be

12、ta1 中內(nèi)建的布局面板包括在 WPF 中最常用的3種： · Canvas · StackPanel · Grid Canvas面板Canvas 面板是一種很基礎(chǔ)的布局面板，它支持對(duì)其中的控件采用絕對(duì)坐標(biāo)定位。你可以通過一種 XAML 特性- "附加屬性” 對(duì) Canvas 中的元素進(jìn)行定位。用附加屬性，你可以指定控件相對(duì)于其直接父 Canvas 控件的上、下、左、右坐標(biāo)的位置。附加屬性很有用，因?yàn)樗尭该姘蹇梢詳U(kuò)展其中包含的控件的屬性集。Canvas 通過定義擴(kuò)展屬性 Top 和 Left, 就能定義其中 Button （或其他任何 UI 元素）的 L

13、eft, Top，而不需要真正向 Button 類中添加這個(gè)屬性，或 修改 Button 類。 我們可以向 Canvas 容器中添加兩個(gè)按鈕，指定其距離 Canvas 左側(cè)的距離為 50 像素，離上邊的距離則分別為 50 像素和 150 像素。使用如下 XAML 語法即可完成（其中 Canvas.Top 和 Canvas.Left 都是附加屬性的例子）： 這些代碼繪制的界面效果如下：Canvas 適用于其中包含的 UI 元素比較固定的情形，但是如果你想向其中添加更多的控件，或者 UI 需要改變大小或能夠移動(dòng)，Canvas 顯得不太靈活。這時(shí)，你不得不忙于手寫代碼來移動(dòng) Canvas 中的東西（

14、這很痛苦）。應(yīng)付這種動(dòng)態(tài)的場景，更好的辦法通常是使用其它帶有相關(guān)功能的內(nèi)建語義的布局面板，如 StackPanel 和 Grid。 StackPanel StackPanel 是一種簡單的布局面板，它支持用行或列的方式來定位其中包含的控件。StackPanel 常用于安排頁面上的一個(gè)很小的 UI 部分。 例如，我們可以用下面的 XAML 標(biāo)簽在頁面上垂直的排布3個(gè)按鈕：在運(yùn)行時(shí)刻，StackPanel 會(huì)自動(dòng)在一個(gè)垂直地堆疊（stack）中排列我們的按鈕（【譯注：這也是為什么叫 StackPanel 的原因】），如下所示： 同樣，我們還可以把 Orientation 屬性設(shè)置為 Horizon

15、tal 而不是 Vertical （默認(rèn)值）：這會(huì)讓 StackPanel 水平地排布3個(gè)按鈕，如下圖所示： Grid面板Grid 控件是最靈活的布局面板，它支持用多行和多列的方式排布控件。在概念上，它和 HTML 里的 Table （表格）類似。 不同于 Table 的是，你不需要將控件內(nèi)嵌到行/列元素中，而是通過定義 <Grid.RowDefinitions> 和 <Grid.ColumnDefinitions> 屬性來定義 Grid 的行和列。這兩個(gè)屬性需要定義在 <Grid> 標(biāo)簽內(nèi)。這樣之后，你就可以在其中的控件上，用 XAML 的“附加屬性”語法

16、指定它屬于哪一行、哪一列。 比如，我們可以用如下語法定義3行3列的 Grid 布局，然后在其中放置4個(gè)按鈕： 以上代碼會(huì)按下圖方式排布按鈕：除了支持絕對(duì)尺寸定義（如：Height="60"），Grid 的 RowDefinition 和 ColumnDefinition 控件還支持自動(dòng)改變大小的模式（Height="Auto"），這樣會(huì)根據(jù)其中內(nèi)容的尺寸自動(dòng)改變 Grid 或 Row 的尺寸（你也可以指定最大或最小尺寸限制）。 Grid 的 Row 和 ColumnDefinitions 還支持叫做 "Proportional Sizing&q

17、uot; （按比例縮放）的特性。用這個(gè)特性，可以讓 Grid 的行列按相對(duì)比例的方式排放（如：你可以指定第二行的尺寸為第一行的2倍）。 你會(huì)發(fā)現(xiàn) Grid 提供了非常多的功能和靈活性 - 而它也許會(huì)成為你最終最常用的布局面板控件。用布局面板排布我們的 Digg 頁面我們創(chuàng)建 Digg 例子的目標(biāo)，是得到最終看起來像下圖的頁面：要?jiǎng)?chuàng)建這種布局，我們首先添加一個(gè)其中包含兩個(gè) RowDefinition 的根級(jí) Grid 面板。第一行的高度是 40 像素，而第二行則占據(jù)所有剩下的空間（Height="*"）：小技巧：注意上面我將 Grid 的 ShowGridLines 屬性設(shè)置

18、為 True. 這樣我們?cè)谶\(yùn)行時(shí)就能輕易的看到其行列的分界線：接下來，我們?cè)趧偛诺母?jí) Grid 面板里，添加第二個(gè) Grid 面板到第一行的位置，用它來排布頁面頂部的行（頁面頭部）。我們?cè)谄渲袆?chuàng)建3列：分別容納標(biāo)題，搜索文本框，和搜索按鈕： 完成了這些后，我們就得到了 Digg 搜索頁面的基本布局，如下所示：注：如果不用嵌套的 Grid，我們還可以用一個(gè) 2行3列的 Grid 來完成這個(gè)布局，配合使用 Grid 的 ColSpan/RowSpan 特性來合并多個(gè)列中的內(nèi)容（和你在 HTML table 中的做法類似）。我不這么做，而是選擇使用嵌套 Grid 的原因，是因?yàn)檫@樣更便于學(xué)習(xí)和理解

19、。 現(xiàn)在我們已經(jīng)完成了布局，接下來要做的是向其中添加控件。 對(duì)頭部的行，我們用內(nèi)建的 <Border> 控件（設(shè)置其 CornerRadius 為 10，以得到圓角效果）并在其中添加一些文本來創(chuàng)建標(biāo)題。我們用內(nèi)建的 <WatermarkedTextBox> 控件來創(chuàng)建第二列的搜索文本框。并在第3列放置一個(gè)搜索 <Button>. 然后我們?cè)诘诙蟹乓恍┱嘉晃淖?，稍后我們?huì)在這里顯示搜索結(jié)果。 注：下面我會(huì)直接在控件中內(nèi)嵌樣式信息（FontSize, Colors, Margins 等）。在這個(gè)系列教程中，晚一點(diǎn)我會(huì)演示如何用 Styles 來提取、封裝這些設(shè)

20、定到一個(gè)獨(dú)立的文件中（類似 CSS），以便于在整個(gè)應(yīng)用程序中重用。   現(xiàn)在，讓我們運(yùn)行一下應(yīng)用程序，就會(huì)顯示出如下的界面：動(dòng)態(tài)改變應(yīng)用程序的尺寸你也許注意到了，在上面的 XAML 中我們的頂層控件設(shè)置成了固定的高度和寬度： 這樣設(shè)置，我們的 Silverlight 應(yīng)用程序會(huì)一直保持這個(gè)固定的尺寸。放大瀏覽器的尺寸會(huì)更明顯：雖然在某些場合下，將內(nèi)嵌的應(yīng)用程序固定在 HTML 頁面的一個(gè)固定尺寸的區(qū)域內(nèi)會(huì)很有用，但我們的 Digg 搜索程序不一樣，我們寧愿它能自動(dòng)隨著瀏覽器而縮放，就像一個(gè)普通的 HTML 頁面那樣。 好消息是，這很容易實(shí)現(xiàn)。只要去除根控件上的 Width 和 Hei

21、ght 屬性就行了：這樣，我們的 Silverlight 應(yīng)用程序就會(huì)自動(dòng)擴(kuò)展（或收縮），以填滿其嵌入的 HTML 容器。因?yàn)槲覀冇脕頊y(cè)試的 SilverlightTestPage.html 文件將 Silverlight 控件放置在一個(gè) HTML <div>元素中，并且其 CSS 設(shè)置中寬高均為 100%, 所以 Digg 應(yīng)用程序最終會(huì)填滿整個(gè)瀏覽器： 注意頁面頭部中的文字內(nèi)容的尺寸是如何隨著瀏覽器寬度而自動(dòng)改變的：當(dāng)我們縮小瀏覽器尺寸時(shí)，帶水印的文本框和搜索按鈕會(huì)保持同樣的尺寸，因?yàn)槠?Grid 容器列的寬度是固定的。包含 "Digg Search" 標(biāo)題

22、的 <Border> 控件卻會(huì)自動(dòng)調(diào)整尺寸，因?yàn)槠?Grid 列的寬度設(shè)置成了 Width="*". 我們不需要編寫一行代碼就可以啟用這個(gè)布局行為，Grid容器和布局系統(tǒng)會(huì)為我們自動(dòng)調(diào)整大小或流動(dòng)其中的任何東西。 下一步現(xiàn)在我們已經(jīng)創(chuàng)建好了 Digg 程序的布局結(jié)構(gòu)，并且定義好了頁面頭部的行。下一步，我們會(huì)實(shí)現(xiàn)該程序的搜索行為 - 讓它在程序的終端用戶搜索某個(gè)標(biāo)題時(shí)，能夠真正的從 D 去獲取故事內(nèi)容。如果你想知道怎么實(shí)現(xiàn)，請(qǐng)繼續(xù)閱讀下一篇： 使用 Networking 獲取數(shù)據(jù)并填充 DataGrid。 Silverlight教程第三部分：使用 Networki

23、ng取回?cái)?shù)據(jù)并填充DataGrid這是8個(gè)系列教程的第三部分，這系列示范如何使用Silverlight 2的Beta1版本建造一個(gè)簡單的Digg客戶端應(yīng)用。這些教程旨在按順序閱讀，幫著解釋Silverlight的一些核心編程概念。使用Networking取回Digg故事Silverlight 2 有內(nèi)置的networking API，允許Silverlight客戶端調(diào)用遠(yuǎn)程的REST, SOAP/WS*, RSS, JSON和XML HTTP服務(wù)。Silverlight 2還包含了內(nèi)置的socket API （System.Net.Sockets），允許Silverlight客戶端通過非HTT

24、P協(xié)議來通信（對(duì)聊天服務(wù)等這樣的場景非常理想）。 跨域網(wǎng)絡(luò)訪問Silverlight 2應(yīng)用在做網(wǎng)絡(luò)調(diào)用時(shí)，始終可以回調(diào)到它們的“原始（origin）”服務(wù)器（意味著它們可以調(diào)用下載的應(yīng)用來自的同域的URL）。 Silverlight 2應(yīng)用還可以做跨域網(wǎng)絡(luò)調(diào)用（意味著它們可以調(diào)用與下載的應(yīng)用來自的不同的域上的URL），只要遠(yuǎn)程的web服務(wù)器擁有一個(gè)XML策略文件，表明客戶端是 允許做這些跨域調(diào)用的。 Silverlight 2 定義了一個(gè)XML策略文件格式，允許服務(wù)器管理員精確地控制一個(gè)客戶端應(yīng)該有些什么訪問權(quán)。Silverlight 2 也遵守默認(rèn)的Flash跨域策略文件格式-這意味著你可

25、以使用Silverlight 2 來調(diào)用web上已經(jīng)允許Flash客戶端跨域訪問的任何現(xiàn)有的遠(yuǎn)程REST, SOAP/WS*, RSS, JSON 或 XML 端點(diǎn)（end-point ）。 D有一套非?？岬耐ㄟ^HTTP通信的Digg APIs。因?yàn)樗麄冇幸粋€(gè)Flash跨域策略文件在他們的服務(wù)器上，我們可以直接從我們的Silverlight Digg 客戶端應(yīng)用中調(diào)用它們（而不要求我們通過我們的web服務(wù)器去訪問他們的API）。 D 主題 Feed API我們要允許終端用戶使用我們的應(yīng)用輸入一個(gè)搜索主題（譬如，“Programming”），然后點(diǎn)擊“搜索”按鈕，從D取回符合條件的前N條故事：

26、我們可以使用D List Stories REST API feed API 來實(shí)現(xiàn)。它在URL中接受一個(gè)主題參數(shù)（譬如，GET /stories/topic/programming），然后返回一個(gè)匹配那個(gè)主題的XML格式的Digg故事集。點(diǎn)擊這里看一下這個(gè)XML格式的例子。 使用 System.Net.WebClient 來異步調(diào)用Digg REST Feed在上面的搜索按鈕被點(diǎn)擊之后，我們將處理它的Click事件，從WaterMarkTextBox控件中取回要搜索的主題字符串，然后啟動(dòng)一個(gè)發(fā)向Digg的網(wǎng)絡(luò)調(diào)用，為那個(gè)主題取回相應(yīng)的XML列表。Silverlight 在 System.Ne

27、t 命名空間下包含了WebClient輔助類（該類也在完整的.NET 框架下）。我們可以使用這個(gè)類從URL異步下載內(nèi)容。異步下載Digg故事的好處是，在等待遠(yuǎn)程服務(wù)器的回復(fù)時(shí)，我們的UI不用阻塞或變得沒有反應(yīng)（允許 我們擁有一個(gè)非常流暢的用戶體驗(yàn)）。 通過WebClient類執(zhí)行異步下載，我們要做的是注冊(cè)一個(gè)DownloadStringCompleted事件處理方法（它將在請(qǐng)求的內(nèi)容被下載之后被調(diào)用），然后調(diào)用WebClient.DownloadStringAsync(url) 輔助方法來開始下載： 使用上面的代碼，我們現(xiàn)在就可以異步取回一個(gè)XML數(shù)據(jù)的字符串，內(nèi)含有關(guān)用戶想要的任何主題的Di

28、gg故事。使用LINQ to XML把XML格式的Digg故事分析成Story類對(duì)象至此，我們可以取回Digg故事數(shù)據(jù)的XML片段了，下一步將是對(duì)其進(jìn)行分析（parse），并將它轉(zhuǎn)換成我們可以操作和綁定到控件上的DiggStory對(duì)象。我們將首先定義一個(gè)DiggStory類，該類擁有可以映射到來自Digg的XML內(nèi)容上的屬性（我們將利用C#新的 "自動(dòng)屬性"的特性來實(shí)現(xiàn)）： 然后我們就可以使用LINQ （是內(nèi)置于 Silverlight 2中的）和 LINQ to XML （是包含在我們的Silverlight 應(yīng)用中的一個(gè)額外的庫 ）來輕松地分析和過濾從Digg返回的XM

29、L文檔，使用下面的代碼把它翻譯成一個(gè)DiggStory對(duì)象序列：注意上面，我們現(xiàn)在有了來自XML的我們可以操作的強(qiáng)類型的DiggStory對(duì)象。在DataGrid控件中顯示Digg故事我們將使用新的 Silverlight DataGrid 控件來在我們的應(yīng)用中顯示Digg故事。要使用它，我們要引用Silverlight Data 控件程序集，然后把前面網(wǎng)頁上的“Todo”文字替換成一個(gè)DataGrid控件聲明： DataGrid允許你明確地配置列的聲明和顯示類型（為取得最大的控制），或者，你也可以設(shè)置它的AutoGenerateColumns屬性成true，讓DataGrid對(duì)數(shù)據(jù)源使用反射

30、，基于你的對(duì)象的定義，為你創(chuàng)建默認(rèn)的列。然后我們就可以更新我們的后臺(tái)代碼類，用編程的方法將DataGrid的ItemSource屬性綁定到在點(diǎn)擊搜尋按鈕時(shí)從Digg取回的故事序列：現(xiàn)在，運(yùn)行我們的Silverlight應(yīng)用，做一個(gè)搜索的話，我們將看到從Digg取回的實(shí)時(shí)主題故事數(shù)據(jù)的列表：Silverlight的Datagrid支持你預(yù)期客戶端網(wǎng)格控件應(yīng)該擁有的所有的標(biāo)準(zhǔn)功能：雙向原地編輯，選擇，卷動(dòng)，改變表列大小等等。它還 支持自動(dòng)流動(dòng)的布局，意味著它可以動(dòng)態(tài)地?cái)U(kuò)展或收縮來充滿包含它的內(nèi)容容器。DataGrid還擁有一個(gè)豐富的模板模型，允許你對(duì)顯示和表列數(shù)據(jù)的編輯進(jìn) 行定制。我在將來會(huì)撰寫更

31、多的貼子，討論如何使用DataGrid。以下的步驟現(xiàn)在我們可以從D 取回Digg故事數(shù)據(jù)，并在我們的應(yīng)用中將故事數(shù)據(jù)顯示出來了。 下一步將是回到我們的Page.xaml 標(biāo)識(shí)，去掉我們目前正在使用的行內(nèi)的樣式聲明。 要做那個(gè)，讓我們跳到下一個(gè)教程：使用樣式元素更好地封裝觀感（Look and Feel）。Silverlight教程第四部分：使用 Style 元素更好地封裝觀感 (木野狐譯)這是8個(gè)系列教程的第4部分，這個(gè)系列示范如何使用 Silverlight 2 的 Beta1 版本來創(chuàng)建一個(gè)簡單的 Digg 客戶端應(yīng)用。這些教程請(qǐng)依次閱讀，將有助于您理解 Silverlight 的一些核心

32、編程概念。使用 Style 元素更好地封裝觀感（Look and Feel）WPF 和 Silverlight 支持一種 Style 機(jī)制，它允許我們把控件的屬性值封裝成可重用的資源。我們可以把這些樣式聲明保存在獨(dú)立于頁面的其他文件中，然后就可以在一個(gè)應(yīng)用程序中跨控件和頁面重用 （甚至跨多個(gè)應(yīng)用程序重用）。在做一些基本定制的場景下，概念上類似于在 HTML 中重用 CSS. 注：除了定義基本屬性設(shè)置（Color, Font, Size, Margins 等），WPF 和 Silverlight 里的樣式還可以被用來定義和重用控件模板(Control Templates) - 控件模板可以帶來超

33、級(jí)豐富的皮膚功能，以及改變控件結(jié)構(gòu)的功能（并支持目前 HTML 中的 CSS 做不到的定制場景）。我會(huì)在這個(gè)系列的第7部分討論控件模板。對(duì)我們的 Digg 例程而言，我們會(huì)在項(xiàng)目的 App.xaml 文件中定義樣式。這使得該樣式可以在整個(gè)應(yīng)用程序中，被跨頁面、跨控件地重用： 首先讓我們來為 Digg 頁面的 <Border>控件（以及其中的<TextBlock> 標(biāo)題）封裝樣式：我們可以在 App.xaml 文件中，用下列標(biāo)簽來創(chuàng)建兩個(gè) Style 元素，分別封裝 <Border> 和 <TextBlock> 的設(shè)置信息，這些設(shè)置在前面是內(nèi)聯(lián)定義

34、的：注意上述代碼中，我們是如何為每個(gè) Style 元素賦予一個(gè)唯一的 "Key" 值的。接下來我們就可以更新我們的 <Border>> 和 <TextBlock> 控件，讓它們用這些 keys 來引用對(duì)應(yīng)的樣式定義。我們會(huì)使用一種叫做“標(biāo)簽擴(kuò)展”(markup extensions) 的 XAML 特性來完成它。標(biāo)簽擴(kuò)展用于非字面量的值需要被設(shè)置時(shí)（另一個(gè)適用場景是綁定表達(dá)式）。 我們還可以對(duì) Page.xaml 文件中的其它控件也做類似的分離樣式的處理，這樣做之后，文件內(nèi)容會(huì)變成類似這樣：用這種方式封裝樣式設(shè)定，可以讓開發(fā)者更好的關(guān)注應(yīng)用程序

35、的行為語義，并且還可以讓我們跨控件/頁面的重用樣式。注：Beta1 中需要注意的一個(gè)問題是，當(dāng)你輸錯(cuò)樣式名稱和屬性定義時(shí)，其錯(cuò)誤信息不是很清楚（它會(huì)引發(fā)異常，但不告訴哪里設(shè)置不對(duì)）。這會(huì)在 Beta2 中得到改進(jìn)。同時(shí)，如果你在加載樣式時(shí)看到錯(cuò)誤消息，請(qǐng)一定仔細(xì)查看拼寫錯(cuò)誤。 下一步現(xiàn)在我們已經(jīng)通過 Style 引用，將 Page.xaml 文件中的標(biāo)簽進(jìn)行了一定的清理。讓我們更進(jìn)一步來自定義我們的故事數(shù)據(jù)的外觀。您可以跳到下一篇教程以了解具體方法： 使用 ListBox 和 Databinding 來顯示列表數(shù)據(jù)。Silverlight 教程第五部分：用 ListBox 和 DataBinding 顯示列表數(shù)據(jù) (木野狐譯)這是8個(gè)系列教程的第5部分，這個(gè)系列示范如何使用 Silverlight 2 的 Beta1 版本來創(chuàng)建一個(gè)簡單的 Digg 客戶端應(yīng)用。這些教程請(qǐng)依次閱讀，將有助于您理解 Silverlight 的一些核心編程概念。用 ListBox 和 DataBinding 顯示我們的 Digg 故事前面我們使用了 DataGrid 控件來顯示我們的 Digg 故事。當(dāng)我們想用多列的格式來顯示內(nèi)容時(shí)，它很適合。然而對(duì)我們的 Digg 應(yīng)用程序而言，也許我們想稍微改變一下頁面的顯示方式，讓它看起來不太像網(wǎng)格，而更像一個(gè)列表。好消息是，這很容