Search code examples
c#.netwpfmenuclipping

Are there any controls for WPF that handle navigating a clipped menu or user interface in a window?

Consider the following:

  • My application has a main menu wrapped inside of a StackPanel with a horizontal orientation, which is left-aligned.
  • My menu has a lot of buttons or other controls in it for my application's features.
  • A user with a lower screen resolution might use my application.
  • On a lower screen resolution, the top menu might get cut-off because it is left-aligned.
  • This might also happen when you resize the window to be small enough to cut off parts of the menu.

What can I do to alleviate the issue? Ideally, I would like to use a control that dynamically creates left or right buttons (dynamically as in, when the items it wraps around get cut off it creates these buttons) that scroll to the left or the right by a set amount when clicked.

  • I do not want to use a WrapPanel since space is limited vertically.
  • I cannot use a horizontal scroll bar because my manager thinks it would look too ugly.
  • I cannot use some sort of hover-and-scroll technique when hovering near the clipped edges because of screen lag if I or someone else using my application am/is using Remote Desktop on a machine that's on a slow internet connection like dial-up.

I am looking for, ideally, standard WPF controls, but am also open to third-party controls like Telerik which my application also uses.

Solution

  • ScrollViewer is still a good option for your scenario -- all you have to do is modify its control template. Since you don't want the scroll bars visible, you could either:

    • remove the scroll bars completely and replace them with buttons that increment/decrement the ScrollViewer's HorizontalOffset by the size of a menu item.
    • remove the vertical scroll bar, and replace the horizontal one with a re-styled version -- you can modify the ScrollBar's control template to remove the ugly track bars (you can find these named "PART_Track" at the link), and leave the increment/decrement buttons in place.

    An alternative to the above would be to create your own panel with, say, an "Offset" property which determines the layout's horizontal scroll. Then add two buttons that increment/decrement the offset, with their visibility bound to separate "CanScrollForward" / "CanScrollBack" properties on the panel.