在 WPF 上浏览页面时出现白条

Question

我是一名学生，正在尝试了解 WPF 的工作原理。按下按钮后我正在导航到另一个页面，但由于某种原因，当我加载该页面时，屏幕底部有一个白色条。如果我直接将其加载到主窗口上，则不会发生这种情况。我怎样才能摆脱它？

我尝试了一些方法，例如更改图像或调整页面大小，但这些都不起作用。

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"/>
        <StackPanel>
            <Frame x:Name="mainMenu" NavigationUIVisibility="Hidden" VerticalAlignment="Bottom"></Frame>
        </StackPanel>
    </Grid>
</Window>

private void ChangePage(object sender, RoutedEventArgs e)
{
    mainMenu.NavigationService.Navigate(new MainMenu());
}

页码：

<Page x:Class="PokemonGroveGreen.MainMenu"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:PokemonGroveGreen"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="MainMenu">

    <Viewbox Stretch="Fill" StretchDirection="Both">
        <Grid>
            <Image Source="/Images/BattleScene.jpg" Stretch="Uniform"></Image>
        </Grid>
    </Viewbox>
</Page>

Answer 1

图像与 Viewbox 的大小不符。您需要更改

Stretch

属性以反映您想要的图像外观。如果您想拉伸图像，则需要将其设置为

Fill

；如果您想裁剪图像，则需要将其设置为

UniformToFill

。

枚举
填写1	调整内容大小以填充目标尺寸。纵横比不会保留。
无 0	内容保留其原始大小。
制服2	内容会调整大小以适合目标尺寸，同时保留其原始宽高比。
统一填充 3	内容会调整大小以填充目标尺寸，同时保留其原始宽高比。如果目标矩形的长宽比与源矩形不同，源内容将被剪裁以适合目标尺寸。