UWP Template10 菜单打开时隐藏汉堡按钮

Posted 2023-04-13

【中文标题】UWP Template10 菜单打开时隐藏汉堡按钮

【英文标题】：UWP Template10 Hide hamburger button when menu is open

【发布时间】：2016-05-16 18:19:11

【问题描述】：

我想自动隐藏汉堡菜单按钮，以便从页面顶部到底部显示菜单。为此，我尝试将 HamburgerButtonVisibility 绑定到 IsPaneOpen 属性：

<controls:HamburgerMenu x:Name="Menu" VisualStateNarrowMinWidth="0" HamburgerBackground="White" HamburgerForeground="Black"
                                NavAreaBackground="StaticResource MenuBackground"
                                HamburgerButtonVisibility="x:Bind Menu.IsOpen, Mode=OneWay, Converter=StaticResource ReverseBooleanToVisibilityConverter" />

但是使用此解决方案存在一个问题：当我打开菜单并在菜单外点击时，菜单已关闭但汉堡按钮消失了。

还有其他解决办法吗？

如果菜单属于页面（不是外壳），我也没有找到如何将 NavigationService 设置为 HamburgerMenu。我尝试使用页面 ViewModel 设置它，但在这种情况下我得到了 NRE：

<Page
    x:Class="App.LoginPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:App.ViewModels"
    mc:Ignorable="d">

    <Page.DataContext>
        <vm:LoginViewModel />
    </Page.DataContext>

    <controls:HamburgerMenu x:Name="Menu" />
</Page>

sealed partial class LoginPage : Page

    public LoginPage ()
    
        this.InitializeComponent ();
        Menu.NavigationService = ViewModel.NavigationService; //NRE here
    

    public LoginViewModel ViewModel => DataContext as LoginViewModel;

堆栈跟踪：

   at Template10.Controls.HamburgerMenu.set_NavigationService(INavigationService value)
   at App.LoginPage..ctor()
   at App.App_XamlTypeInfo.XamlTypeInfoProvider.Activate_46_LoginPage()
   at App.App_XamlTypeInfo.XamlUserType.ActivateInstance()

【问题讨论】：

我不喜欢这种方法的外观，但感谢您提出问题，以便我可以解决 Template 10 HamMenu 中的这个错误。

@JerryNixon-MSFT 我不喜欢这种方法 - 你的意思是 HamburgerButtonVisibility 绑定到 IsOpen 属性吗？你将如何实现这种类型的菜单？如果您提出更好的解决方案，我将不胜感激。

实现没问题。我不喜欢隐藏 Ham 按钮。

不要忘记标记正确答案被认为是礼貌的。

【参考方案1】：

所以，看。您在模板 10 中发现了一个错误。我已更正了该错误，并将在本周晚些时候将其推送到 NuGet。如果您没有使用 NuGet，而是使用来自 GitHub 的代码，那么当您获得最新版本时，您会发现代码运行良好。否则，您将需要等待几天。

这就是你的做法，我包括了 ValueWhenConverter，因为看起来你可能不知道它。如果您不想使用它，则不必。

<Page xmlns:converters="using:Template10.Converters">

<Page.Resources>
    <converters:ValueWhenConverter x:Key="VisBoolConverter">
        <converters:ValueWhenConverter.When>
            <x:Boolean>True</x:Boolean>
        </converters:ValueWhenConverter.When>
        <converters:ValueWhenConverter.Value>
            <Visibility>Collapsed</Visibility>
        </converters:ValueWhenConverter.Value>
        <converters:ValueWhenConverter.Otherwise>
            <Visibility>Visible</Visibility>
        </converters:ValueWhenConverter.Otherwise>
    </converters:ValueWhenConverter>
</Page.Resources>

<Controls:HamburgerMenu x:Name="MyHamburgerMenu" 
    HamburgerButtonVisibility="Binding IsOpen, 
    RelativeSource=RelativeSource Mode=Self, 
    Converter=StaticResource VisBoolConverter">
</Controls:HamburgerMenu>

看起来像这样。

祝你好运！