WinUI3 StackPanel 使用示範

StackPanel 是一種依序排列子元素的容器，內容不會換行，只會往水平或垂直的其中一個方向延伸。

使用起來非常簡單，預設是垂直排列內容(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