Remove padding of MenuFlyoutItems

[marcelwgn]

Description

Removed the internal padding that is used for the MenuItemPresenter so the items are edge to edge with the border of the flyout.

Motivation and Context

Fixes #1445

How Has This Been Tested?

Tested manually using the MUXControlsTestApp

Screenshots (if appropriate):

[jevansaks]

This certainly looks better to me but is it what @chigy had in mind? The complaint was that the spacing was uneven -- it looked like 2 on the left and 1 on the right. Should it be changed to:

• 1 on both sides
• 2 on both sides
• 0 on both sides (as you've done here)

?

[chigy]

@chingucoding , could you provide additional images to answer @jevansaks ?

1. Cascading menu opened and sub-menu next to the chevron selected
2. Same as # 1 but sub-menu that is NOT next to chevron selected
3. MenuFlyout which doesn't have cascading menu (so there's no chevron)

[marcelwgn]

@chingucoding , could you provide additional images to answer @jevansaks ?

1. Cascading menu opened and sub-menu next to the chevron selected
2. Same as Programmatically adding new NavigationViewItems to an existing NavigationView.MenuItems collection results in the added items rendering inside a generated NavigationViewItem node #1 but sub-menu that is NOT next to chevron selected
3. MenuFlyout which doesn't have cascading menu (so there's no chevron)

Sure!

[chigy]

@chingucoding , thanks for the gif, but could you please send static images so I can evaluate the balance, etc.?

[marcelwgn]

@chingucoding , thanks for the gif, but could you please send static images so I can evaluate the balance, etc.?

Of course!

1. Cascading menu opened and sub-menu next to the chevron selected:
   

2. Same as Programmatically adding new NavigationViewItems to an existing NavigationView.MenuItems collection results in the added items rendering inside a generated NavigationViewItem node #1 but sub-menu that is NOT next to chevron selected:
   

3. MenuFlyout which doesn't have cascading menu (so there's no chevron):
   

[chigy]

@chingucoding , thanks!
For # 3, what I was looking for was no cascading like this because I am suspecting the extra pixel come from chevron placement, so I wanted to see one without it.

[marcelwgn]

@chingucoding , thanks!
For # 3, what I was looking for was no cascading like this because I am suspecting the extra pixel come from chevron placement, so I wanted to see one without it.

Oh I see. Here a screenshot without any cascading:

[chigy]

@jevansaks , the change @chingucoding made by removing padding both down to 0 is the expected change. What I was noticing though that the fact there were 2 padding on one side meant that the list was already lopsided. I wanted to make sure they looked OK with the change and it appear it does, but I'm double checking with design.

[chigy]

@jevansaks and @chingucoding , I have the design sign off of the change from visual perspective.

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[shaheedmalik]

@chingucoding , could you provide additional images to answer @jevansaks ?

1. Cascading menu opened and sub-menu next to the chevron selected
2. Same as Programmatically adding new NavigationViewItems to an existing NavigationView.MenuItems collection results in the added items rendering inside a generated NavigationViewItem node #1 but sub-menu that is NOT next to chevron selected
3. MenuFlyout which doesn't have cascading menu (so there's no chevron)

Sure!

It looks like the spacing issue comes back on select of the menu item?

Or does the placement of the mouse click affects the animation?

[marcelwgn]

@chingucoding , could you provide additional images to answer @jevansaks ?

1. Cascading menu opened and sub-menu next to the chevron selected
2. Same as Programmatically adding new NavigationViewItems to an existing NavigationView.MenuItems collection results in the added items rendering inside a generated NavigationViewItem node #1 but sub-menu that is NOT next to chevron selected
3. MenuFlyout which doesn't have cascading menu (so there's no chevron)

Sure!

It looks like the spacing issue comes back on select of the menu item?

Or does the placement of the mouse click affects the animation?

This is the tilt effect that is used on buttons and other clickable components. Depending where the mouse is when you click, the tilt gets applied "differently".
There is also a proposal to remove this effect. See #242 for more information.

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).