UWP Template10 Hide hamburger button when menu is open

Question

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

I don't like the look of this approach, but thank you for asking so I could resolve this bug in the Template 10 HamMenu. — Jerry Nixon, Feb 07 '16 at 00:39
@JerryNixon-MSFT _I don't like this approach_ - Do you mean HamburgerButtonVisibility binding to IsOpen property? How would you implement such type of menu? I'd appreciate if you suggest better solution. — Sergey Mozhaykin, Feb 07 '16 at 20:12
The implementation is fine. I'm not a fan of hiding the Ham button. — Jerry Nixon, Feb 08 '16 at 19:08
Don't forget that marking the right answer is considered polite. — Jerry Nixon, Feb 08 '16 at 19:09

score 2 · Accepted Answer · answered Feb 07 '16 at 00:38

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!

UWP Template10 Hide hamburger button when menu is open

1 Answers1

Linked