WPF页面导航时底部出现白栏问题求助

问题原因 #

底部白栏的核心诱因是Frame的布局配置错误：

• Frame被嵌套在StackPanel中，而StackPanel的垂直布局特性会让子元素仅占用自身内容所需高度，无法自动填充窗口剩余空间。
• 额外设置的VerticalAlignment="Bottom"强制Frame靠窗口底部显示，进一步压缩了页面内容的显示区域，最终导致底部出现空白。

修复步骤 #

修改MainWindow.xaml中的Frame布局逻辑：

1. 移除包裹Frame的StackPanel，直接将Frame放在Grid容器内（Grid默认会让子元素填充可用空间）。
2. 删除Frame的VerticalAlignment="Bottom"属性，添加HorizontalAlignment="Stretch"和VerticalAlignment="Stretch"，让Frame填满整个窗口的可用区域。

修改后的MainWindow.xaml代码：

<Window x:Class="PokemonGroveGreen.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PokemonGroveGreen"
        mc:Ignorable="d"
        Title="Pokémon GroveGreen" Height="450" Width="800">

    <Grid>
        <Button x:Name="menu" Content="Battle"  Click="ChangePage" Margin="349,191,349,191"/>
        <Frame x:Name="mainMenu" NavigationUIVisibility="Hidden" 
               HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </Grid>
</Window>

可选优化 #

若希望按钮始终悬浮在页面上方、不被Frame内容覆盖，可以给Grid添加行定义拆分区域：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button x:Name="menu" Content="Battle"  Click="ChangePage" Grid.Row="0"/>
    <Frame x:Name="mainMenu" NavigationUIVisibility="Hidden" Grid.Row="1"/>
</Grid>

效果对比 #

• 修复前（带白栏）：
  
• 修复后（无白栏）：
  

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