New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creators Hamburger Menu #2975

Closed
wants to merge 25 commits into
base: develop
from

Conversation

Projects
None yet
4 participants
@amkuchta
Contributor

amkuchta commented May 23, 2017

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.

resizedcreatorsmenudemo

@amkuchta

This comment has been minimized.

Contributor

amkuchta commented May 23, 2017

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)

@amkuchta amkuchta changed the title from Creators hamburger menu to Creators Hamburger Menu May 24, 2017

@MurariAlex

This comment has been minimized.

MurariAlex commented May 24, 2017

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

This comment has been minimized.

Contributor

amkuchta commented May 24, 2017

@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

@MurariAlex

This comment has been minimized.

MurariAlex commented May 24, 2017

Sure, here is it.

  • On mouse over (second item):
    mouseover

  • On selected item (second item):
    selecteditem

@amkuchta

This comment has been minimized.

Contributor

amkuchta commented May 24, 2017

@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

This comment has been minimized.

Contributor

amkuchta commented May 24, 2017

@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...

@MurariAlex

This comment has been minimized.

MurariAlex commented May 24, 2017

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

This comment has been minimized.

Contributor

amkuchta commented May 25, 2017

@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:

defendercreatorsupdate

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

@MurariAlex

This comment has been minimized.

MurariAlex commented May 25, 2017

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

This comment has been minimized.

Contributor

amkuchta commented May 25, 2017

@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

This comment has been minimized.

Contributor

amkuchta commented May 25, 2017

@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:
updatedcreatorstyle

@MurariAlex

This comment has been minimized.

MurariAlex commented May 25, 2017

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

@amkuchta

This comment has been minimized.

Contributor

amkuchta commented May 26, 2017

Yeah, @punker76 😉

@Amrykid

This comment has been minimized.

Member

Amrykid commented Oct 11, 2017

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

@punker76

This comment has been minimized.

Member

punker76 commented Oct 11, 2017

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

@MurariAlex

This comment has been minimized.

MurariAlex commented Oct 11, 2017

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

@punker76

This comment has been minimized.

Member

punker76 commented Oct 11, 2017

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

@amkuchta

This comment has been minimized.

Contributor

amkuchta commented Oct 11, 2017

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 punker76 self-assigned this Oct 11, 2017

amkuchta and others added some commits Oct 13, 2017

@punker76

This comment has been minimized.

Member

punker76 commented Jan 8, 2018

@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

@punker76 punker76 added this to the 1.6.0 milestone Jan 8, 2018

@amkuchta amkuchta deleted the amkuchta:creators-hamburger-menu branch Jan 25, 2018

@punker76 punker76 added the Feature label Feb 11, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment