Windowscommunitytoolkit: Hamburger menu like Groove

[lemoinea]

For mobile and tactile devices, the idea will be to have an hamburger menu like Groove app, to open via a slide gesture.

[deltakosh]

So your ask is to add slide gesture support to current HamburgerMenu, correct?

[lemoinea]

Yes exactly

[deltakosh]

I agree then:)

[ryzngard]

@deltakosh any idea how this would work? I'd think we need manipulation events from the page piped to the control to get a swipe gesture. I don't think a control can get those without some extra glue.

If nobody else is jumping on this with more expertise, happy to take this on. I think it would be a good addition to the toolkit.

[deltakosh]

My initial thought was to ask the developer to help with the plumbing.
Something like hamburgerMenu.setManipulationRoot(...) or something like that

[peterbozso]

Maybe it could help with the implementation: https://github.com/JustinXinLiu/SwipeableSplitView

[lemoinea]

Yes, Justin Liu has nice projects using Windows composition (https://github.com/JustinXinLiu)

[nachtjasmin]

A swipe-able hamburger menu already exists in Template10. It is using the ManipulationDelta event, the relevant code can be found here. Therefore we could easily extend the current implementation :)

However, I'm a big fan of @JustinXinLiu's way to navigate through the hamburger menu, maybe we can merge both approaches to get the best experience?

[deltakosh]

We should ask @justinxinliu if he would be kind enough to contribute to the toolkit

[help-14]

@justinxinliu 's code have a gap in the left coner that will act to receive ManipulationDelta, I have tried it once and it make the open left menu button hard to press.

[JustinXinLiu]

Hey thanks guys I am flattered. :) Sorry I've been super busy lately, will definitely have a look at this once everything is settled.

[XamlBrewer]

The Template 10 code reacts to swiping on the whole content, so I'm not sure what will happen if that content is a horizontal scroll viewer. Personally, I also use the @JustinXinLiu's approach of having a control at the left to listen for horizontal swipes. My code is here: https://github.com/XamlBrewer/UWP-SplitView-Sample/blob/master/XamlBrewer.Uwp.SplitViewSample/Views/Shell.xaml.cs . There's a possible issue with that approach: the element that listens for Manipulation events sits on top of the content, so you can't have input controls like sliders and text boxes on the left side of the page.

[deltakosh]

Agree!

[Code-ScottLe]

I don't think it will be a problem if the exposure (amount of area that the control is displaying to wait for the slide gesture) is small. When the user want to do that, they will have to swipe from the edge of the phone out, so the control will be the first thing to receive touch input, at least in theory.

Slidable controls like sliders then should have some sort of margin to prevent this to happen. Or a Grid.Column that separate it.

[deltakosh]

Closing this one for now. Please reopen if you want to revive it ;D

[CabuxaMapache]

Hi guys, I'm trying to implement a slide gesture to open/close the hamburguer menu, but I'm having trouble with the 1.5.1 version of the control. With version 1.4.1 I close the menu thata way:
var paneGrid = HamburgerMenu.FindDescendantByName("PaneGrid") as Grid; paneGrid.ManipulationMode = ManipulationModes.TranslateX; paneGrid.ManipulationCompleted += OnPaneGridManipulationCompleted;

private void OnPaneGridManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e) { if (e.Cumulative.Translation.X < -50) { HamburgerMenu.IsPaneOpen = false; } }

But with version 1.5.1 the listviews take all space in the control and "OnPaneGridManipulationCompleted" does not get fired... any ideas please?