winrt-xaml - 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}}" />

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

有没有其他解决方案？

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

看起来像这样。

祝你好运！