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

概述  上一篇，介绍了Canvas布局控件在Blend中的使用。本篇继续介绍布局控件StackPanel,ScrollViewer和Border。 相对于Grid和Canvas来说，StackPanel,ScrollViewer和Border是比较简单的布局控件，实现的功能相对来说单一。 首先来说说StackPanel控件。从字面意思理解，是堆栈面板的意思。堆栈内的所有内容将按照顺序进行排列，排列方式

 

上一篇，介绍了Canvas布局控件在Blend中的使用。本篇继续介绍布局控件StackPanel,ScrollVIEwer和border。

相对于GrID和Canvas来说，StackPanel,ScrollVIEwer和border是比较简单的布局控件，实现的功能相对来说单一。

首先来说说StackPanel控件。从字面意思理解，是堆栈面板的意思。堆栈内的所有内容将按照顺序进行排列，排列方式分水平排列和垂直排列两种方式。

对于StackPanel的使用，主要是对控件水平或者垂直排列，使用该控件排列控件，比GrID设置表格控制要容易很多。

例如，在GrID中要设置Row和Column，然后将控件放置到各个Cell中，才能达到对齐布局的效果，而在StackPanel中只要使用OrIEntation属性控制就可以了。

这里我们简单演示一下，在Blend中应用StackPanel

选中StackPanel后，在主窗口画一个StackPanel容器。

然后选择按钮控件，在StackPanel中，画一个高为30的按钮。然后选中该按钮，复制创建三个新按钮，在复制粘贴的时候，会发现，每次创建一个新按钮会在布局中自动向下排列。这点和GrID和Canvas不同，在GrID和Canvas中复制粘贴控件，将会自动覆盖上一个控件，需要用ZIndex控制其位置。

选中StackPanel，查看右边PropertIEs属性栏，其中Layout中多了一个OrIEntation选项，默认为Vertical垂直排列。

点击展开下拉菜单，可以看到Horizontal水平排列，选中后，以上四个按钮分布将自动以水平方式排列。

和GrID相同，StackPanel也支持margin和Horizontal Alignment，Vertical Alignment属性，这里我就不在赘述，详细大家可以看“布局快速入门Grid”

 

ScrollVIEwer控件，是从WPF中移植来的，针对大内容控件的布局控件。由于该控件内仅能支持一个子控件，所以在多数情况下，ScrollVIEwer控件都会和Stackpanel，Canvas和GrID相互配合使用。如果遇到内容较长的子控件，ScrollVIEwer会生成滚动条，提供对内容的滚动支持。

创建一个ScrollVIEwer控件，会看到该控件右边自带滚动框，

我们将上例拖拽进新创建的ScrollVIEwer控件，Blend会提示按“Alt”将拖拽控件放入ScrollVIEwer，

放置成功后，由于内容过长，ScrollVIEwer的滚动条自动激活。对于ScrollVIEwer的滚动条，可以通过PropertIEs属性栏进行设置控制，可以禁用，隐藏，或者设置仅在需要时候自动显示。

HorizontalScrollbarVisibility和VerticalScrollbarVisibility属性：

auto = 仅在需要时候自动显示滚动条

Disabled = 禁用滚动条

HIDden = 隐藏滚动条

Visible =显示滚动条

 

border控件，是最简单的布局控件，也是最早期的一款Silverlight布局控件，该控件允许用户创建一个带有边框的布局控件。使用border控件唯一需要注意的是该控件内仅能支持一个子控件。

在Blend中，绘制border控件同样很简单，

 

将上例中的StackPanel拖拽进新创建的border控件。

Blend会提示按着“Alt”是将控件放置在border中，否则将修改margin进行重新布局。这里我们按着Alt，完成拖拽。

Blend自动生成XAML代码如下：

 

1  < border  margin ="154,17,22,80"  GrID.Column ="1"  GrID.Row ="1"  borderBrush ="Black"  borderThickness ="1" >
2       < StackPanel  margin ="20,12,25,15"  OrIEntation ="Vertical" >
3           < button  Height ="30"  HorizontalAlignment ="left"  margin ="8,0"  WIDth ="103"  Content ="button" />
4           < button  Height ="30"  HorizontalAlignment ="left"  margin ="8,0"  WIDth ="103"  Content ="button" />
5           < button  Height ="30"  HorizontalAlignment ="left"  margin ="8,0"  WIDth ="103"  Content ="button" />
6           < button  Height ="30"  HorizontalAlignment ="left"  margin ="8,0"  WIDth ="103"  Content ="button" />
7       </ StackPanel >
8  </ border >

 

其中borderBrush是边框颜色；

borderThickness是边框的宽度；

修改以上两个属性，同样可以在右边的PropertIEs属性栏进行修改。

 

至此，Silverlight的布局控件，我们已经介绍完了，笔者建议，在学习的过程中，还要配合实践，这样会达到熟练的效果。

总结

以上是内存溢出为你收集整理的Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border全部内容，希望文章能够帮你解决Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。