Uwp 如何在一个页面中实现模板菜单

我试图在UWP应用程序的单个页面中使用模板10

HamburgerMenu

控件（与

PageHeader

控件结合使用），而不是在shell页面中承载的更典型的应用程序范围的hamburger菜单

文档没有具体说明如何实现这一点，只是说明“HamburgerMenu是一个XAML控件，因此可以放在应用程序的任何页面中”

假设此控件的工作方式类似于拆分视图，并使用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

控件吗？

从评论中可以看出，您对基于

shell

的汉堡包模板方法没有问题。你想做的就是

只在一个页面上显示汉堡包菜单，在其他页面上不显示汉堡包菜单，以避免用户直接导航

因此，在解决方案中，

Template10

中的

Hamburger控件

带有一个属性

IsFullScreen

。将其设置为true，如下所示：

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

这会隐藏你的汉堡菜单

有两种方法可以解决这个问题。我会先提出可以解决的方案，但我不推荐它

您可以从任何页面访问

Shell.xaml.cs

，因为它有一个静态的单例实例。您可以将

OnNavigatedTo

中的

IsFullScreen=“false”

属性更改为

和
OnNavigatingFrom
覆盖要显示菜单的
页面的方法，并在shell中保留为默认值true。或者vis-ver-default设置为true，您可以在向外导航和导航到页面时将其设置为false

第二种方法（推荐的）是访问

模板10

应用程序使用的

设置服务

（另一个惊人的功能）。

设置服务

负责

应用主题

，

汉堡菜单为全屏状态

，

使用shell back按钮或页眉一个

以及

缓存持续时间

和

隐藏汉堡菜单

按钮

---

原因：我之所以使用设置服务的singleton实例而不是Shell实例，是因为我希望我的所有应用程序设置都转到一个中间人，然后由他执行操作。因此，如果明天我计划根据这些值更改某些功能，我将只需编辑设置服务，而不是搜索整个应用程序，以确定我在哪里更新此属性

---

你是怎么做到的？

为了遵循第二种方法并将默认值保持为false，我首先从以下内容开始：

文件->新项目->汉堡模板

清理并构建项目（只是为了恢复所有包）

（如果希望将默认值作为隐藏汉堡，则可以选择）转到

Shell.xaml

并将属性

IsFullScreen=“True”

添加到代码行

现在我将转到我想显示汉堡菜单的页面（假设它是

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

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

请注意：

IsFullScreen=“true”

将隐藏汉堡菜单，

IsFullScreen=“false”

将显示汉堡菜单

---

您不使用基于shell的方法有什么具体原因吗？也就是说，我正在做一个演示项目。Tim没有一个单页的控件实现，它是围绕着所有东西框架和导航的容器而设计的。@Aditya Sharma。我的应用程序需要在单个页面上显示汉堡包菜单，但在任何其他页面上都不需要，因为我不希望用户能够从这些页面导航（向后导航除外）。@mvermef你确定吗？Template 10文档特别说明了我可以做到这一点，但没有解释如何做到。@TimCoulter您希望我为您提供一个与此完全相同的示例解决方案吗？非常感谢您花时间详细记录该解决方案。它工作得非常完美，我现在更好地理解了Shell和HamburgerMenu设计背后的思想，这意味着我将能够以更灵活的方式使用它。这没有问题。我们都是来帮忙的。确切地Template10非常棒而且非常灵活