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

Question

我想自动隐藏汉堡包菜单按钮，以便从页面的顶部到底部显示菜单。为此，我尝试将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}}" />

但是使用这个解决方案有一个问题：当我打开菜单并点击菜单外，菜单关闭但汉堡包按钮消失。

还有其他解决办法吗？

如果菜单属于某个页面（不是shell），我也没有找到如何将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()

Answer 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>

看起来像这样。

祝你好运！