UWP布局求助：如何让Grid与Frame并排且WebView自动占剩余空间

原代码的问题在于第三行的两个控件直接叠加在同一Grid行中，没有通过列布局实现并排。以下是调整后的代码，可实现你需要的布局效果：

<Page
    x:Class="Project_NewSpartan.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Project_NewSpartan"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <!-- 定义三行布局 -->
        <Grid.RowDefinitions>
            <!-- 标题栏行：自动适应内容高度 -->
            <RowDefinition Height="Auto"/>
            <!-- 导航栏行：自动适应内容高度 -->
            <RowDefinition Height="Auto"/>
            <!-- 主内容行：占满剩余垂直空间 -->
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 第一行：标题栏Frame -->
        <Frame x:Name="TitlebarFrame" Grid.Row="0"/>
        
        <!-- 第二行：导航栏Frame -->
        <Frame x:Name="NavigationFrame" Grid.Row="1"/>

        <!-- 第三行：嵌套Grid实现WebView与固定宽度Grid的并排 -->
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <!-- 第一列：自动占据剩余宽度，放置WebView（通过MainFrame承载） -->
                <ColumnDefinition Width="*"/>
                <!-- 第二列：固定200宽度，放置右侧Grid -->
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>

            <!-- 左侧：承载WebView的MainFrame -->
            <Frame x:Name="MainFrame" Grid.Column="0"/>
            <!-- 右侧：固定宽度200的Grid -->
            <Grid Grid.Column="1" Background="Red"></Grid>
        </Grid>
    </Grid>
</Page>

关键调整说明 #

• 第三行使用嵌套Grid管理横向布局，通过ColumnDefinitions定义两列：*表示占满剩余空间，200表示固定宽度
• 将原有的MainFrame和右侧Grid分别放在嵌套Grid的不同列中，彻底避免控件重叠
• 右侧Grid不再需要HorizontalAlignment="Right"和MaxWidth，通过列宽直接固定为200，布局逻辑更稳定直观

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