|
現(xiàn)在我們已經(jīng)完成了布局，接下來要做的是向其中添加控件。
對頭部的行，我們用內(nèi)建的 <Border> 控件（設置其 CornerRadius 為 10，以得到圓角效果）并在其中添加一些文本來創(chuàng)建標題。我們用內(nèi)建的 <WatermarkedTextBox> 控件來創(chuàng)建第二列的搜索文本框。并在第3列放置一個搜索 <Button>. 然后我們在第二行放一些占位文字，稍后我們會在這里顯示搜索結(jié)果。
注：下面我會直接在控件中內(nèi)嵌樣式信息（FontSize, Colors, Margins 等）。在這個系列教程中，晚一點我會演示如何用 Styles 來提取、封裝這些設定到一個獨立的文件中（類似 CSS），以便于在整個應用程序中重用。
點擊放大
現(xiàn)在，讓我們運行一下應用程序，就會顯示出如下的界面：
動態(tài)改變應用程序的尺寸
你也許注意到了，在上面的 XAML 中我們的頂層控件設置成了固定的高度和寬度：
這樣設置，我們的 Silverlight 應用程序會一直保持這個固定的尺寸。放大瀏覽器的尺寸會更明顯：
雖然在某些場合下，將內(nèi)嵌的應用程序固定在 HTML 頁面的一個固定尺寸的區(qū)域內(nèi)會很有用，但我們的 Digg 搜索程序不一樣，我們寧愿它能自動隨著瀏覽器而縮放，就像一個普通的 HTML 頁面那樣。
好消息是，這很容易實現(xiàn)。只要去除根控件上的 Width 和 Height 屬性就行了：
這樣，我們的 Silverlight 應用程序就會自動擴展（或收縮），以填滿其嵌入的 HTML 容器。因為我們用來測試的 SilverlightTestPage.html 文件將 Silverlight 控件放置在一個 HTML <div>元素中，并且其 CSS 設置中寬高均為 100%, 所以 Digg 應用程序最終會填滿整個瀏覽器：
注意頁面頭部中的文字內(nèi)容的尺寸是如何隨著瀏覽器寬度而自動改變的：
當我們縮小瀏覽器尺寸時，帶水印的文本框和搜索按鈕會保持同樣的尺寸，因為其 Grid 容器列的寬度是固定的。包含 "Digg Search" 標題的 <Border> 控件卻會自動調(diào)整尺寸，因為其 Grid 列的寬度設置成了 Width="*".
我們不需要編寫一行代碼就可以啟用這個布局行為，Grid容器和布局系統(tǒng)會為我們自動調(diào)整大小或流動其中的任何東西。
下一步
現(xiàn)在我們已經(jīng)創(chuàng)建好了 Digg 程序的布局結(jié)構(gòu)，并且定義好了頁面頭部的行。
下一步，我們會實現(xiàn)該程序的搜索行為 - 讓它在程序的終端用戶搜索某個標題時，能夠真正的從 Digg.com 去獲取故事內(nèi)容。
如果你想知道怎么實現(xiàn)，請繼續(xù)閱讀下一篇： 使用 Networking 獲取數(shù)據(jù)并填充 DataGrid。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2832910-1-1.html
本文鏈接：http://www.95time.cn/tech/multimedia/2008/5387.asp 
出處：Scott Guthrie 博客中文版
責任編輯：bluehearts
上一頁 使用布局管理 [4] 下一頁
◎進入論壇RIA設計與應用版塊參加討論
|
第 1 頁 
第 5 頁 使用布局管理 [5]
