DotNet MAUI页面布局报错：Content属性被多次设置求助

报错原因 #

MAUI的ContentPage仅支持设置一个直接子元素，因为它的Content属性是单一值类型。你当前的代码直接在ContentPage下放置了StackLayout和BlazorWebView两个独立元素，相当于重复赋值Content属性，这就是报错的核心原因。

解决方案 #

将所有需要显示的元素放入一个容器布局中（比如Grid、VerticalStackLayout），让容器作为ContentPage的唯一直接子元素。以下是两种常见的修改方案：

方案1：使用Grid布局（推荐用于复杂布局）

Grid可以通过行/列划分区域，方便后续添加菜单栏并控制各元素位置：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:testpage"
         xmlns:shared="clr-namespace:testpage.Shared;assembly=testpage.Shared"
         x:Class="testpage.MainPage"
         BackgroundColor="{DynamicResource PageBackgroundColor}">

<!-- 定义Grid的行：第一行用于顶部内容/菜单，第二行占满剩余空间 -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" /> <!-- 高度自适应内容 -->
        <RowDefinition Height="*" /> <!-- 占满剩余空间 -->
    </Grid.RowDefinitions>

    <!-- 顶部测试区域，后续可替换为自定义菜单栏 -->
    <StackLayout Grid.Row="0" Padding="20" Spacing="10" HorizontalOptions="Center">
        <Label Text="This is Just a test!"
                FontSize="Large"
                HorizontalOptions="Center" />
    </StackLayout>

    <!-- BlazorWebView填充第二行 -->
    <BlazorWebView x:Name="blazorWebView" 
                   HostPage="wwwroot/index.html"
                   Grid.Row="1">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type shared:Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</Grid>

方案2：使用VerticalStackLayout（适合简单垂直排列）

如果只需要元素垂直顺序排列，用VerticalStackLayout更简洁：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:testpage"
         xmlns:shared="clr-namespace:testpage.Shared;assembly=testpage.Shared"
         x:Class="testpage.MainPage"
         BackgroundColor="{DynamicResource PageBackgroundColor}">

<VerticalStackLayout>
    <!-- 顶部区域，后续可替换为菜单栏 -->
    <StackLayout Padding="20" Spacing="10" HorizontalOptions="Center">
        <Label Text="This is Just a test!"
                FontSize="Large"
                HorizontalOptions="Center" />
    </StackLayout>

    <!-- BlazorWebView占满剩余垂直空间 -->
    <BlazorWebView x:Name="blazorWebView" 
                   HostPage="wwwroot/index.html"
                   VerticalOptions="FillAndExpand">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type shared:Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</VerticalStackLayout>

额外：添加顶部菜单栏 #

如果需要添加系统风格的顶部菜单，可直接在ContentPage下添加ToolbarItem，无需修改布局结构：

<ContentPage.ToolbarItems>
    <ToolbarItem Text="设置" Clicked="Settings_Clicked" />
    <ToolbarItem Text="帮助" Clicked="Help_Clicked" />
</ContentPage.ToolbarItems>

内容的提问来源于stack exchange，提问作者Kenneth Goodwin