Create two sections in the WinUI3 app for Windows 11-CodePudding

I'm developing a new application in WinUi3 for Windows 11 but I'm having some doubts and difficulties (I've developed UWP apps and haven't had this problem, in WinUi3 the behavior seems to be different) I have this example:

<StackPanel Name="Main" Orientation="Vertical">
        <RelativePanel Background="{ThemeResource SystemControlAcrylicWindowBrush}">
            <TextBlock  Name="AAA"
                        Text="AAA"
                RelativePanel.AlignHorizontalCenterWithPanel="True"
                RelativePanel.AlignLeftWithPanel="True">
        </RelativePanel>
        
        <RelativePanel Background="{ThemeResource SystemControlAltHighAcrylicWindowBrush}">
        <TextBlock  Name="BBB"
                Text="BBB"/>
    </RelativePanel>
</StackPanel>

I want something like that in the new Paint:

Orange zone only for a simple textblock and some buttons (settings, about, etc.) and red zone to my "work zone" of my app.

I want to make this two sections. But my code in WinUI3 dont work like I want. What is the best way to do that?

Thank you!

CodePudding user response：

Your "work zone" can be expanded using Grid.

<Grid Name="Main" RowDefinitions="Auto,*">
    <!--  MENU BAR  -->
    <NavigationView
        Grid.Row="0"
        IsBackButtonVisible="Collapsed"
        IsSettingsVisible="True"
        PaneDisplayMode="Top">
        <NavigationView.MenuItems>
            <NavigationViewItem Content="Ficheiro" />
            <NavigationViewItem Content="Editar" />
            <NavigationViewItem Content="Ver" />
        </NavigationView.MenuItems>
    </NavigationView>
    <!--  YOUR CONTENTS  -->
    <StackPanel
        Grid.Row="1"
        BorderBrush="Red"
        BorderThickness="2">
        <TextBlock Text="CONTENT #1" />
        <TextBlock Text="CONTENT #2" />
    </StackPanel>
</Grid>

And "Ta-da!"