开发者

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

开发者 https://www.devze.com 2023-01-27 07:57 出处:网络
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

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.

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

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 bu开发者_如何学Pythontton 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?


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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号