C# WinUI 3 相對布局 RelativePanel 示範

RelativePanel 與 Grid 的差異

筆者在測試時是在布局內部加入 Border 元件做測試，發現在 Grid 內放置 Border 時 Border 會自動填滿整個 Grid

    
<Grid>
    <Border Background="Red" />
</Grid>
    

但是如果直接將 Grid 換成 RelativePanel 時 Border 不會顯示在畫面上

    
<RelativePanel>
    <Border Background="Red" />
</RelativePanel>
    

使用 ActualWidth 和 ActualHeight 取得寬度和高度後發現在不指定 Border 寬度時，Grid 內的 Border 寬高會和父層 Grid 一樣，而在 RelativePanel 內部的 Border 寬高都是 0 。 如果 Border 有指定高度時，Grid 內的 Border 會在正中間，而 RelativePanel 內的 Border 會在左上角。

總結: 在 RelativePanel 中的元件預設位子是在左上角的座標 (0,0) ，內部元件必須要具有或是指定寬高

指定內部元件位置

如果內部有兩個元件，都沒有指定位置，則座標都是 (0,0) ，會出現在最左上角，後定義的元件會蓋掉先定義的:

    
<RelativePanel>
    <Border Background="Red" Height="100" Width="100"/>
    <Border Background="Green" Height="100" Width="100"/>
</RelativePanel>
    

先定義紅色再定義綠色，綠色就放在紅色上面了

RelativePanel 主要就是用來指定相對位置的，可以指定綠色 Border 在紅色 Border 的下方，但是在此之前要先給紅色 Border 名子，我們使用 Name 屬性命名為 BorderRed，為了說明方便我們也把綠色 Border 命名為 BorderGreen。再使用 RelativePanel.Below 屬性指定是在另一個元件的下方

    
<RelativePanel >
    <Border Name="BorderRed" Background="Red" Height="100" Width="100" />
    <Border Name="BorderGreen"  Background="Green" RelativePanel.Below="BorderRed" Height="100" Width="100" />
</RelativePanel>
    

因為沒有指定位置的元件的座標都是 (0,0)，和定義的順序沒有關係，所以也可以將先定義的 BorderRed 透過 RelativePanel.Below 屬性放在 BorderGreen 下方:

<RelativePanel >
    <Border Name="BorderRed" Background="Red" RelativePanel.Below="BorderGreen" Height="100" Width="100" />
    <Border Name="BorderGreen"  Background="Green" Height="100" Width="100" />
</RelativePanel>
    

RelativePanel 指定元件座標

前面提到 RelativePanel 中沒有指定位置元件的座標都是 (0,0)，那該如何指定 RelativePanel 內的元件座標呢?
ㄜ...不能...。上面提到的 (0,0) 只是為了方便理解預設是在左上角，但是在 RelativePanel 中並不能指定 x,y 的座標，只能指定相對位置。不過就算只有一個元件我們也還是可以指定元件預設的相對位置。

指定元件預設對齊位置

將元件指定預設位置為在 RelativePanel 的正中央:

<RelativePanel>
    <Border Background="Red" Height="100" Width="100"
            RelativePanel.AlignHorizontalCenterWithPanel="True"
            RelativePanel.AlignVerticalCenterWithPanel="True"
    />
</RelativePanel>
    

將元件指定預設位置為在 RelativePanel 的右下:

<RelativePanel>
    <Border Background="Red" Height="100" Width="100"
            RelativePanel.AlignRightWithPanel="True"
            RelativePanel.AlignBottomWithPanel="True" />
</RelativePanel>
    

常用對齊屬性:

• RelativePanel.AlignHorizontalCenterWithPanel="True": 水平對齊 RelativePanel 布局的中心
• RelativePanel.AlignVerticalCenterWithPanel="True": 垂直對齊 RelativePanel 布局的中心
• RelativePanel.AlignBottomWithPanel="True": 對齊 RelativePanel 布局的底部
• RelativePanel.AlignRightWithPanel="True": 對齊 RelativePanel 布局的右側

指定元件相對位置

• RelativePanel.LeftOf: 在 ... 的左側
• RelativePanel.RightOf: 在 ... 的右側
• RelativePanel.Below: 在 ... 的下方
• RelativePanel.Above: 在 ... 的上方
• RelativePanel.AlignHorizontalCenterWith: 與 ... 水平對齊
• RelativePanel.AlignVerticalCenterWith: 與 ... 垂直對齊

<-- 迷之音: 這根本就是在考英文 -->

邊界/間距

相對排列是沒問題了，阿看起來怎麼有點擠? 該如何增加間距呢?

這就不是 RelativePanel 的屬性了，直接使用 Margin 屬性。如果要設定上下左右的邊界都是 10 ，則設定 Margin="10" 即可，如果需要各別設定則是 Margin="1,2,3,4" ，從最前面開始分別代表: 左側、上方、右側、下方 的邊界:

<RelativePanel>
    <Border Name="BorderRed" Background="Red" Height="100" Width="100"
            Margin="1,2,3,4"
    />
</RelativePanel>
    

參考資料：
Microsoft.Learn - RelativePanel Class
Microsoft.Learn - Alignment, margin, padding