C# WinUI 3 屬性 'Content' 設定了一次以上 解決方式

筆者最常使用 C# 開發 WinForms 和 ASP.NET Core 專案，對 WPF 一竅不通。雖然一直以來開發桌面應用程式時都是使用 WinForms ，但心底也一直想要學習 WPF ，現在似乎是 WPF 未來的 WinUI 3 所使用的 Windows App SDK 都出到 1.2 了，不能再繼續給自己找藉口，於是筆者就開始了 WinUI 3 的自學之旅。

一開始接觸 XAML ，很自然的在 Window 標籤中再多加了一個 Button ，想要看他是怎麼排列的，沒想到直接出現了一個錯誤:

    
XLS0501	屬性 'Content' 設定了一次以上。

    

    
WMC0035	Duplication assignment to the 'Content' property of the 'Window' object	
    

原來有限制在 Window 中(就是 Content)只能有一個元素，所以通常會放置可以儲存多個元素的容器(除非整個畫面只有一個元件)。
而預設範本中的 StackPanel 就可以儲存多個元素，放在 StackPanel 內當然可以解決問題，不過他只能將全部元素水平或垂直排列，無法自由的排列。所以最常使用的容器就是 Grid ，他就是表格，可以自己決定要放在哪一格，這裡示範一個最簡單的排版:

    
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />   <!-- 上方 Grid，高度為 100 像素 -->
        <RowDefinition Height="*" />   <!-- 下方 Grid，高度為剩餘空間 -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />   <!-- 左側 Grid，寬度為 200 像素 -->
        <ColumnDefinition Width="*" />   <!-- 右側 Grid，寬度為剩餘空間 -->
    </Grid.ColumnDefinitions>

    <!-- 上方 -->
    <Border Grid.Row="0" Grid.ColumnSpan="2" Background="LightPink" />

    <!-- 左側 -->
    <Border Grid.Row="1" Grid.Column="0" Background="LightGreen" />

    <!-- 右下 -->
    <Border Grid.Row="1" Grid.Column="1" Background="LightYellow" />
</Grid>
    

所以只要在 Window 標籤中加入 Grid ，再將其他所有內容塞入就不會再出現這個錯誤了。

註： 如果要做側邊導航列有一個專門的元件: NavigationView ，筆者這裡只是最簡單示範 Grid 的使用方式

參考資料：
Microsoft.Learn - Grid Class
Microsoft.Learn - Layout panels
Microsoft.Learn - NavigationView Class