现在的位置: 首页 > 综合 > 正文

跟互联力量学Silverlight之七_StackPanel控件和布局属性用法

2012年07月23日 ⁄ 综合 ⁄ 共 960字 ⁄ 字号 评论关闭

本章开始具体描述Silverlight StackPanel控件和布局属性用法,有关Panel控件总的特点,参考互联力量的Panel和Border控件用法

StackPanel是简单的布局控件之一,它可以将子元素按单行或单列的方式排列,比如,将多个Button和TextBlock对齐垂直排列,可以这样写:

图1

运行的结果是

图2

你可能会问,怎么横着排列呢?只需要这样:<StackPanel Orientation=”Horizontal” > StackPanel里面的内容全部横向排列。对StackPanel的子元素,仍然可以单独设置每个元素各自的对齐方式,如:设置TextBlock的文本居中显示,写法是:<TextBlock Text=”Foxitjob.com” FontSize=”30″ HorizontalAlignment=”Center” />,显示效果,如下:

图3

从代码中,大家多次看到我用Margin属性,Silverlight的Margin和CSS的margin意义类似,但是四个值表达的方向顺序不同,如Margin=”1,2,3,4″,在Silverlight中表示外间距左边1像素,上2像素,右3像素,下4像素。例子中的button之间距离是10像素,是上间距和下间距之和。如果用C#写,是这样的:button1.Margin = new Thickness(5);下图可以很清楚的描述margin的算法

图4

每种元素都有width和height属性表示宽高,MaxWidth和MinWidth是干什么的呢,顾名思义,设置元素的最大和最小宽度,把前面的代码改写,如下:

图5

运行的效果,如下:

图6

你会发现,拉伸浏览器尺寸,三个Button的宽度有三种显示状态,Button3什么width都没有设置,所以它始终自适应浏览器宽度,类似CSS中的width=”100%”,Button2指定了Width为150,它一直保持宽度不变,Button1有MinWidth和MaxWidth,不管浏览器的宽度是多少,Button1最小的时候显示200宽,最大的时候显示300宽。

本章内容结束,下次讲DockPanel控件,版权所有 互联力量,原文出自:http://www.foxitjob.com/2010/07/364.html

抱歉!评论已关闭.