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的定制，因此相对属于一个鸡肋的布局控件。

好了，今天就说到这。

 <Border Background="#FF2D2D2D" CornerRadius="8,8,8,8" BorderBrush="#FF626262" BorderThickness="2,2,2,2" 
                VerticalAlignment="Top" HorizontalAlignment="Left">
            <StackPanel Orientation="Horizontal" >
                <StackPanel Orientation="Vertical" Visibility="Collapsed">
                    <!--<Image   HorizontalAlignment="Left"  x:Name="tp"    Source="tp.png"  />
                    <Image   HorizontalAlignment="Left"   x:Name="sp"       Source="sp.png"  />
                    <Image   HorizontalAlignment="Left"   x:Name="fj"       Source="fj.png"  />-->
                    
                </StackPanel>

                <StackPanel  x:Name="stp1" >
                    <!--<Image x:Name="image" Width="350" Height="300" Source="http://192.168.3.222/FWTP/123456789.jpg" Stretch="Fill"></Image>-->
                </StackPanel>

                <StackPanel Orientation="Vertical">
                    <StackPanel Orientation="Horizontal">
                        <Button  Content="图片"   Style="{StaticResource ButtonStyle}" HorizontalAlignment="Left"   Name="showTP" Width="83"    Foreground="White"/>
                        <Button  Content="视频"   Style="{StaticResource ButtonStyle}" HorizontalAlignment="Left"   Name="showSP" Width="83"   Foreground="White"/>
                        <Button  Content="附件"   Style="{StaticResource ButtonStyle}" HorizontalAlignment="Left"   Name="showFJ" Width="83"   Foreground="White"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" >

                        <ScrollViewer x:Name="scrollViewer" 
                              VerticalScrollBarVisibility="Auto" 
                              Style="{StaticResource ScrollViewerStyle}" 
                              Width="250"  
                              MinHeight="100" 
                              MaxHeight="300" 
                              Margin="2" >
                            <ListBox x:Name="listBox" Style="{StaticResource ListBoxStyle}">
                                <ListBoxItem Content="条目" Foreground="White"></ListBoxItem>
                                <ListBoxItem Content="条目" Foreground="White"></ListBoxItem>
                                <ListBoxItem Content="条目" Foreground="White"></ListBoxItem>
                                <ListBoxItem Content="条目" Foreground="White"></ListBoxItem>
                            </ListBox>
                        </ScrollViewer>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </Border>