HamburgerMenuItem Scrolling

[amkuchta]

What steps will reproduce this issue?

If the window is sized to be smaller than the height of the HamburgerMenu, OptionsListView overlaps ButtonsListView

Expected outcome

Ideally, the PaneRoot would not be allowed to have a height smaller than is required to show all of the items in the pane. My suggestion is to use a DockPanel wrapped in a ScrollViewer to host the ListBox controls, shown below:

<ScrollViewer VerticalAlignment="Stretch">
  <DockPanel VerticalAlignment="Stretch">
    <ListBox x:Name="ButtonsListView" DockPanel.Dock="Top" VerticalAlignment="Top">
      <ListBoxItem ... />
      <ListBoxItem ... />
      <ListBoxItem  ... />
    </ListBox >
    <ListBox x:Name="OptionsListView" DockPanel.Dock="Bottom" VerticalAlignment="Bottom">
      <ListBoxItem  ... />
      <ListBoxItem ... />
      <ListBoxItem  ... />
    </ListBox >
  </DockPanel>
</ScrollViewer>

Repo

https://github.com/amkuchta/Vulnerator/tree/code_cleanup

Environment

• MahApps.Metro v1.4.3
• Windows OS 7 & 10
• Visual Studio 2015
• .NET Framework 4.5.2

[punker76]

@amkuchta I think the options menu of a HamburgerMenu should not have too many items, so it can be always visible and overlap the normal menu items. The scrollbar of normal menu item listbox is shown if there are many items. So IMO we should leave this as it is (and how it works in the UWP Community Toolkit). If you need other implementation you can create your own HamburgerMenu style with your specifications.

[amkuchta]

@punker76 I'll look into rolling my own. I am gonna look into opening a similar issue on the UWP Toolkit Community repository as well - I don't see why the options menu takes precedence over the normal menu items. I also think that the VerticalScrollBar should be on the left instead of the right so that it is always visible when the lists are too long... but that is just me being picky

[amkuchta]

@punker76 I just did a PR for the UWP Community Toolkit to correct this - would you like me to apply the same fix here?

[amkuchta]

@punker76 poke 👉