Question

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

我使用了Microsoft开发人员网页提供的一些示例，但是结果是相同的。我还没有找到其他可能的解决方法，也无法理解正在发生的事情。

包含菜单的页面

<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

用户界面的结构如下

NavigationView
- Frame（ContentFrame）
Frame（AppFrame）

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

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

但是我感到困惑的是，您的代码中有两个Frame控件。您实际应该使用的一个是名为ContentFrame的那个。此页面嵌入NavigationView中，这是显示页面的最常用方法。因此，如果您完全删除第二个Frame并将所有代码更改为使用ContentFrame，则应该获得所需的行为。

Answer 2

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

我已经简化了您的解决方案，希望对您有所帮助。在以下解决方案中，我将单个框架用于导航。

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

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

2 个答案: