При открытии новой страницы она перекрывает меню NavigationView

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 состоит в том, что для контента на том же уровне то, что происходит в коде, рисуется выше того, что предшествует.Конечно, это очень упрощено, так как вы можете расположить дочерние элементы панели таким образом, чтобы они не перекрывались, но мы сейчас рассматриваем ваш конкретный случай.

* * * * * * * * * * * * * * * * * * * * * 10 * * * * * *на одном уровне, и оба находятся в корне 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)]; ,

Дайте мне знать, если вам нужно больше объяснений или обратитесь к Ответ Мартина Цикмунда