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>

看起来像这样。

祝你好运！

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

UWP Template10 Hide hamburger button when menu is open

winrt-xaml

hamburger-menu

uwp

template10