用布局面板排布我们的 Digg 页面我们创建 Digg 例子的目标，是得到最终看起来像下图的页面：
附件:
您所在的用户组无法下载或查看附件要创建这种布局，我们首先添加一个其中包含两个 RowDefinition 的根级 Grid 面板。第一行的高度是 40 像素，而第二行则占据所有剩下的空间（Height="*"）：
附件:
您所在的用户组无法下载或查看附件小技巧：注意上面我将 Grid 的 ShowGridLines 属性设置为 True. 这样我们在运行时就能轻易的看到其行列的分界线：
附件:
您所在的用户组无法下载或查看附件接下来，我们在刚才的根级 Grid 面板里，添加第二个 Grid 面板到第一行的位置，用它来排布页面顶部的行（页面头部）。我们在其中创建3列：分别容纳标题，搜索文本框，和搜索按钮：
附件:
您所在的用户组无法下载或查看附件完成了这些后，我们就得到了 Digg 搜索页面的基本布局，如下所示：
附件:
您所在的用户组无法下载或查看附件注：如果不用嵌套的 Grid，我们还可以用一个 2行3列的 Grid 来完成这个布局，配合使用 Grid 的 ColSpan/RowSpan 特性来合并多个列中的内容（和你在 HTML table 中的做法类似）。我不这么做，而是选择使用嵌套 Grid 的原因，是因为这样更便于学习和理解。
现在我们已经完成了布局，接下来要做的是向其中添加控件。
对头部的行，我们用内建的 <Border> 控件（设置其 CornerRadius 为 10，以得到圆角效果）并在其中添加一些文本来创建标题。我们用内建的 <WatermarkedTextBox> 控件来创建第二列的搜索文本框。并在第3列放置一个搜索 <Button>. 然后我们在第二行放一些占位文字，稍后我们会在这里显示搜索结果。
注：下面我会直接在控件中内嵌样式信息（FontSize, Colors, Margins 等）。在这个系列教程中，晚一点我会演示如何用 Styles 来提取、封装这些设定到一个独立的文件中（类似 CSS），以便于在整个应用程序中重用。
附件:
您所在的用户组无法下载或查看附件现在，让我们运行一下应用程序，就会显示出如下的界面：
附件:
您所在的用户组无法下载或查看附件动态改变应用程序的尺寸你也许注意到了，在上面的 XAML 中我们的顶层控件设置成了固定的高度和宽度：
附件:
您所在的用户组无法下载或查看附件这样设置，我们的 Silverlight 应用程序会一直保持这个固定的尺寸。放大浏览器的尺寸会更明显：
附件:
您所在的用户组无法下载或查看附件虽然在某些场合下，将内嵌的应用程序固定在 HTML 页面的一个固定尺寸的区域内会很有用，但我们的 Digg 搜索程序不一样，我们宁愿它能自动随着浏览器而缩放，就像一个普通的 HTML 页面那样。
好消息是，这很容易实现。只要去除根控件上的 Width 和 Height 属性就行了：
附件:
您所在的用户组无法下载或查看附件这样，我们的 Silverlight 应用程序就会自动扩展（或收缩），以填满其嵌入的 HTML 容器。因为我们用来测试的 SilverlightTestPage.html 文件将 Silverlight 控件放置在一个 HTML <div>元素中，并且其 CSS 设置中宽高均为 100%, 所以 Digg 应用程序最终会填满整个浏览器：
附件:
您所在的用户组无法下载或查看附件注意页面头部中的文字内容的尺寸是如何随着浏览器宽度而自动改变的：
附件:
您所在的用户组无法下载或查看附件当我们缩小浏览器尺寸时，带水印的文本框和搜索按钮会保持同样的尺寸，因为其 Grid 容器列的宽度是固定的。包含 "Digg Search" 标题的 <Border> 控件却会自动调整尺寸，因为其 Grid 列的宽度设置成了 Width="*".
我们不需要编写一行代码就可以启用这个布局行为，Grid容器和布局系统会为我们自动调整大小或流动其中的任何东西。
下一步现在我们已经创建好了 Digg 程序的布局结构，并且定义好了页面头部的行。
下一步，我们会实现该程序的搜索行为 - 让它在程序的终端用户搜索某个标题时，能够真正的从 Digg.com 去获取故事内容。
如果你想知道怎么实现，请继续阅读下一篇：
使用 Networking 获取数据并填充 DataGrid。
