如何在WPF中将任何路径绘图用作progressBar [英] How can I use any Path Drawing as a progressBar in WPF

问题描述

假设我有一个绘图的路径数据，我想将它用作progressBar，它的透明区域将根据进度值填充红色。

像这样 -

http://i.stack.imgur.com/27Ps4.png [ ^ ]

你能说明怎么做它？



我已经这样做了

http://vbcity.com/blogs/xtab/archive/2009/11/24/wpf-controltemplates-creating-a- non-rectangular-progressbar.aspx [ ^ ]



但问题是progressBar包含Blocks，I想要顺利进步像我上面的图像我有发布。



我已经在网上搜索了删除块，发现它正在发生旧的Luna汇编引用来自这个url-

http://stackoverflow.com/questions/25837798/get-摆脱白色背景进度栏 [ ^ ]

在此网址中，使用了ProgressBarBrushConverter.cs，但我无法将Luna的引用替换为 ProgressBarBrushConverter.cs用于

 <   MultiBinding。转换器 >  
 <  转换器：ProgressBarBrushConverter     /  >  
 <   / MultiBinding.Converter  >  
 

。



上面图片的路径数据是 -

数据=F1M307.5,21.75C303.765,21.75 300.51,19.701 298.793,16.667 298.793,16.667 242.207,16.667 242.207,16.667 240.49,19.701 237.235,21.75 233.5,21.75 229.765,21.75 226.51,19.701 224.793,16.667 224.793,16.667 168.207,16.667 168.207,16.667 166.49,19.701 163.235,21.75 159.5， 21.75 155.765,21.75 152.51,19.701 150.793,16.667 150.793,16.667 94.207,16.667 94.207,16.667 92.49,19.701 89.235,21.75 85.5,21.75 81.765,21.75 78.51,19.701 76.793,16.667 76.793,16.667 20.207,16.667 20.207,16.667 18.49,19.701 15.235 ，21.75 11.5,21.75 5.977,21.75 1.5,17.273 1.5,11.75 1.5,6.227 5.977,1.75 11.5,1.75 15.167,1.75 18.37,3.724 20.111,6.667 20.111,6.667 76.889,6.667 76.889,6.667 78.63,3.724 81.8 33,1.75 85.5,1.75 89.167,1.75 92.37,3.724 94.111,6.667 94.111,6.667 150.889,6.667 150.889,6.667 152.63,3.724 155.834,1.75 159.5,1.75 163.167,1.75 166.37,3.724 168.111,6.667 168.111,6.667 224.889,6.667 224.889， 6.667 226.63,3.724 229.834,1.75 233.5,1.75 237.167,1.75 240.37,3.724 242.111,6.667 242.111,6.667 298.889,6.667 298.889,6.667 300.63,3.724 303.833,1.75 307.5,1.75 313.023,1.75 317.5,6.227 317.5,11.75 317.5,17.273 313.023 ，21.75 307.5,21.75z

为方便起见我上传了解决方案档案，如果你能帮助我，我将非常感谢！

解决方案文件的链接 -

https ：//drive.google.com/file/d/0B1kVJUcRUWHWTzJPSDB2N2tlUDQ/view？usp =分享 [ ^ ]



感谢您的时间，请帮助我，我正在努力个月。

解决方案

我正要告诉你，你需要从头开始创建你想要的控件。此外，您的问题标题表明您希望将进度显示为某个任意路径的一部分。由于明显的几何考虑，您将无法通过任何预定义的WPF转换或任何其他即用型计算工具执行此操作，因为每个路径段可以具有其自己的几何和用于获得其长度的特定百分比的规则。



然而，看一下第一个链接中显示的图像样本，可以假设你真的不想要那样的东西。如果您想要的是该图片上显示的内容，如果表明您的任何路径只是在错误的方向上。进度本身的指标非常简单：圆角矩形。围绕它的路径或任何其他显示只不过是与进度指示器本身完全无关的装饰。



因此，我的建议也非常简单。仍然，从头开始创建一个进度指示器控件，

构成三个独立部分控件的内部内容：背景与百分比数字，在它上面，你在the decoration中显示的装饰黑色球的形状，在它的顶部，指示器，反过来，可以由圆角矩形框架（图片中的黑色）组成，其上方有指示器：白色圆角矩形背景和读取圆形 - 根据当前进度填充矩形。



对于更琐碎图形的解决方案，请参阅我的文章：不需要的WPF ProgressBar动画问题：更清晰的解决方案 [ ^ ]。



因为你将有更复杂的图形内部内容，您可以使用不同的基类。我使用 ContentControl ，但您可以选择以下两种方法之一。第一个可以基于 Canvas ：您可以将所有图形元素放在Canvas上，这允许任意调整其内容的大小和位置。



另一种方法是使用直接图形渲染。请参阅： https://msdn.microsoft.com/en -us / library / vstudio / ms748373％28v = vs.100％29.aspx [ ^ ]。

-SA

Suppose I have a Path data of a drawing and I want to use it as a progressBar and It's transparent area will be filled with red color according to progress value.
Like this-
http://i.stack.imgur.com/27Ps4.png[^]
Can you tell how to do it?

I already did this
http://vbcity.com/blogs/xtab/archive/2009/11/24/wpf-controltemplates-creating-a-non-rectangular-progressbar.aspx[^]

But the problem is that the progressBar contains "Blocks", I want smooth progressBar like I above image I have posted.

I have searched the web to remove the blocks and found that it was happening for the old "Luna" assembly reference from this url-
http://stackoverflow.com/questions/25837798/get-rid-of-white-background-in-progressbar[^]
In this url, the "ProgressBarBrushConverter.cs" was used, but I couldn't replace the reference of "Luna" with "ProgressBarBrushConverter.cs" for the

<MultiBinding.Converter>
   <converter:ProgressBarBrushConverter />
 </MultiBinding.Converter>

in the xaml file.

The Path data of the above image is-

Data="F1M307.5,21.75C303.765,21.75 300.51,19.701 298.793,16.667 298.793,16.667 242.207,16.667 242.207,16.667 240.49,19.701 237.235,21.75 233.5,21.75 229.765,21.75 226.51,19.701 224.793,16.667 224.793,16.667 168.207,16.667 168.207,16.667 166.49,19.701 163.235,21.75 159.5,21.75 155.765,21.75 152.51,19.701 150.793,16.667 150.793,16.667 94.207,16.667 94.207,16.667 92.49,19.701 89.235,21.75 85.5,21.75 81.765,21.75 78.51,19.701 76.793,16.667 76.793,16.667 20.207,16.667 20.207,16.667 18.49,19.701 15.235,21.75 11.5,21.75 5.977,21.75 1.5,17.273 1.5,11.75 1.5,6.227 5.977,1.75 11.5,1.75 15.167,1.75 18.37,3.724 20.111,6.667 20.111,6.667 76.889,6.667 76.889,6.667 78.63,3.724 81.833,1.75 85.5,1.75 89.167,1.75 92.37,3.724 94.111,6.667 94.111,6.667 150.889,6.667 150.889,6.667 152.63,3.724 155.834,1.75 159.5,1.75 163.167,1.75 166.37,3.724 168.111,6.667 168.111,6.667 224.889,6.667 224.889,6.667 226.63,3.724 229.834,1.75 233.5,1.75 237.167,1.75 240.37,3.724 242.111,6.667 242.111,6.667 298.889,6.667 298.889,6.667 300.63,3.724 303.833,1.75 307.5,1.75 313.023,1.75 317.5,6.227 317.5,11.75 317.5,17.273 313.023,21.75 307.5,21.75z"

For ease I have uploaded the solution File, I will be thankful if you can help me!
Link for the solution file-
https://drive.google.com/file/d/0B1kVJUcRUWHWTzJPSDB2N2tlUDQ/view?usp=sharing[^]

Thank you for your time, please help me, I am trying from months.

解决方案

I was about to explain to you that you would need to create the control you want pretty much from scratch. Moreover, the title of your question suggests that you wanted to display progress as a part of some arbitrary path. Due to apparent geometry considerations, you would not be able to do so through any predefined WPF transforms, or any other ready-to-use computing facility, because each path segment could have its own geometry and the rules for getting certain percent of its length.

However, looking at the image sample shown in first link, one could assume that you really don't want anything like that. If what you want is what shown on that picture, if suggests that your though about "any path" was just in a wrong direction. The indicator of the progress itself is quite trivial: rounded rectangle. The "path" or any other display around it is nothing but decoration totally irrelevant to the progress indicator itself.

Therefore, my suggestion would also be pretty trivial. Still, create a progress indicator control totally from scratch,
Compose the inner content of the control of three independent parts: background with percentage figure, on top of it, the "decoration" which you show in the form of black balls, on top of it, the indicator, which is, in turn, can be composed from the rounded rectangular frame (black in your picture), with the indicator on top of it: white rounded-rectangle background and read rounded-rectangle filling according the current progress.

For the solution for even more trivial graphics, please see my article: The Problem of Unwanted WPF ProgressBar Animation: a Clearer Solution[^].

As you will have more complicated graphics in the inner content, you could use different base class. I used ContentControl, but you could choose one of two approaches. First one could be based on Canvas: you can put all your graphical elements on Canvas, which allows arbitrary sizing and positioning of its content.

Another approach would be using direct graphic rendering. Please see: https://msdn.microsoft.com/en-us/library/vstudio/ms748373%28v=vs.100%29.aspx[^].

—SA

这篇关于如何在WPF中将任何路径绘图用作progressBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！