用布局面板排布我们的 Digg 页面

我们创建 Digg 例子的目标，是得到最终看起来像下图的页面：

要创建这种布局，我们首先添加一个其中包含两个 RowDefinition 的根级 Grid 面板。第一行的高度是 40 像素，而第二行则占据所有剩下的空间（Height="*"）：

小技巧：注意上面我将 Grid 的 ShowGridLines 属性设置为 True. 这样我们在运行时就能轻易的看到其行列的分界线：

接下来，我们在刚才的根级 Grid 面板里，添加第二个 Grid 面板到第一行的位置，用它来排布页面顶部的行（页面头部）。我们在其中创建3列：分别容纳标题，搜索文本框，和搜索按钮：

完成了这些后，我们就得到了 Digg 搜索页面的基本布局，如下所示：

注：如果不用嵌套的 Grid，我们还可以用一个 2行3列的 Grid 来完成这个布局，配合使用 Grid 的 ColSpan/RowSpan 特性来合并多个列中的内容（和你在 HTML table 中的做法类似）。我不这么做，而是选择使用嵌套 Grid 的原因，是因为这样更便于学习和理解。

出处：Scott Guthrie 博客中文版
责任编辑：bluehearts

上一页 使用布局管理 [3] 下一页 使用布局管理 [5]

◎进入论坛RIA设计与应用版块参加讨论