WPF中的StackPanel、WrapPanel、DockPanel（轉）

一、StackPanel

StackPanel是以堆疊的方式顯示其中的控件

1、可以使用Orientation屬性更改堆疊的順序

Orientation="Vertical"

默認，由上到下顯示各控件。控件在未定義的前提下，寬度為StackPanel的寬度，高度自動適應控件中內容的高度

 1: <StackPanel Orientation="Vertical">

 2: <Button>Button A</Button>

 3: <Button>Button B</Button>

 4: <Button>Button C</Button>

 5: <Button>Button D</Button>

 6: <Button>Button E</Button>

 7: <Button>Button F</Button>

 8: </StackPanel>

Orientation="Horizontal"

由左到右顯示各控件。控件在未定義的前提下，高度為StackPanel的高度，寬度自動適應控件中內容的寬度

 1: <StackPanel Orientation="Horizontal">

 2: <Button>Button A</Button>

 3: <Button>Button B</Button>

 4: <Button>Button C</Button>

 5: <Button>Button D</Button>

 6: <Button>Button E</Button>

 7: <Button>Button F</Button>

 8: </StackPanel>

2、設置控件的屬性，調整控件的顯示

Margin屬性
定義控件的外邊緣，可以通過以下幾種方式來設置
1）Margin=”10”：各邊緣均為10
2）Margin=”10,20,30,40”：設定左、上、右、下各邊緣分別為10、20、30、40
3）使用拆分式方式設定，如上下為10，左右為20

 1: <Button Content="Button A">

 2: <Button.Margin>

 3: <Thickness Top="10" Bottom="10" Left="20" Right="20" />

 4: </Button.Margin>

 5: </Button>

Width、Height屬性
設定控件的寬度和高度，取消自動的寬度和高度
HorizontalAlignment、VerticalAlignment屬性
設定控件的水平或豎直對齊方式，如整體Orientation="Vertical"的前提下，設置水平對齊為Left、Right或Center，在沒有設定寬度的情況下，控件的寬度自動調整
MinWidth、MinHeight、MaxWidth、MaxHeight屬性
在調整窗體大小，同時更改控件大小時，控件寬度、高度可變化的最大值和最小值

WPF StackPanel

                                       圖1.1

WPF中的StackPanel控件是一種簡單常用的布局控件。它可根據orientation屬性設置面板里面的每個子元素是依靠在前一個控件的旁邊（橫向）還是下面（縱向）。對於創建各種類型的列表非常有用。所有的繼承於ItemsControls的WPF控件，如ComboBox,ListBox和Menu控件都可以使用StackPanel做為它的內部布局面板。

 <StackPanel>

  <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
  <Button Margin="10">Black</Button>
  <Button Margin="10">With milk</Button>
  <Button Margin="10">Latte machiato</Button>
  <Button Margin="10">Chappuchino</Button>
</StackPanel>

 

上面這一段代碼將把StackPanel面板里面的每個控件，從上往下排列，如圖1.1所示。

 Stack Items horizontally

 有一個很好的例子，如有一個有“OK"和"Cancel“按鈕的對話框，因為按鈕上的文字可能因字體的改變而發生大小改變，我們應該避免固定按鈕大小的寫法。StackPanel會自動根據面板的大小的自動調整內部控件的大小。我們就不用為按鈕太大或太小而煩惱了。

 

  <StackPanel Margin="8" Orientation="Horizontal"> <Button MinWidth="93">OK</Button> <Button MinWidth="93" Margin="10,0,0,0">Cancel</Button> </StackPanel> 

二、WrapPanel

以流的形式由左到右，由上到下顯示控件，其功能類似於Java AWT布局中的FlowLayout

三、DockPanel

以上、下、左、右、中為基本結構的布局方式，類似於Java AWT布局中的BorderLayout。

但與BorderLayout不同的是，每一個區域可以同時放置多個控件，在同一區域放置的多個控件采用的布局方式為StackPanel方式。

如：

 1: <DockPanel >

 2: <Button Content="ButtonA" Width="70" DockPanel.Dock="Top" />

 3: <Button Content="ButtonB" Width="70" HorizontalAlignment="Right" DockPanel.Dock="Top" />

 4: <Button Content="ButtonC" Margin="10" DockPanel.Dock="Top" />

 5: <Button Content="ButtonD" DockPanel.Dock="Left" />

 6: <Button Content="ButtonE" DockPanel.Dock="Right" />

 7: <Button Content="ButtonF" DockPanel.Dock="Bottom" />

 8: <Button Content="ButtonG" />

 9: </DockPanel>