【WPF學習】第七章 WrapPanel和DockPanel面板

　　顯然，只使用StackPanel面板還不餓能幫助用戶建立出實用的用戶界面。要設計出最終使用的用戶界面，StackPanel面板還須要與其餘更強大的佈局容器協做。只有這樣才能組裝成完整的窗口。

　　最複雜的佈局容器是Grid面板，後面幾章會進行介紹。在介紹Grid面板以前，有必要首先看一下WrapPanel和DockPanel面板，它們是WPF提供的兩個更簡單的佈局容器。這兩個佈局容器經過不一樣的佈局行爲對StackPanel面板進行補充。

1、WrapPanel面板

　　WrapPanel面板在可能的空間中，以一次一行或一列的方式佈置控件。默認狀況下，WrapPanel.Orientation的屬性設置爲Horizontal；控件從左向右進行排列，再在下一行中排列。但可將WrapPenel.Orientation的屬性設置爲Vertical，從而在多個列中放置元素。

　　下面的示例中定義了一系列具備不一樣對齊方式的按鈕，並將這些按鈕放到一個WrapPanel面板中：

<Window x:Class="WrapPanelLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <WrapPanel Margin="5">
        <Button VerticalAlignment="Top">Top Button</Button>
        <Button MinHeight="60">Tall Button</Button>
        <Button  VerticalAlignment="Bottom">Bottom Button</Button>
        <Button>Stretch Button</Button>
        <Button VerticalAlignment="Center">Center Button</Button>
    </WrapPanel>
</Window>

　　下圖顯示瞭如何對這些阿牛進行換行以適應WrapPanel面板的當前尺寸(WrapPanel面板的當前尺寸是由包含它的窗口的尺寸決定的)。正如這個示例所演示的，WrapPanel面板水平地建立了一系列假想的行，每一行的高度都被設置所包含元素中最高元素的高度。其餘控件可能被拉伸以適應這一高度，或根據VerticalAlignment屬性的設置進行對齊。

 

　　當窗口大小進行變化時，有幾個按鈕被擠到第二行中。由於第二行沒有包含特別高的按鈕，因此第二行的高度保持最小按鈕的高度。所以，在該行中沒必要關係各按鈕的VerticalAlignment屬性的設置。

 

 

 　　WrapPanel面板是惟一一個不能經過靈活使用Grid面板代替的面板。

2、DockPanel面板

　　DockPanel面吧是更有趣的佈局選項。它沿着一條外邊緣來拉伸所包含的控件。理解該面板最簡便的方式是，考慮一下位於許多Windows應用程序窗口頂部的工具欄，這些工具欄停靠到窗口頂部。與StackPanel面板相似，被停靠的元素選擇它們的佈局的一方面。例如，若是將一個阿牛停靠在DockPanel面板頂部，該按鈕被拉伸至DockPanel面板的整個寬度，但根據內容和MinHeight屬性爲其設置所需的高度。而若是將一個按鈕停靠到容器左邊，該按鈕的高度將被拉伸以適應容器的高度，而其寬度能夠根據須要自由添加。

　　這裏很明顯的問題是：子元素如何選擇停靠的邊？答案是經過Dock附加屬性，可將該屬性設置爲Left、Right、Top或Bottom。放在DockPanel面板中的每一個元素都會自動捕獲該屬性。

　　下面的示例在DockPanel面板的每條邊上都停靠一個按鈕：

<Window x:Class="DockPanelLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel LastChildFill="True">
        <Button DockPanel.Dock="Top">Top Button</Button>
        <Button DockPanel.Dock="Bottom">Bottom Button</Button>
        <Button DockPanel.Dock="Left">Left Button</Button>
        <Button DockPanel.Dock="Right">Right Button</Button>
        <Button>Content Button</Button>
    </DockPanel>
</Window>

　　該例還將DockPanel面板的LastChildFill屬性設置爲True，該設置告訴DockPanel面板使最後一個元素佔滿剩餘空間。效果以下圖所示：

 

 　　顯然，當停靠控件時，停靠順序很重要。在這個示例中，頂部和底部按鈕充滿了DockPanel面板的整個邊緣，這是由於這兩個按鈕首先停靠。接着停靠左邊和右邊的按鈕時，這兩個按鈕將位於頂部按鈕和底部按鈕之間。若是改變這一順序，那麼左邊和右邊的按鈕將充滿整個面板的邊緣，二頂部和底部的按鈕則變窄一些，由於它們將在左邊和右邊的兩個按鈕之間進行停靠。

　　可將多個元素停靠到同一邊緣。這種狀況下，元素按標記中聲明的順序停靠到邊緣。並且，若是不喜歡空間分割或拉伸行爲，可修改Margin屬性、HorizontalAlignment屬性以及VerticalAlignment屬性，就像使用StackPanel面板進行佈局時所介紹的那樣。下面對前面示例進行修改：

<Window x:Class="DockPanelLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel LastChildFill="True">
        <Button DockPanel.Dock="Top">A Stretched Top Button</Button>
        <Button DockPanel.Dock="Top" HorizontalAlignment="Center">A Centered Top Button</Button>
        <Button DockPanel.Dock="Top" HorizontalAlignment="Left">A Left-Aligned Top Button</Button>
        <Button DockPanel.Dock="Bottom">Bottom Button</Button>
        <Button DockPanel.Dock="Left">Left Button</Button>
        <Button DockPanel.Dock="Right">Right Button</Button>
        <Button>Content Button</Button>
    </DockPanel>
</Window>

　　修改後效果圖以下所示：

 

 3、嵌套佈局

　　不多單獨使用StackPanel、WrapPanel和DockPanel面板。相反，它們一般用來設置一部分用戶界面的佈局。例如，可以使用DockPanel面板在窗口的合適區域放置不一樣的StackPanel和WrapPanel面板容器。

　　例如，假設但願建立一個標準對話框，在其右下角具備兩個按鈕，而且在窗口的剩餘部分是一塊較大的內容區域。在WPF中可採用幾種方法完成這一佈局，但最簡答的方法以下：

　　（1）建立水平StackPanel面板，用於將按鈕放置在一塊兒。

　　（2）在DockPanel面板中方式StackPanel面板，將其停靠到窗口底部。

　　（3）將DockPanel.LastChildFill屬性設置爲true，以使用窗口剩餘的部分填充其它內容。

　　（4）設置邊距屬性，提供必定的空間。

　　下面是最終的標記：

<Window x:Class="DockPanelLayout.CombineLayout"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CombineLayout" Height="300" Width="300">
    <DockPanel LastChildFill="True">
        <StackPanel DockPanel.Dock="Bottom" HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Margin="10,10,2,10" Padding="3">OK</Button>
            <Button Margin="2,10,10,10">Cancle</Button>
        </StackPanel>
        <TextBox DockPanel.Dock="Top" Margin="10">This is test.</TextBox>
    </DockPanel>
</Window>

　　最終效果圖以下所示：