WPF教程（二十六）StackPanel

StackPanel基本和WrapPanel一樣，但是有一個重要的區別：StackPanel不會自動切換內容。相反，它會讓內容朝一個方向延伸，一個接一個的堆起來。先來快速看一個例子：

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
        <StackPanel>
                <Button>Button 1</Button>
                <Button>Button 2</Button>
                <Button>Button 3</Button>
                <Button>Button 4</Button>
                <Button>Button 5</Button>
                <Button>Button 6</Button>
        </StackPanel>
</Window></span>

一眼就能看出StackPanel根本不管是否有足夠的空間放下里面的內容，它不會以任何形式包住內容，也不會自動提供滾動的功能（你可以添加一個ScrollViewer控件來實現滾動，後面會講到）。

我們還發現，StackPanel默認的排列方向是垂直的，不像WrapPanel默認的是水平方向。這個方向也是很容易就能修改的：

<span style="font-size:14px;"><StackPanel Orientation="Horizontal"></span>

另外一個你值得注意的是，StackPanel會自動延伸它的子控件。在一個垂直向的StackPanel裏，所有的子控件往水平方向延伸，如前面第一個例子就是。而在一個水平向的StackPanel，所有子控件往垂直方向延伸，如上面這個例子。StackPanel通過設置子控件的HorizontalAlignment和VerticalAlignment屬性來實現延伸，你可以隨時重寫這兩個屬性。下面我們把上面的例子稍作修改，給所有的按鈕指定VerticalAlignment屬性：

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
        <StackPanel Orientation="Horizontal">
                <Button VerticalAlignment="Top">Button 1</Button>
                <Button VerticalAlignment="Center">Button 2</Button>
                <Button VerticalAlignment="Bottom">Button 3</Button>
                <Button VerticalAlignment="Bottom">Button 4</Button>
                <Button VerticalAlignment="Center">Button 5</Button>
                <Button VerticalAlignment="Top">Button 6</Button>
        </StackPanel>
</Window></span>

我們使用Top、Center和Bottom值來將按鈕放置成一個漂亮的模式，當然只是爲了好玩。同樣的，垂直向的StackPanel也可以這樣做，使用HorizontalAlignment屬性：

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
        <StackPanel Orientation="Vertical">
                <Button HorizontalAlignment="Left">Button 1</Button>
                <Button HorizontalAlignment="Center">Button 2</Button>
                <Button HorizontalAlignment="Right">Button 3</Button>
                <Button HorizontalAlignment="Right">Button 4</Button>
                <Button HorizontalAlignment="Center">Button 5</Button>
                <Button HorizontalAlignment="Left">Button 6</Button>
        </StackPanel>
</Window></span>

如你所見，按鈕依舊從上往下排列，不同的是它們按設置的屬性值分佈到左邊、右邊和中間。