[SOLVED] DotNet MAUI Pages

DotNet MAUI Pages

Good day, I am trying to understand the new dotnet MAUI page layout. I want to put a menu bar at the top of the page, And I keep getting the same error: "The property Content is set more than once."

Below is my code of the mainPage.xaml

<?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}">

<StackLayout Padding="20" Spacing="10" VerticalOptions="Center" HorizontalOptions="Center">
    <Label Text="This is Just a test!"
            FontSize="Large"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
</StackLayout>

<BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type shared:Routes}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

Solution

a ContentPage can only have a single child element. You have two. To fix this, move your BlazorWebView inside of the StackLayout

<StackLayout Padding="20" Spacing="10" VerticalOptions="Center" HorizontalOptions="Center">
    <Label Text="This is Just a test!"
            FontSize="Large"
            HorizontalOptions="Center"
            VerticalOptions="Center" />

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
       <BlazorWebView.RootComponents>
          <RootComponent Selector="#app" ComponentType="{x:Type shared:Routes}" />
       </BlazorWebView.RootComponents>
    </BlazorWebView>

</StackLayout>