WPF and Silverlight 學習筆記(七):WPF佈局管理之StackPanel、WrapPanel、DockPanel
阿新 • • 發佈:2019-02-06
一、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屬性
在調整窗體大小,同時更改控制元件大小時,控制元件寬度、高度可變化的最大值和最小值
二、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>