UWP Template10 Hide hamburger button when menu is open

问题

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.

Are there any other solution for this?

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;
}

Stack trace:

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

回答1:

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.

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>

Looks like this.

Best of luck!

来源：https://stackoverflow.com/questions/35246734/uwp-template10-hide-hamburger-button-when-menu-is-open

标签

winrt-xaml

uwp

hamburger-menu

template10