如何在单个页面中实现 Template 10 HamburgerMenu

Question

我正在尝试在 UWP 应用程序的单个页面中使用模板 10 HamburgerMenu 控件（结合 PageHeader 控件），而不是更典型的应用程序范围的汉堡菜单托管在 shell 页面中。

文档没有具体解释应该如何完成，只是说明 "the HamburgerMenu is a XAML control and, as such, can be placed in any page of the application"。

假设此控件的工作方式类似于 SplitView，并使用 Template10 HamburgerMenu 演示代码作为起点，我已将以下最小实现添加到页面：

<controls:HamburgerMenu x:Name="Menu">
    <controls:HamburgerMenu.PrimaryButtons>
        <controls:HamburgerButtonInfo ButtonType="Command">
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Width="48" Height="48" Symbol="Home" />
                <TextBlock Margin="12,0,0,0" VerticalAlignment="Center" Text="Home" />
            </StackPanel>
        </controls:HamburgerButtonInfo>
    </controls:HamburgerMenu.PrimaryButtons>

    <controls:HamburgerMenu.Content>
        <TextBlock>Sample Text</TextBlock>
    </controls:HamburgerMenu.Content>
</controls:HamburgerMenu>

这会呈现内容 TextBlock，但不会呈现包含菜单。我已经尝试了所有明显的 HamburgerMenu 属性，包括 HamburgerButtonVisibility、DisplayMode、IsOpen、IsFullScreen，但没有任何东西使菜单可见。

任何人都可以指点我在一个页面上包含 HamburgerMenu 和 PageHeader 控件的示例吗？

Answer 1

从评论中了解到，您对基于 shell 的汉堡包模板方法没有任何问题。你想做的就是，

Show the Hamburger menu only at one page and at the others simply go without the hamburger menu to avoid user direct navigation.

所以来到解决方案，Template10 中的 Hamburger Control 带有属性 IsFullScreen。将其设置为 true，例如：

Shell.Instance.HamburgerMenu.IsFullScreen="true";

这将隐藏您的汉堡包菜单。

您可以通过两种方式进行处理。我先放可以解决的方案，但不推荐。

您可以从任何页面访问 Shell.xaml.cs（这就是美），因为它有一个静态的单例实例。您可以在 OnNavigatedTo 和 OnNavigatingFrom 中更改 IsFullScreen="false" 属性要显示菜单的 Page 覆盖方法以及 shell, 保持默认为真。或者vis-ver默认设置为true，你可以在页面导航出和导航到的时候设置为false。
第二种方法（推荐）是访问 Template10 应用程序使用的 settingsService（另一个惊人的功能）。 settingsService 负责 AppTheme、HamburgerMenu IsFullScreen state、using the shell back button or the page header one 以及 Cache duration 和 Hiding the HamburgerMenu 按钮。

原因： 我使用设置服务的单例实例而不是 Shell 的原因是因为我想要我所有的应用程序设置转到中间人，中间人将执行操作。所以明天如果我计划根据这些值更改某些功能，我将不得不简单地编辑 settingsService 而不是搜索整个应用程序以了解我在哪里更新这个属性。

你是怎么做到的？

要遵循第二种方法并保持默认为 false，我首先从：

开始

文件->新建项目->汉堡模板。
清理并构建项目（只是为了恢复所有包）。
（可选，如果您希望默认为隐藏的汉堡包）转到 Shell.xaml 并将属性 IsFullScreen="True" 添加到代码行 <Controls:HamburgerMenu x:Name="MyHamburgerMenu">

现在我将转到要显示汉堡菜单的页面（假设它是 detailsPage），所以我转到 detailsPage 并在代码中-在后面，我重写了 OnNavigatingFrom 和 OnNavigateTo 方法，如下所示：

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    Services.SettingsServices.SettingsService.Instance.IsFullScreen = true;
    base.OnNavigatingFrom(e);
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    Services.SettingsServices.SettingsService.Instance.IsFullScreen = false;
    base.OnNavigatedTo(e);
}

这样就可以了。请注意：我使用的是第二种方法。您也可以选择第一种方法。

Please Note: IsFullScreen="true" would hide the HamburgerMenu and IsFullScreen="false" would show the HamburgerMenu.

The control's documentation

如何在单个页面中实现 Template 10 HamburgerMenu

How to implement a Template 10 HamburgerMenu in a single page

hamburger-menu

uwp

template10