如何在单个页面中实现模板 10 汉堡菜单

Question

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

该文档没有具体说明应如何执行此操作，只是指出"HamburgerMenu 是一个 XAML 控件，因此可以放置在应用程序的任何页面中"。

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

<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的方法没有问题。你想做的只是，

仅在一页上显示汉堡菜单，而在

另一页上则没有汉堡菜单，以避免用户直接导航。

因此，找到解决方案，Template10Hamburger Control附带一个属性IsFullScreen。将其设置为 true，如下所示：

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

这将隐藏您的汉堡菜单。

有两种方法可以做到这一点。我将首先提出可以完成的解决方案，但我不会推荐它。

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

---

原因：我之所以使用设置服务的单一实例而不是命令行管理程序的实例，是因为我希望我的所有应用设置都转到中间人，然后由中间人执行操作。因此，明天如果我计划根据值更改某些功能，我将不得不简单地编辑设置服务，而不是搜索整个应用程序，以了解我在哪里更新此属性。

---

你是怎么做到的？

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

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

4. 现在我会转到我想显示汉堡菜单的页面(假设它是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);
   }
   

5. 这将完成这项工作。请注意：我使用的是第二种方法。您也可以选择第一种方法。

请注意：IsFullScreen="true"会隐藏HamburgerMenu，IsFullScreen="false"会显示汉堡菜单。

控件的文档