Silverlight玩转控件(三)——StackPanel布局

d在上一次文章中，我们介绍了Canvas的布局。我们也知道，在Silverlight中有Canvas,StackPanel,Grid三种布局方式，今天我们就来详细地说一下StackPanel的布局。

Stack，栈！这个词我们大家再熟悉不过，一种先进后出的数据结构。我觉得用这个来比喻我们这种布局方式蛮形象。呵呵，稍后再说这个。

StackPanel其实像极了JAVA GUI中的FlowLayout，流布局。

我们来看个例子：

<StackPanel Background="White">
    <Button Content="AAA"></Button>
    <Button Content="BBB"></Button>
</StackPanel>

 

效果如下：

 

想起来FlowLayout了么?

我们看看默认的布局方式：

1. 默认情况下，是水平布局。像不像一个栈底在上的栈，我们把每个控件不停地压进去呢？

2. 默认情况下，是Stretch，也就是拉伸方式来填充我们的控件屏幕。

好，那我们如何改变。

先来看第一种情况，让我们将水平布局改成垂直布局。

<StackPanel Background="White" Orientation="Horizontal">
    <Button Content="AAA"></Button>
    <Button Content="BBB"></Button>
</StackPanel>

效果如下：

看到啦！拉伸效果，垂直布局。

接下来，我们不允许按钮以拉伸方式来填充控件空间。很简单，我们来显式地设置控件的长和宽就OK了！看代码：

<StackPanel Background="White">
    <Button Content="AAA" Width="30"></Button>
    <Button Content="BBB" Width="60"></Button>
</StackPanel>

 

垂直布局情况下也是一样，只不过我们在水平布局的时候设置的是控件的Width属性，而当我们垂直布局的时候只需要设置控件的Height属性罢了！

接下来，我们看一个小技巧，在上文中，我们看到我们可以自己定制控件的长宽，使其避免以拉伸方式填充屏幕。但是我们这个时候发现，控件都是以居中方式布局。

好了，我们在上文中提出了两种默认的布局情况，在这里我们提出第三条：

3. 默认情况下，是居中布局。

同样，我们也是考虑如何修改，这里给出两种修改的方式：

1. 为每个控件提供自己独有的布局方式：

<StackPanel Background="White">
    <Button Content="AAA" Width="30" HorizontalAlignment="Left"></Button>
    <Button Content="BBB" Width="60" HorizontalAlignment="Center"></Button>
    <Button Content="CCC" Width="30" HorizontalAlignment="Right"></Button>
</StackPanel>

当然，我们还可以用我们熟悉的Margin属性来改变布局方式：

<StackPanel Background="White">
    <Button Content="AAA" Width="30" Margin="10,0,0,0"></Button>
    <Button Content="BBB" Width="60" Margin="20,40,20,19"></Button>
    <Button Content="CCC" Width="30" ></Button>
</StackPanel>

 

我们看到的并非我们想象中的代码，而是:

 

其实，他的Margin的距离是这样的：（我们在这里只限于讨论水平布局的情况）：

Left – Right: 于居中布局的距离

Top:于顶部控件（如果是最顶部控件则是屏幕最上方）的距离

Buttom：于底部控件（如果是最底部控件则是屏幕最下方）的距离

恩！好了，说过的水平的布局，垂直的布局其实也是一样：

我们来看下代码：

<StackPanel Background="White" Orientation="Horizontal">
    <Button Content="AAA" Width="30" VerticalAlignment="Bottom"></Button>
    <Button Content="BBB" Width="60" VerticalAlignment="Center"></Button>
    <Button Content="CCC" Width="30" VerticalAlignment="Top"></Button>
</StackPanel>

所得到的效果如下：

好了，StackPanel的基本布局方式就说到这里，关于StackPanel的技巧型用法也像我上文中所说的Panel局部一样，不再赘述。

在这里，我谈下对StackPanel的看法。个人认为，在实际应用中，StackPanel的应用并不广泛，他没有Panel的灵活，也没有Grid的定制，因此相对属于一个鸡肋的布局控件。

好了，今天就说到这。

欢迎大家继续关注下文：《Silverlight玩转控件(四)——Grid布局》。