WEB开发网
开发学院图形图像Flash 使用布局管理 阅读

使用布局管理

 2008-10-03 11:31:35 来源:WEB开发网   
核心提示: 要创建这种布局,我们首先添加一个其中包含两个 RowDefinition 的根级 Grid 面板,使用布局管理(4),第一行的高度是 40 像素,而第二行则占据所有剩下的空间(Height="*"):小技巧:注意上面我将 Grid 的 ShowGridLines 属性设

使用布局管理

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

使用布局管理

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

使用布局管理

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

使用布局管理

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

使用布局管理

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

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

上一页  1 2 3 4 5 6  下一页

Tags:使用 布局 管理

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接