Creators Hamburger Menu

[amkuchta]

What changed?

Describe the changes you have made to improve this project.

• Implements Windows 10 Creators Update style Hamburger Menu
  • Note: The border to the left of the control is not a part of the HamburgerMenu - I figured most people would be using the HamburgerMenu at the root of the window, which would use the Window's border as a base. To emulate, I wrapped the HamburgerMenu in a Border control, with only the left border having thickness > 0

Closed issues.

• [Request]Win 10 Creators Update Hamburger Menu #2931

[amkuchta]

I'll correct the Styles issues in a bit (the reason the TeamCity build is failing - I left a line of code in on accident, oops)

[alexmurari]

That's beautiful! Good job! :)

Some points about the mouse hover event based on the W10 Hamburger Menu:

• The mouse hover event changes the background color of the item to some sort of light gray;
• The blue sidebar doesn't appear during the mouse hover, but only when selected;
• The foreground color doesn't change during the mouse hover, but only when selected.

But that's a design choice. Anyway, it's incredible.
Can't wait until this is merged,

[amkuchta]

@mira r I Alex can you snag some screen grabs for me? I'll make those bindable properties so that they can be adjusted to user needs, and default them back to match the creators update

[alexmurari]

Sure, here is it.

• On mouse over (second item):
  

• On selected item (second item):
  

[amkuchta]

@MurariAlex thank you!

@punker76 , @thoemmi , in your opinion, should I simply follow the design established in the Creator's update (screen shots above), or should I make the MouseOver / SelectedItem colors, sidebar thickness, etc. dependency properties to allow users further customization options? I know that "software bloat" is a big concern, so I'd like some guidance from maintainers before proceeding forward. The argument for allowing customization is that this is similar to the TabItem underlines, which are all modifiable.

[amkuchta]

@MurariAlex I just realized that my comment earlier didn't have your full tag 😆 that's what I get for posting from my phone... thanks, autocorrect...

[alexmurari]

No problem, @amkuchta, it happens a lot to me, at least the autocorrect didn't change it to some kind of bad word as it already did to me. 😄

[amkuchta]

@MurariAlex I decided to stop being lazy and open Windows Defender myself 😆 I'm glad I did - I noticed that my side lines don't quite match those of the Creators update - mine are too tall, and should match the line height of the text for the selected HamburgerMenuItem, not the height of the HamburgerMenuItem itself (if that makes sense). See below - hovering over the selected item illustrates my point:

I'll implement a fix to address this, as well (probably tomorrow, as it is already rather late where I am)

[alexmurari]

Hmmm, I see.
It looks like the icon and the text are wrapped by a WrapPanel or some other wrapper, and the side bar is adjusted to stretch itself to the wrapper height. I didn't see how the menu hamburger item is built, but I think that this sidebar can be made dyamic so it will adjust to the content height of the item.

[amkuchta]

@MurariAlex I've already got an idea on how to implement - I'm working it now. Gonna take a moment because I'm creating some dependency properties to allow users some customization options. In a nutshell, I'm going to use the Underline control developed for the TabControl.

[amkuchta]

@MurariAlex Ok, the latest commit:

• Creates HamburgerMenuHelper, which has SideBarBrush, SideBarMouseOverBrush, SideBarMouseOverSelectedBrush, SideBarSelectedBrush to set various values (keeps this customizable)
• Utilizes the Underline control to create the sidebar
• Sets initial values
• Adjusts the height of the sidebar and the MouseOver style so that the control looks more like the provided sample

Screenshot:

[alexmurari]

Wow, looks amazing. Good job. 😄
Now let's wait @punker76 to review it and

[amkuchta]

Yeah, @punker76 😉

[AzureKitsune]

Does this hamburger menu have an overlay mode like the UWP version does?

[punker76]

@Amrykid He Alex :-D The HamburgerMenu has the same property like the UWP one, with these values

[alexmurari]

Almost forgot about this... @punker76 , any chance we see this on 1.6.0?

[punker76]

@MurariAlex maybe. It's on my list for 1.6.0...

[amkuchta]

I'm excited. Hopefully it doesn't require too much work to incorporate, @punker76 . I tried to be as thorough as possible when I put it together.

[punker76]

@amkuchta 👍 Thank you for the initial idea and implementation. I take your idea and improved it a little bit. You can see the result at #3134