|
用布局面板排布我們的 Digg 頁面
我們創(chuàng)建 Digg 例子的目標(biāo)，是得到最終看起來像下圖的頁面：
要?jiǎng)?chuàng)建這種布局，我們首先添加一個(gè)其中包含兩個(gè) RowDefinition 的根級(jí) Grid 面板。第一行的高度是 40 像素，而第二行則占據(jù)所有剩下的空間（Height="*"）：
小技巧：注意上面我將 Grid 的 ShowGridLines 屬性設(shè)置為 True. 這樣我們在運(yùn)行時(shí)就能輕易的看到其行列的分界線：
接下來，我們在剛才的根級(jí) Grid 面板里，添加第二個(gè) Grid 面板到第一行的位置，用它來排布頁面頂部的行（頁面頭部）。我們在其中創(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í)和理解。
出處：Scott Guthrie 博客中文版
責(zé)任編輯：bluehearts
上一頁 使用布局管理 [3] 下一頁 使用布局管理 [5]
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|
第 1 頁 
第 4 頁 使用布局管理 [4]
