How can I use any Path Drawing as a progressBar in WPF

Question

2.00/5 (1 vote)

See more:

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

XML

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

in the xaml file.

The Path data of the above image is-

XML

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.

Posted 3-Aug-15 0:08am

Rupam Bhaduri Pro

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-08-03T04:25:00

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