C# WinUI 3 格線布局 Grid 示範

預設排列

如果並沒有指定任何排列資訊，則 Grid 中預設左右和上下的格子數都會是 1 ，內容會重疊顯示，越晚被定義的元件會放在越上面:

    
<Grid>
    <Border Background="LightPink"/>
    <Border Background="LightGreen"/>
</Grid>
    

指定格數

我們會使用 ColumnDefinitions 來定義有幾個直條的數量，RowDefinition 定義有幾個橫向的數量，然後再透過指定 Grid 內元件的 Column (第幾個直條)和 Row (第幾個橫條) 來讓元件知道自己是在 Grid 內的哪個位子。稍微要注意的就是 Column 和 Row 都是從 0 開始算。
下方的範例就是有兩個 Column ，左側是粉紅色，右側是淺綠色:

    
<Grid>
    <Grid.ColumnDefinitions> <!-- 橫向(左右)的數量 -->
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions> <!-- 縱向(上下)的數量 -->
        <RowDefinition />
    </Grid.RowDefinitions>

    <Border Grid.Row="0" Grid.Column="0" Background="LightPink" />
    <Border Grid.Row="0" Grid.Column="1" Background="LightGreen" />
</Grid>
    

註：因為台灣與大陸地區的「行」與「列」是相反，故在此都使用英文 Column 和 Row 做說明。

設定高度和寬度

如果沒有特別指定高度和寬度，預設是平均分配，其他還有指定寬度像素、設定百分比、依據內容大小等指定方式:

<Grid.ColumnDefinitions> <!-- 橫向(左右)的數量 -->
    <ColumnDefinition Width="Auto"/> <!-- 依據內容決定寬度 -->
    <ColumnDefinition Width="100"/> <!-- 固定寬度 100 像素 -->
    <ColumnDefinition Width="*" /> <!-- * 代表剩餘空間總數的 1/6 -->
    <ColumnDefinition Width="5*"/> <!-- 5* 代表剩餘空間總數的 5/6 -->
</Grid.ColumnDefinitions>
    

上面的 1/6 和 5/6 是如何算出來的呢？ * 其實就是 1* ，所以 1* + 5* = 6* ，分母就是 6。 如果都是 "*"，權重都一樣，那就是平均分配了。

跨欄

假設 Grid 設定為 2x2 ，右側想要佔據 1x2 的空間該怎麼做?

跨 Row 可以使用 Grid.RowSpan 指定要占用的 Row 數量，而跨 Column 就是使用 ColumnSpan

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Border Grid.Row="0" Grid.Column="0" Background="LightPink"/>
    <Border Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="LightGreen"/>
</Grid>
    

參考資料：
Microsoft.Learn - Grid Class
台灣與大陸地區的用語差別 「行」與「列」