WPF自定义绘制多个进度条

发布于 2024-07-18 04:37:07 字数 453 浏览 1 评论 0原文

在处理一组项目时,我想显示该组状态的统一图像,因此我本质上在同一个单元格中制作了一个由多个具有透明背景和各种彩色前景的进度条组成的网格。

示例图片

我遇到了一些透明度伪影(紫色条实际上在绿色下面是紫色的,有时它会在顶部绘制,等等),这看起来有点浪费。 所以,我决定自己做,但现在我对如何做有点不知所措。 我是否在 FrameworkElement 的 OnRender 中使用 DrawingContext,还是有更简单的方法? 在进行自己的控制时,是否有一套通用规则?

我考虑改用饼图,因为这些很容易获得,但现在是我做一些非现成的事情的时候了。

谢谢!

In processing a group of items, I wanted to display a unified image of the status of the group, so I essentially made a Grid of a number of progressbars with transparent backgrounds and various colored foregrounds all at the same cell.

sample image

I'm running into some transparency artifacts (purple bar is actually purple under the green, and sometimes it draws over the top, etc) and it just seems a bit wasteful. So, I decided to make my own, but now I've got a bit of paralysis on how to do it. Do I use the DrawingContext in FrameworkElement's OnRender, or is there something simpler? Is there a set of general rules when it comes to making your own control?

I pondered switching to a pie chart since those are easy to come by, but its high time I did something not off-the-shelf.

Thanks!

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

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

发布评论

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

评论(1

酒浓于脸红 2024-07-25 04:37:08

我不太确定你打算如何让进度条组合不同的进度,但如果说最远的进度位于 z 索引的底部,而最短的进度位于顶部,那么我会在这行:

1)我可能会为这个新的进度条创建一个用户控件。

2) 它有一个名为 NumberOfProgresses 的属性,该属性与包含所述进度状态的数组相关联。

3) 每个进度都将由一个 Border 项目(或者可能更适合视觉树的东西)表示,因为它是一个带有背景属性的简单 wpf 控件。 背景属性将设置为美观的进度样式,进度颜色可以绑定在样式中以表示边框的 borderbrush 属性。 可以轻松设置进度的颜色。

4) 用户控件将有一个 UpdateProgress 方法,该方法将百分比值和数组中的进度索引作为参数。

5) 当进度更新时,您可以计算边框的适当宽度(用户控制实际宽度 * 百分比)并使用 Z 索引以使其显示在顶部/底部,或者水平堆叠边框,设置首先是最少的进度,然后对于其余的进度,您必须减去先前的进度长度才能获得相同的效果。

这样就不会出现透明度引起的伪影,也不会出现 OnRender()...
请注意,在 WPF 中,没有理由混淆 OnRender this 和 OnRender that,就像 WinForms 中需要使用 OnPaint 一样。
只需通过代码设置元素即可获得所需的外观,然后让 WPF 进行渲染;)

但我可以想象此用户控件存在一个问题。 您必须向用户提供关于哪种颜色属于哪种进度的反馈。 但这可能会让您回到第一个方向,这意味着只显示多个进度条更好/更简单。

I'm not quite sure how you intend the progressbar to combine different progresses, but if say the furthest along progress is at the bottom of the z-index and the least along progress is at the top, then I'd do something on the lines of this:

1) I would probably create a user control for this new progresbar.

2) It would have a property called NumberOfProgresses, that is tied with an array containing status of said progresses.

3) Each progress would be represented by a Border item (or perhaps something more suitable up the visual tree), because it's a simple wpf control with a background property. The background property would be set to nice a looking progress style and the progress color can be bound in the style to say the border's borderbrush property. Making it easy to set the color of the progress.

4) The user control would have a method UpdateProgress which takes the percentage value and the index of the progress in the array as parameters.

5) As progresses are updated you can either, just calculate the appropriate width (user control actual width * percentage) for the border and play around with the Z index to get it displayed at the top/bottom, or stack the borders horizontaly, set the least along progress as first, then for the rest of the progresses you'd have to substract previous progresses lengths to get the same effect.

This way there would be no transparency induced artifacts and no OnRender()...
Mind you, in WPF there should be no reason to mess with OnRender this and OnRender that, like it was required in WinForms with OnPaint.
Just set up the elements via code to get the look you want, and let WPF do it's rendering ;)

I can imagine one problem with this user control though. You'd have to provide feedback to the user as to which color belongs to which progress. But that would probably take you back to square one, meaning it's better/simpler to just display multiple progressbars.

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