WPF Quad Context Menu

Question

N.B THIS QUESTION HAS BEEN UPDATED, READ FURTHER DOWN

Hi,

I want to create a custom context menu that has 4 sub-menus, each in their own quadrant (top left, top right, bottom left, bottom right). Similar to 3ds Studio Max.

This is how I've approached the issue so far: - create a custom WPF control, derive from ContextMenu[1]
- declare 4 dependency properties of ContextMenu, these will be menus displayed and can be set from XAML.
- AddOwner to the ContextMenu.IsOpenProperty, adding a property changed notification.
- when the IsOpen property changes set the IsOpen property of 4 child context menus.
- using ContextMenuService set the Vertical and Horizontal offsets of the context menus to make them appear in each quadrant; binding the actual height and width properties to calculate the offsets.

[1] Need to derive from context menu otherwise you cannot assign it to the ContextMenu property on the Window.

This appears to work, there are issues with the menus NOT staying open (they're being closed as the focus is outside the menu) but I'm sure using Reflector.NET find a way around this.

This is my first custom WPF control that I've attempted to write; and not sure if this is best approach.

Any suggestions/ideas on how to create this Quad Context menu?

Answer 1

UPDATE

OK. After playing around with custom controls I have something that is working better than before. All menus now stay open.

What I've done:
- created custom control named QuadContextMenu deriving from ContextMenu, override the default style key.
- the style for the control has 4 popup primitives:
- each with PART_ name so I get a reference to them when the OnApplyTemplate.
- each has child QuadMenu, which is custom control deriving from MenuBase.
- each has their VerticleOffset and HorizontalOffset properties binding to the ActualHeight and ActualWidth of the child [2].

QuadMenu Style/Control Template:
- has a classic border with a dockpanel, and a border with a textblock to put the menu name.

[2] How to position the menus into the Quad: - TopLeft is offset negative the actual width and height
- TopRight is offset negative the actual height
- BottomLeft is offset negative the actual height
- BottomRight is NOT offset and is in it's original location

NEW QUESTIONS/ISSUES

These are the next challenges to making this control:
1. at the moment keyboard and mouse is locked/captured by the first menu you focus on and the others are not available by hovering over them. which means you can only use 1 of the menus.
2. flip the MenuItem so that for the TopLeft/BottomLeft the submenu opens on the left hand side.

I've already attempted to replace the menu item by overriding the GetContainerForItemOverride methods to return QuadMenuItem. QuadMenuItem is a custom control derive from MenuItem. When I do this however I lose the submenus functionality which is frustrating.

If anyone has any tip/tricks/suggestions on how to tackle these issues it would greatly appreciated! :D Thanks

Answer 2

I can think of two approaches, neither one are necessarily that clean but has the potential to work if you have the time.

Approach 1

Use a context menu but through setting the Template make it so that the ContextMenu really just shows a control that happens to open other windows. Perhaps tricks can be done so that opening these secondary menus doesn't take the focus away. This might end up still causing the original problem.

Approach 2

What happens if you set ContextMenu.StaysOpen to false and then try to control when the menu closes yourself?