UWP Template10菜单打开时隐藏汉堡包按钮 [英] UWP Template10 Hide hamburger button when menu is open

问题描述

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

I want to hide hamburger menu button automatically in order to display menu from the top to the bottom of the page. For this purpose I tried to bind HamburgerButtonVisibility to IsPaneOpen property:

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

但是使用这种解决方案存在一个问题:当我打开菜单并点击菜单外时，菜单关闭，但是汉堡包按钮消失了.

But with this solution there is one issue: when I open the menu and tap outside of menu, menu is closed but hamburger button disappears.

还有其他解决方案吗?

此外，如果菜单属于某个页面(而不是外壳程序)，我也没有找到如何将NavigationService设置为HamburgerMenu的方法.我尝试使用页面ViewModel进行设置，但是在这种情况下我得到了NRE:

Also I didn't find out how to set NavigationService into HamburgerMenu if menu belongs for a page (not shell). I've tried to set it using page ViewModel, but I get NRE in this case:

<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()

推荐答案

所以，看看.您在模板10中发现了一个错误.我已纠正了该错误，并将在本周晚些时候将其推送到NuGet.如果您不是使用NuGet而是GitHub上的代码，那么您将发现最新的代码可以正常工作.否则，您将需要等待几天.

So, look. You have discovered a bug in Template 10. I have corrected that bug and I will push it up to NuGet later this week. If you are not using NuGet but the code from GitHub then you will discover the code works fine when you get latest. Otherwise, you will need to wait a few days.

这就是您的操作方式，我加入了ValueWhenConverter，因为它看起来好像您可能不知道.如果您不想使用它，则不必.

Here's how you do it, I included the ValueWhenConverter because it looks like you might not know about it. If you don't want to use it, you don't have to.

<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菜单打开时隐藏汉堡包按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！