SilverLight教程2Word格式.docx
- 文档编号:16456237
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:13
- 大小:827.69KB
SilverLight教程2Word格式.docx
《SilverLight教程2Word格式.docx》由会员分享,可在线阅读,更多相关《SilverLight教程2Word格式.docx(13页珍藏版)》请在冰豆网上搜索。
∙StackPanel
∙Grid
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还支持叫做"
ProportionalSizing"
(按比例缩放)的特性。
用这个特性,可以让Grid的行列按相对比例的方式排放(如:
你可以指定第二行的尺寸为第一行的2倍)。
你会发现Grid提供了非常多的功能和灵活性-而它也许会成为你最终最常用的布局面板控件。
用布局面板排布我们的Digg页面我们创建Digg例子的目标,是得到最终看起来像下图的页面:
要创建这种布局,我们首先添加一个其中包含两个RowDefinition的根级Grid面板。
第一行的高度是40像素,而第二行则占据所有剩下的空间(Height="
*"
):
小技巧:
注意上面我将Grid的ShowGridLines属性设置为True.这样我们在运行时就能轻易的看到其行列的分界线:
接下来,我们在刚才的根级Grid面板里,添加第二个Grid面板到第一行的位置,用它来排布页面顶部的行(页面头部)。
我们在其中创建3列:
分别容纳标题,搜索文本框,和搜索按钮:
完成了这些后,我们就得到了Digg搜索页面的基本布局,如下所示:
注:
如果不用嵌套的Grid,我们还可以用一个2行3列的Grid来完成这个布局,配合使用Grid的ColSpan/RowSpan特性来合并多个列中的内容(和你在HTMLtable中的做法类似)。
我不这么做,而是选择使用嵌套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容器列的宽度是固定的。
包含"
DiggSearch"
标题的<
控件却会自动调整尺寸,因为其Grid列的宽度设置成了Width="
.
我们不需要编写一行代码就可以启用这个布局行为,Grid容器和布局系统会为我们自动调整大小或流动其中的任何东西。
下一步现在我们已经创建好了Digg程序的布局结构,并且定义好了页面头部的行。
下一步,我们会实现该程序的搜索行为-让它在程序的终端用户搜索某个标题时,能够真正的从D去获取故事内容。
如果你想知道怎么实现,请继续阅读下一篇:
使用Networking获取数据并填充DataGrid。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- SilverLight 教程
![提示](https://static.bdocx.com/images/bang_tan.gif)