WPF教程(二十五)WrapPanel
WrapPanel用於一個接一個的排列子控制元件,以水平或者垂直方向,當空間不足時就會自動切換到下一行。適合於需要水平或者垂直排列控制元件且能自動換行的情況。
水平方向排列時,每一行所有子控制元件的高度都被統一成固定的值,這個值由最高的那個決定;每一列垂直方向排列時,所有子控制元件的寬度都被統一成固定的值,這個值由最寬的那個決定。
我們先來看預設情況下的WrapPanel:
<Window x:Class="WpfTutorialSamples.Panels.WrapPanel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WrapPanel" Height="300" Width="300"> <WrapPanel> <Button>Test button 1</Button> <Button>Test button 2</Button> <Button>Test button 3</Button> <Button Height="40">Test button 4</Button> <Button>Test button 5</Button> <Button>Test button 6</Button> </WrapPanel> </Window>
注意我為第二行中的一個按鈕指定了一個高度,這就使得第二行所有按鈕都被設定成了這個高度。另外,這個面板還做了一件事件:第一行放不下的時候,自動了切換到第二行。
如果你改變視窗大小,譬如縮小視窗,面板立馬自動調整以適應新的尺寸:
這些規則在垂直方向排列時也是一樣的。來看例子:
<Window x:Class="WpfTutorialSamples.Panels.WrapPanel" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WrapPanel" Height="120" Width="300"> <WrapPanel Orientation="Vertical"> <Button>Test button 1</Button> <Button>Test button 2</Button> <Button>Test button 3</Button> <Button Width="140">Test button 4</Button> <Button>Test button 5</Button> <Button>Test button 6</Button> </WrapPanel> </Window>
可以看到,垂直排列規則和水平方向的一模一樣。按鈕到達底部後就自動切換到第二列。我給第四個按鈕設定了較寬的寬度,所以第二列都變成了這個寬度。
特別要注意,水平向的WrapPanel自動匹配同一行的高度,而不會匹配寬度;垂直向的WrapPanel自動匹配同一列的寬度,而不會匹配高度。看下面的例子,垂直向的WrapPanel在第四個按鈕同時設定了寬和高:
<Button Width="140" Height="44">Test button 4</Button>
可以看出第五個按鈕只使用了第四個按鈕的寬,並沒有使用高。於是第6個按鈕被擠到了第三列。