层级导航模板 10 Hamburger Template

Question

我正在尝试弄清楚如何使用 Template 10 Hamburger Template 处理 UWP 应用中的页面层次结构。最后，我希望能够 select 应用程序的主要部分位于 Hamburger 菜单项之上，并有某种选项卡 selection 来浏览这些部分的视图和子视图，根据我当前所在的上下文更改可用选项卡。

应用程序的各个部分相当复杂，也应该可以导航，例如我应该能够使用后退按钮导航到下一个更高的层次结构，所以我认为选项卡导航必须基于框架导航。

当我浏览该部分的页面和子页面时，如何才能使我当前所在部分的汉堡包菜单项保持 selected？除了使用 HamburgerButtonInfo 的 PageType 属性（将项目的 selection 状态绑定到当前显示的页面）之外，还有其他方法吗？

一些图片来解释：1

Answer 1

使用模板 10 导航系统，您可以将参数传递给页面并随后打开正确的选项卡（如 Hamburger 项目模板的设置页面所示）。

但是当用户更改选项卡时，它仍然是相同的页面并且您无法控制后退按钮的行为，因为更改枢轴不会进入堆栈（也许有一种方法可以强制它，如果您跟踪 SelectionChanged 事件，但我不确定）。目前，如果您处于级别 2，则无法操作 BackRequest 和手动操作堆栈，因为有一个错误使其只能使用硬件按钮（在手机和鼠标后退按钮上，单击按钮上的按钮不起作用）屏幕）。

你总是可以按照你制作图片的方式来做： Level 0打开一个页面，这些Level 1页面可以包含link到Level 2作为不同的页面。

我认为实现它的最佳方法是制作一个自定义控件，从级别 1 开始显示当前树。根据您的示例，它是页面的第一行，显示 "Menu Item 1" 和 "Menu Item 1 > Detail of item X on page 1" 的行。您可以将该控件放在每个页面上，它是可选的，因为即使没有它，此解决方案也能正常工作。

在一级页面，您可以直接导航到二级页面；它将被添加到堆栈中，然后当用户点击 "back" 时，它将返回到父页面。

Answer 2

为了突出显示 'subpage' 上的汉堡菜单项，您可以执行以下操作：

在您的 Shell class 中创建一个方法，用于 select 您想要在代码中 select 的按钮。在其中只需将您的 HamburgerMenu 的 Selected 设置为所需的 HamburgerButtonInfo 实例。 PageType 必须设置为 'null' 以避免导航到相应的页面。
```
public static HamburgerButtonInfo AButton => Instance.MyButton;
public void HighlightButton(HamburgerButtonInfo button)
{
    Type pageType = button.PageType;
    button.PageType = null;
    HamburgerMenu.Selected = button;
    button.PageType = pageType;
}
```

在您页面的 OnNavigatedTo 中通过 Shell.Instance 调用该方法。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    Shell.Instance.HighlightButton(Shell.AButton);
    base.OnNavigatedTo(e);
}

层级导航模板 10 Hamburger Template

Hierarchy navigation with Template 10 Hamburger Template

uwp

template10