WPF中的StackPanel、WrapPanel、DockPanel

標籤：pre   com   最大值   panel   flow   列表   alt   固定   app   

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

WPF中的StackPanel、WrapPanel、DockPanel（轉）