Windowscommunitytoolkit: Add features for HamburgerMenu

[deltakosh]

• [ ] Swipe support
• [ ] Header
• [ ] Highlights for selected items

[seymourtang]

I think they are very useful.Thx.

[Odonno]

The alternate version of selected item template is still pretty, should we add it in the backlog? https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/nav-pane

[Vijay-Nirmal]

Also, ReDesign the Hamburger menu to match Anniversary update.

[deltakosh]

This is what I mentioned with Header and highlights

[seymourtang]

When the splitview is opened by swapping the screen edge, the right zone should be dark like Lightbox in html.

[Odonno]

@seymourtang You mean, a Fade effect? If that's so, I would like to use it too.

[seymourtang]

Yes.This helps us focus on the content of the show.
Thx.

Sent from Mail for iPhone

---

From: David Bottiau [e-mail]
Sent: Wednesday, April 5, 2017 2:41:45 PM
To: Microsoft/UWPCommunityToolkit
Cc: SEYMOURTANG; Mention
Subject: Re: [Microsoft/UWPCommunityToolkit] Add features for HamburgerMenu (#1066)

@seymourtanghttps://github.com/seymourtang You mean, a Fade effect? If that's so, I would like to use it too.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/Microsoft/UWPCommunityToolkit/issues/1066#issuecomment-291768916, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASxx-0nq-Bo_78lz4OoIZDBSlaNvzRCfks5rszepgaJpZM4MyEId.

[Code-ScottLe]

Should the Hamburger Menu remembers the default state that it was on before expanding? Like on Mobile, If i expand the menu (due to the pane is completely collapsed), I have to click outside of the hamburger to get it go away (after clicking an item on it of course).

Something like "returning to previous state" after click event would be nice.

[Odonno]

I think I know what you mean. And the fix is pretty simple. But of course, if it can be included as a property, it could save some more lines for each Hamburger Menu we use.

Here is an example of how I achieved this :

private void OnMenuItemClick(object sender, ItemClickEventArgs e)
{
    if (SystemInformation.DeviceFamily == "Windows.Mobile")
    {
        HamburgerMenuControl.IsPaneOpen = false;
    }
}

And yes, it is mainly used on Mobile.

[Code-ScottLe]

@Odonno The hambuger menu has 3 state, Fully Collapsed / Partially Open and Fully Open. I tend to use Partially Open for Surface-size device. I mean, right now I'm handling this just like how you are doing above from the code behind. But should this thing get baked in as one of the configurable behavior?

[Odonno]

@Code-ScottLe I think you misunderstand the behavior of the HamburgerMenu in this context. In fact, the Windows 10 HamburgerMenu copied the SplitView design that handle 4 DisplayMode :

• Overlay
• Inline
• CompactOverlay
• CompactInline

There is only two state : Opened or Closed. But in each display mode, these states changed like that :

• Overlay
  
  
  
  • Closed = totally hidden
  
  
  • Opened = fully opened and hide the content behind it
  
  
• Inline
  
  
  
  • Closed = totally hidden
  
  
  • Opened = fully opened and "push" the content to the right
  
  
• CompactOverlay
  
  
  
  • Closed = compact mode : partially showed
  
  
  • Opened = fully opened and hide the content behind it
  
  
• CompactInline
  
  
  
  • Closed = compact mode : partially showed
  
  
  • Opened = fully opened and "push" the content to the right
  
  

If that's what you want to manage, you can use a XAML VisualStateTrigger based on whatever trigger you want, like the DeviceFamily.

Here is an example :

<VisualState x:Name="MobileVisualState">
    <VisualState.StateTriggers>
        <triggers:DeviceFamilyStateTrigger DeviceFamily="Mobile" />
    </VisualState.StateTriggers>

    <VisualState.Setters>
        <Setter Target="HamburgerMenu.DisplayMode" Value="Overlay" />
    </VisualState.Setters>
</VisualState>

[Code-ScottLe]

I have mobile as "Overlay", Surface as CompactInline and PC with CompactInline already opened.

With the adaptive design of using adaptive trigger now, it would be weird to have the window resized on the PC behave different than phone. Right now, i'm handling all of them based off the Visual State that i'm in from the code behind. It works, but not the cleanest code imo. Just putting it out there.

[Odonno]

@ScottIsAFool Yes. Clearly, the AdaptiveTrigger should not be used for this case. It should be based on the Platform (only defined at runtime) and not by Window size (redefined at anytime).

Anyway, I don't see why you need code behind for this. You can handle it with a VisualStateTrigger.

[Code-ScottLe]

I'll take the header and hightlight for selected item if nobody is working on it then.

[Vijay-Nirmal]

Did anyone check out the new control called Navigation View? which is similar to hamburger menu but it is only available on Fall Creators Update.

[Odonno]

@Vijay-Nirmal Yes, it brings a lot of features to enable great looking navigation view based on Fluent design.

I think it will be the replacement of the HamburgerMenu/SplitView controls but for now we still need a great control that supports Anniversary & Creators Update.

[Vijay-Nirmal]

@Odonno Agree. It would be nice if we make this control similar to Navigation View

[Code-ScottLe]

This gonna be really weird time to make app. Like you want to be on Fluent Design but you can't leave out the majority of people who is still on Anniversary Update.

[nmetulev]

With the NavigationView now available and the HamburgerMenu getting deprecated ( #1465 ), this issue is no longer necessary as we will not be adding new functionality to the HamburgerMenu - only bug fixes