WPF 自定义面板/控件创建 - “The Doughnut”

发布于 2024-10-04 10:52:26 字数 505 浏览 5 评论 0原文

我希望创建一个自定义面板或控件来创建非常特殊类型的项目。

基本上,其目的是拥有一个可以向其提供对象列表的控件,并且它将把每个对象放入一个按钮中。问题是按钮应该像甜甜圈一样排列成圆圈。类似于下图。

The Donut Chart

但现在想象一下,如果可以的话,每个彩色部分都是一个按钮。它们也将具有按钮的所有功能,例如鼠标悬停和事件。

那么,问题的核心是: 我应该考虑什么样的技术来创建这种控制? 有没有办法在按钮上进行某种“曲率”变换?

看起来我真的在这里寻找两个不同的东西,对吧?

我的意思是,我可以将列表中的每个项目放入一个 ItemsControl 中,该控件有一个按钮作为其 ItemTemplate。所以我需要的只是两件事:

第一个是径向布局面板(我已经看到了其中的一些)。

第二种是让每个按钮进行某种旋转和曲率变换的方法。

有什么想法吗?

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.

The Doughnut Chart

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

痕至 2024-10-11 10:52:26

我认为您正在考虑三个不同的步骤:

  1. 将子项布置在一个圆圈周围的 Panel。重要的是,面板必须更新其子项的只读附加依赖属性,告诉它们的布局位置(以度为单位的起始位置和以度为单位的结束位置
  2. )根据一些起始和结束位置形成弧形。
  3. 将两者结合起来,将按钮的开始和结束位置绑定到面板公开的附加值。

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.
可遇━不可求 2024-10-11 10:52:26

解决我们遇到的相同问题的另一种方法(虽然类似)是使用面板将每个“按钮”堆叠在一起。每个按钮的形状都是根据 2 个假想圆(内圈和外圈)的计算而设计的。然后,它们通过 x,y 坐标偏移到正确的位置,使得它们的原始位置成为甜甜圈的中心点。最难的部分显然是计算出所有这些三角函数计算,但一旦完成,就可以简单地旋转、扇形、扩展等您喜欢的形状。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文