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

　　顯然，隻使用StackPanel面闆還不餓能幫助使用者建立出實用的使用者界面。要設計出最終使用的使用者界面，StackPanel面闆還需要與其他更強大的布局容器協作。隻有這樣才能組裝成完整的視窗。

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

一、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面闆代替的面闆。

二、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>      

　　修改後效果圖如下所示：

 三、嵌套布局

　　很少單獨使用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>      

　　最終效果圖如下所示：

作者：Peter Luo

出處：https://www.cnblogs.com/Peter-Luo/

本文版權歸作者和部落格園共有，歡迎轉載，但必須給出原文連結，并保留此段聲明，否則保留追究法律責任的權利。