What would you suggest for building such a control in WPF?

Question

I need to build a WPF control that looks somehow similar to this:

Where each color should be clickable and resizable (or selectable).

This control will be used to set modes on the hours of a day. I've thought about making 24 buttons that would be arranged in a circle:

Another idea was to draw a complete circle and calculate user mouse click's position for the selection and draw several circles to represent the data.

Any other/better ideas on how to build this? (please excuse my poor drawing).

Answer 1

I think you would get odd edge-effects with multiple overlapping or touching controls. So I would make a single custom control to do this. It would convert the mouse position on button down to a slice, and then do the appropriate action.

With a single control, you could also come up with a rational way of dealing with keyboard input and for showing selection and allowing for multi-select behavior.

Answer 2

It sounds like you want a customized ListBox (multiple items that are selectable/clickable). For the layout you would want to use some type of RadialPanel as the ItemsPanel. You probably also need to change the ItemContainerStyle to make your ListBoxItems look like what you have above, probably with some triggers to change colors based on selection state. Depending on what behavior you need from your items you may need to create custom ListBox/ListBoxItem derived custom controls but in a lot of cases the built-in behavior will get you a long way. To reuse it as a single unit you could wrap up the ListBox with its 24 hour items and customized templates in a UserControl and expose the selection data in whatever form you need as a Dependency Property (like an IEnumerable of the data items representing the selected hours).

Does that help you get started?