Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border

上一篇,介绍了Canvas布局控件在Blend中的使用。本篇继续介绍布局控件StackPanel,ScrollViewer和Border。
相对于Grid和Canvas来说,StackPanel,ScrollViewer和Border是比较简单的布局控件,实现的功能相对来说单一。
首先来说说StackPanel控件。从字面意思理解,是堆栈面板的意思。堆栈内的所有内容将按照顺序进行排列,排列方式分水平排列和垂直排列两种方式。
对于StackPanel的使用,主要是对控件水平或者垂直排列,使用该控件排列控件,比Grid设置表格控制要容易很多。
例如,在Grid中要设置Row和Column,然后将控件放置到各个Cell中,才能达到对齐布局的效果,而在StackPanel中只要使用Orientation属性控制就可以了。
这里我们简单演示一下,在Blend中应用StackPanel
Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border_第1张图片
选中StackPanel后,在主窗口画一个StackPanel容器。
Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border_第2张图片
然后选择按钮控件,在StackPanel中,画一个高为30的按钮。然后选中该按钮,复制创建三个新按钮,在复制粘贴的时候,会发现,每次创建一个新按钮会在布局中自动向下排列。这点和Grid和Canvas不同,在Grid和Canvas中复制粘贴控件,将会自动覆盖上一个控件,需要用ZIndex控制其位置。
Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border_第3张图片
选中StackPanel,查看右边Properties属性栏,其中Layout中多了一个Orientation选项,默认为Vertical垂直排列。
Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border_第4张图片
点击展开下拉菜单,可以看到Horizontal水平排列,选中后,以上四个按钮分布将自动以水平方式排列。
Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border_第5张图片
和Grid相同,StackPanel也支持Margin和 1  Margin ="1"  BorderBrush ="1" 2  StackPanel   Orientation
< ="30"  Margin ="103" />          Height ="Left"  Width ="Button" 5  Button   HorizontalAlignment ="8,0,0,0"  Content
< ="30"  Margin ="103" />      > >
 
其中BorderBrush是边框颜色;
BorderThickness是边框的宽度;
修改以上两个属性,同样可以在右边的Properties属性栏进行修改。
Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border_第6张图片
 
至此,Silverlight的布局控件,我们已经介绍完了,笔者建议,在学习的过程中,还要配合实践,这样会达到熟练的效果。

你可能感兴趣的:(WPF)