打开新页面时，它与 NavigationView 菜单重叠

Question

我制作了一个基本应用程序，它有一个带有两个选项的菜单，每个选项都会进入一个新页面。问题是这些页面是在主页面上启动的，因此它与菜单和后面的所有内容重叠。这些页面没有任何内容，它们的代码是一个简单的 xaml 和 xaml.cs。

我使用了一些微软开发者网页给出的例子，但结果是一样的。我还没有找到任何其他可能的解决方案，我无法理解正在发生的事情。

包含菜单的页面

<Grid>
  <NavigationView
    x:Name="NavView"
    ItemInvoked="NavViewItemInvoked"
    Windows10version1803:BackRequested="NavViewBackRequested"
    Windows10version1803:IsBackEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"
  >
    <NavigationView.MenuItems>
      <NavigationViewItem x:Name="HomePage" Content="Home" Icon="Home" />
      <NavigationViewItem x:Name="AddPage" Content="Add" Icon="Add" />
    </NavigationView.MenuItems>

    <NavigationView.AutoSuggestBox>
      <AutoSuggestBox x:Name="SearchBox" QueryIcon="Find" />
    </NavigationView.AutoSuggestBox>

    <ScrollViewer>
      <frame x:Name="ContentFrame" Padding="12,0,12,24" IsTabStop="True" NavigationFailed="ContentFrame_NavigationFailed" />
    </ScrollViewer>
  </NavigationView>

  <frame x:Name="frame" Margin="20,0,0,0" Navigating="OnNavigatingToPage">
    <Frame.ContentTransitions>
      <TransitionCollection>
        <NavigationThemeTransition>
          <NavigationThemeTransition.DefaultNavigationTransitionInfo>
            <EntranceNavigationTransitionInfo />
          </NavigationThemeTransition.DefaultNavigationTransitionInfo>
        </NavigationThemeTransition>
      </TransitionCollection>
    </Frame.ContentTransitions>
  </frame>

  <VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
      <VisualState>
        <VisualState.StateTriggers>
          <AdaptiveTrigger MinWindowWidth="{x:Bind NavView.CompactModeThresholdWidth}" />
        </VisualState.StateTriggers>
        <VisualState.Setters>
          <!-- Leave the next line for left-only navigation. -->
          <Setter Target="ContentFrame.Padding" Value="24,0,24,24" />
        </VisualState.Setters>
      </VisualState>
    </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
</Grid>

在菜单中打开所选项目的功能：

    private void NavViewItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
    {
        var label = args.InvokedItem as string;
        var pageType =
            label == "Home" ? typeof(HomePage) :
            label == "Add" ? typeof(AddPage) : null;
        if (pageType != null && pageType != AppFrame.CurrentSourcePageType)
        {
            AppFrame.Navigate(pageType);
        }
    }

我希望有人能告诉我发生了什么或错误在哪里。

非常感谢

Answer 1

据我了解，您的要求是拥有一个导航视图，该视图将使用框架在应用程序的不同页面之间导航。

我已经稍微简化了您的解决方案，希望这会有所帮助。 在以下解决方案中，我使用单帧进行导航。

XAML

<Grid>
    <NavigationView x:Name="NavView" ItemInvoked="NavViewItemInvoked">
        <NavigationView.MenuItems>
            <NavigationViewItem x:Name="HomePage" Content="Home" Icon="Home" />
            <NavigationViewItem x:Name="AddPage" Content="Add" Icon="Add" />
        </NavigationView.MenuItems>

        <NavigationView.AutoSuggestBox>
            <AutoSuggestBox x:Name="SearchBox" QueryIcon="Find" />
        </NavigationView.AutoSuggestBox>
        <!-- Removed scroll viewer not sure if this is required -->
        <Frame x:Name="ContentFrame" IsTabStop="True"
         NavigationFailed="ContentFrame_NavigationFailed" />            
    </NavigationView>
</Grid>

C#

private void NavViewItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
    {
        var label = args.InvokedItem as string;
        var pageType =
            label == "Home" ? typeof(HomePage) :
            label == "Add" ? typeof(AddPage) : null;
        if (pageType != null && pageType != ContentFrame.CurrentSourcePageType)
        {
            ContentFrame.Navigate(pageType);
        }
    }

---

---

解释：

如上所述，此解决方案只有一帧用于导航。 每当用户在导航视图中选择一个项目时，它会将ContentFrame 导航到所需的页面[ContentFrame.Navigate(pageType)]； .

如果您需要更多解释，请告诉我或参考Martin Zikmund's Answer

Answer 2

你的 UI 结构如下所示

• NavigationView
  • Frame (ContentFrame)
• Frame (AppFrame)

XAML 中的基本规则是，对于同一级别的内容，代码中后面的内容绘制在前面的内容之上。当然，这非常简化，因为您可以以不重叠的方式布局子面板，但我们现在正在考虑您的特殊情况。

NavigationView 和第二个Frame 处于同一级别，并且都在根Grid 内，没有指定任何Grid.Column 或Grid.Row 属性。在这种情况下，Frame 就在NavigationView 的正上方。起初这并不重要，因为那里没有内容，因此Frame 是“不可见的”。但是，一旦您实际在 Frame 内导航，页面将完全覆盖 NavigationView，而这又会“消失”。

然而，我发现令人困惑的是，您的代码中有两个 Frame 控件。您实际应该使用的是名为ContentFrame 的那个。这个嵌入在NavigationView 中，这是展示页面的最常见方式。因此，如果您完全删除第二个 Frame 并将所有代码更改为使用 ContentFrame，您应该会得到您想要的行为。