WPF Custom Panel/Control Creation -- "The Doughnut"

Question

I'm hoping to create a custom panel or control that creates a very particular type of item.

Basically, the intent is to have a control that you can give a list of objects to, and it will put each of those objects into a button. The catch is that the buttons should be laid out in a circle like a doughnut. Similar to the image below.

But now imagine, if you can, that each of those colored sections was a button. They would have all of the functionality of buttons too, like mouseovers and events.

So, the brunt of the question is: What sort of techniques should I be looking at to create this kind of control? Is there a way to do some sort of "curvature" transform on a button?

It really seems like I'm looking for two separate things here, right?

I mean, I could put each item in the list into an ItemsControl that had a button as its ItemTemplate. So all I would need is two things:

The first of which is a radial layout Panel (I've seen a few of those around).

The second of which is a way to have each button have some sort of rotation and curvature transform.

Any ideas?

Meggie

Do you intend to have what would normally be a rectangular button rotated and deformed into the shape of a circular segment, or do you just need each item container to be in that shape and then contain content displayed normally (i.e. rectangular and not rotated)? – Polestar

I was hoping to achieve the rotated and deformed buttons. I believe that Kent has outlined a pretty nifty solution below that will achieve the desired result. – Meggie

Were you able to get this working the way you wanted? – Cactus

We wound up abandoning the idea, so I didn't get very far down the path of actually implementing it. But I firmly believe that if you follow the steps below you'll get there. It probably won't be quite as cut-and-dry, you'll have to deal with things like dynamically resizing the buttons depending on the number of items, etc., which may get tricky (trying to get them to expand around the circle instead of gowring in a weird way). – Meggie

Answer 1

I think you're looking at three distinct steps:

1. A Panel that lays out children around a circle. Importantly, the panel must update read-only attached dependency properties on its children, telling them where they've been laid out (starting position in degrees and ending position in degrees)
2. A Button template that renders in an arc shape according to some starting and ending positions.
3. Combining the two, binding the starting and ending positions for the buttons to the attached values exposed by the panel.

Premier

This sounds like a good plan! The hardest part of which will be making the button it seems. Thanks, Kent. – Meggie

Answer 2

Another approach (while similar) to solve the same problem we had, is to use a panel to stack each "button" on top of each other. Each button is shaped based on calculations of 2 imaginary circles, the innner and outer. They are then offset by an x,y co-ordinate to their correct positions such that their original positions become the center point of the doughnut. The hardest part is obviously working out all these trigonometry calculations, but once done its simple to rotate, fan, expand etc the shape as you like.

Galatea