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

对头部的行，我们用内建的 <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。

经典论坛交流：
http://bbs.blueidea.com/thread-2832910-1-1.html

本文链接：http://www.blueidea.com/tech/multimedia/2008/5387.asp　

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

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

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