StackPanel 是一種依序排列子元素的容器,內容不會換行,只會往水平或垂直的其中一個方向延伸。
使用起來非常簡單,預設是垂直排列內容(Orientation="Horizontal"),
也可以改為水平排列:
透過下面加上邊框的圖可以發現只有增加元素間的距離,並不會影響到「內距」
我們在原始的 StackPanel1 外面再增加了一個 StackPanel2,單純用來顯示邊框。
由此可得知 內距是邊框與元素的距離,外距是外框和外部的距離..
預設元素「流動的方向」是從左到右(LeftToRight),只要改為由右到左(RightToLeft)即可
參考資料:
Microsoft.Learn - StackPanel.Spacing Property
使用起來非常簡單,預設是垂直排列內容(Orientation="Horizontal"),
<StackPanel>
<Rectangle Fill="Red" Width="50" Height="50" />
<Rectangle Fill="Blue" Width="50" Height="50" />
<Rectangle Fill="Green" Width="50" Height="50" />
<Rectangle Fill="Yellow" Width="50" Height="50" />
</StackPanel>
也可以改為水平排列:
<StackPanel Orientation="Horizontal">
<Rectangle Fill="Red" Width="50" Height="50" />
<Rectangle Fill="Blue" Width="50" Height="50" />
<Rectangle Fill="Green" Width="50" Height="50" />
<Rectangle Fill="Yellow" Width="50" Height="50" />
</StackPanel>
對齊
調整水平對齊:- 靠左: HorizontalAlignment="Left"
- 置中: HorizontalAlignment="Center"
- 靠右: HorizontalAlignment="Right"
- 靠上: VerticalAlignment="Top"
- 置中: VerticalAlignment="Center"
- 靠下: VerticalAlignment="Bottom"
外框
使用 BorderBrush 設定顏色,BorderThickness 設定寬度
BorderBrush="White"
BorderThickness="3"
元素間距
使用 Spacing 可以很容易的設定所有元素間的距離:
Spacing="10"
透過下面加上邊框的圖可以發現只有增加元素間的距離,並不會影響到「內距」
內距與外距
設定外距:
Margin="10" // 設定四邊的邊界
Margin="10,20" // 設定左右邊界10, 上下邊界20
Margin="10,20,30,40" // 設定左邊界10, 上邊界20, 右邊界30, 下邊界40
設定內距:
Padding="10" // 設定四邊的內距
Padding="10,20" // 設定左右10, 上下20
Padding="10,20,30,40" // 設定左10, 上20, 右30, 下40
阿內距和外距是什麼?直接看下面的範例:
<StackPanel x:Name="StackPanel2"
BorderBrush="Orange"
BorderThickness="3"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<StackPanel x:Name="StackPanel1"
Orientation="Horizontal"
Padding="10"
Margin="20"
BorderBrush="White"
BorderThickness="3">
<Rectangle Fill="Red" Width="50" Height="50" />
<Rectangle Fill="Blue" Width="50" Height="50" />
<Rectangle Fill="Green" Width="50" Height="50" />
<Rectangle Fill="Yellow" Width="50" Height="50" />
</StackPanel>
</StackPanel>
我們在原始的 StackPanel1 外面再增加了一個 StackPanel2,單純用來顯示邊框。
由此可得知 內距是邊框與元素的距離,外距是外框和外部的距離..
調整元素排列順序
平時我們已經習慣由左到右、由上到下,那能不能反過來排序呢?預設元素「流動的方向」是從左到右(LeftToRight),只要改為由右到左(RightToLeft)即可
FlowDirection="RightToLeft"
參考資料:
Microsoft.Learn - StackPanel.Spacing Property
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com