打开新页面时，它与 NavigationView 菜单重叠 [英] When opening a new page it overlapses the NavigationView menu

问题描述

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

I made a basic app that has a menu with two options, each of them takes to a new page. The problem is that those pages are launched over the main one so it overlapses the menu and everything behind. Those pages don't have any content, their code is an simple xaml and xaml.cs.

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

I used some examples that Microsoft developer webpage gives, but the result is the same. I haven't found any other possible solution and I am not able to understand what is happening.

包含菜单的页面

<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>

在菜单中打开所选项目的函数:

Function that opens the selected item in the menu:

    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);
        }
    }

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

I hope someone could tell me what it's happening or where is the mistake.

非常感谢

推荐答案

据我所知，您的要求是有一个导航视图，它将使用框架在应用程序的不同页面之间导航.

From what I understood , your requirement is to have a navigation view which will use a frame to navigate between the different pages of the application.

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

I have simplified your solution a bit hopefully this should help. In the following solution I have used a single frame for the navigation.

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)];.

As mentioned above, this solution has only one frame for the navigation. Whenever user selects an item in the Navigation View, it will navigate the ContentFrame to the desired page [ContentFrame.Navigate(pageType)]; .

如果您需要更多解释或参考 Martin Zikmund 的回答

Let me know if you require any more explanation or refer to Martin Zikmund's Answer

这篇关于打开新页面时，它与 NavigationView 菜单重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！