【原文地址】Silverlight Tutorial Part 2: Using Layout Management
【原文发表日期】 Friday, February 22, 2008 5:55 AM
【转载地址】http://blog.joycode.com/scottgu/archive/2008/02/24/114898.aspx
这是8个系列教程的第2部分,这个系列示范如何使用 Silverlight 2 的 Beta1 版本来创建一个简单的 Digg 客户端应用。这些教程请依次阅读,将有助于您理解 Silverlight 的一些核心编程概念。
理解布局管理
Silverlight 和 WPF 都支持一种灵活的布局管理系统,能让开发者和设计师轻松的定位 UI
上的控件。该布局系统对显式指定坐标的控件支持固定的定位模型;除此之外,还支持一种更为动态的定位模型,控件和布局能随着浏览器的大小改变而自动改变其
大小和方位。
在 Silverlight 和 WPF 中,开发者可以用布局面板来协调包含在其中的控件的位置和大小。Silverlight Beta1 中内建的布局面板包括在 WPF 中最常用的3种:
Canvas面板
Canvas 面板是一种很基础的布局面板,它支持对其中的控件采用绝对坐标定位。
你可以通过一种 XAML 特性--- "附加属性” 对 Canvas 中的元素进行定位。用附加属性,你可以指定控件相对于其直接父
Canvas 控件的上、下、左、右坐标的位置。附加属性很有用,因为它让父面板可以扩展其中包含的控件的属性集。Canvas 通过定义扩展属性
Top 和 Left, 就能定义其中 Button (或其他任何 UI 元素)的 Left, Top,而不需要真正向 Button
类中添加这个属性,或 修改 Button 类。
我们可以向 Canvas 容器中添加两个按钮,指定其距离 Canvas 左侧的距离为 50 像素,离上边的距离则分别为 50 像素和
150 像素。使用如下 XAML 语法即可完成(其中 Canvas.Top 和 Canvas.Left 都是附加属性的例子):
这些代码绘制的界面效果如下:
Canvas 适用于其中包含的 UI 元素比较固定的情形,但是如果你想向其中添加更多的控件,或者 UI
需要改变大小或能够移动,Canvas 显得不太灵活。这时,你不得不忙于手写代码来移动 Canvas
中的东西(这很痛苦)。应付这种动态的场景,更好的办法通常是使用其它带有相关功能的内建语义的布局面板,如 StackPanel 和 Grid。
StackPanel
StackPanel 是一种简单的布局面板,它支持用行或列的方式来定位其中包含的控件。StackPanel 常用于安排页面上的一个很小的 UI 部分。
例如,我们可以用下面的 XAML 标签在页面上垂直的排布3个按钮:
在运行时刻,StackPanel 会自动在一个垂直地堆叠(stack)中排列我们的按钮(【译注:这也是为什么叫 StackPanel 的原因】),如下所示:
同样,我们还可以把 Orientation 属性设置为 Horizontal 而不是 Vertical (默认值):
这会让 StackPanel 水平地排布3个按钮,如下图所示:
Grid面板
Grid 控件是最灵活的布局面板,它支持用多行和多列的方式排布控件。在概念上,它和 HTML 里的 Table (表格)类似。
不同于 Table 的是,你不需要将控件内嵌到行/列元素中,而是通过定义 <Grid.RowDefinitions> 和
<Grid.ColumnDefinitions> 属性来定义 Grid 的行和列。这两个属性需要定义在 <Grid>
标签内。这样之后,你就可以在其中的控件上,用 XAML 的“附加属性”语法指定它属于哪一行、哪一列。
比如,我们可以用如下语法定义3行3列的 Grid 布局,然后在其中放置4个按钮:
以上代码会按下图方式排布按钮:
除了支持绝对尺寸定义(如:Height="60"),Grid 的 RowDefinition 和 ColumnDefinition
控件还支持自动改变大小的模式(Height="Auto"),这样会根据其中内容的尺寸自动改变 Grid 或 Row
的尺寸(你也可以指定最大或最小尺寸限制)。
Grid 的 Row 和 ColumnDefinitions 还支持叫做 "Proportional Sizing" (按比例缩放)的特性。用这个特性,可以让 Grid 的行列按相对比例的方式排放(如:你可以指定第二行的尺寸为第一行的2倍)。
你会发现 Grid 提供了非常多的功能和灵活性 - 而它也许会成为你最终最常用的布局面板控件。
用布局面板排布我们的 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。
(翻译:木野狐)
- 大小: 37.3 KB
- 大小: 20.7 KB
- 大小: 46.9 KB
- 大小: 21.6 KB
- 大小: 41.5 KB
- 大小: 43.2 KB
- 大小: 44.7 KB
- 大小: 16.4 KB
- 大小: 55.4 KB
- 大小: 25.2 KB
- 大小: 52 KB
- 大小: 57 KB
- 大小: 58 KB
- 大小: 65.3 KB
- 大小: 6.1 KB
- 大小: 50.3 KB
- 大小: 99.2 KB
- 大小: 21 KB
- 大小: 15.3 KB
- 大小: 67.6 KB
分享到:
相关推荐
· 第二部分:使用布局管理 (木野狐译) · 第三部分:使用 Networking取回数据并填充DataGrid · 第四部分:使用 Style 元素更好地封装观感 (木野狐译) · 第五部分:用 ListBox 和 DataBinding 显示列表数据 ...
这些文件是Microsoft Visual C++运行库的一部分,通常用于支持使用Visual C++编译的程序运行。 首先,我们来了解一下DLL(Dynamic Link Library)。DLL是一种共享库文件,Windows操作系统使用它来存储和执行代码,...
围棋对弈软件,版本为7, 很厉害的, 可以选择不段数进行对弈,水平可以达到专业水平,业余的都赢不到它; 解压就可以直接用
Live555 源代码分析 之 mediaServer RTSP服务器 作者:灯下野狐 有幸下载到资源,共享给大家。 因为我之前下载好多源码解释 资源分最多达15分都被坑。 这把力荐。
2. 古文化常识:文言文断句题和古文化常识题都会涉及对考生对中国传统文化的了解,包括古代的礼仪、制度、历史事件等,旨在提升考生阅读古诗文的能力。 3. 高考语文复习策略:新课标2020高考语文二轮复习专题强调抓...
TaskScheduler用于任务调度,而UsageEnvironment用于管理程序的使用环境。这些是使用Live555库时必须创建的基类实例。接着,程序通过argc参数检查至少提供了一个"rtsp://"开头的URL参数。如果未提供,程序将调用...
2. 围棋策略与布局: - 星位与四角:开局时,常见的落子点是星位(棋盘上的黑点),通常从中心的星位开始,形成对角线的布局。 - 定式:围棋开局有众多定式,即经过历史验证的开局手法,帮助玩家快速形成有利局面...
- 野狐沟小流域位于**省**市**县,总面积71.4平方公里,是泾河的三级支流,属于黄土丘陵沟壑区,水土流失严重。 - 2005年,为了解决水土流失、人畜饮水和灌溉问题,**县水保局委托**市欣荣水保生态工程设计进行淤...
- 注重第二课堂的拓展,提供丰富的课外活动,包括体育、美术、舞蹈、器乐、科技等领域。 - 教学质量在全县处于领先地位。 **1.4 原东大街小学情况** - **建立时间**:1952年。 - **占地面积**:3.8亩。 - **存在...
- **特点**:潜伏期通常为2至7天,病情发展迅速,具有高度传染性和致命性。 - **可防可控性**:尽管鼠疫具有高度危险性,但现代医学技术的发展使得鼠疫成为一种可以预防、控制和治疗的疾病。 #### 二、鼠疫的主要...
《ERP采集系统Curry7中文操作手册》是一份关于如何使用Curry7软件进行脑电图(EEG)数据采集、分析和处理的详细指南。Curry7是一款用于脑电波数据采集、分析和呈现的ERP(事件相关电位)处理软件,广泛应用于心理学、...
其他如野狐、野狼、野猫、野兔、骆驼和羊也可能成为传染源。 - **传播途径**: - 腺鼠疫:通过鼠蚤叮咬传播。 - 肺鼠疫:通过飞沫传播。 ### 鼠疫的临床类型与潜伏期 - **类型分类**: - 轻型鼠疫 - 腺鼠疫 - ...
#### 第2章 一切都是对象 - **Java中的基本类型与引用类型**:深入探讨Java中的八种基本数据类型和引用类型的使用方式。 - **封装与继承**:介绍封装的概念以及如何通过继承来实现代码重用。 - **多态性**:初步了解...
2. 对弈平台:网络上有许多围棋对弈平台,如弈城网、野狐围棋,可以与不同水平的玩家切磋棋艺。 3. AI陪练:如Leela Zero、GTP接口的围棋AI,可作为自学工具,帮助玩家提高水平。 总结来说,围棋不仅是一项娱乐...
此文件专门给野狐围棋用户名jdricky的。第二个文件叫zenith免费送。闲人勿扰。再送一个叫思佳围棋较弱的人工智能软件。
- **线路一**:从北京出发,通过G6京藏高速,经过太师庄互通转X石高速,野狐岭出口驶出进入207国道,直达草原天路东线西入口(黄花坪)和西线东入口。 - **线路二**:同G6京藏高速,但转X承高速崇礼方向,崇礼北...
Pachi的实力相当可观,其水平大约相当于野狐围棋平台上的3到6段,这在人工智能围棋软件中已经是一个相当高的水平。 Pachi的核心算法是蒙特卡洛树搜索(MCTS),这是一种在强化学习领域广泛应用的方法。蒙特卡洛树...