Sliverlight教程

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

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

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

现在我们已经完成了布局，接下来要做的是向其中添加控件。

对头部的行，我们用内建的 控件（设置其 CornerRadius 为 10，以得到圆角效果）并在其中添加一些文本来创建标题。我们用内建的

控件来创建第二列的搜索文本框。并在第3列放置一个搜索 . 然后我们在第二行放一些占位文字，稍后我们会在这里显示搜索结果。

注：下面我会直接在控件中内嵌样式信息（FontSize, Colors, Margins 等）。在这个系列教程中，晚一点我会演示如何用 Styles 来提取、封装这些设定到一个独立的文件中（类似 CSS），以便于在整个应用程序中重用。

现在，让我们运行一下应用程序，就会显示出如下的界面：

动态改变应用程序的尺寸

你也许注意到了，在上面的 XAML 中我们的顶层控件设置成了固定的高度和宽度：

这样设置，我们的 Silverlight 应用程序会一直保持这个固定的尺寸。放大浏览器的尺寸会更明显：

• 1
• <<
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• >>
• 13