Click here to Skip to main content
14,828,866 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
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-[^]
Can you tell how to do it?

I already did this[^]

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-[^]
In this url, the "ProgressBarBrushConverter.cs" was used, but I couldn't replace the reference of "Luna" with "ProgressBarBrushConverter.cs" for the
   <converter:ProgressBarBrushConverter />
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-[^]

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

1 solution

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:[^].

Rupam Bhaduri Pro 3-Aug-15 11:58am
The 1st link of the image was something that I wanted, but using the tutorial of 2nd link (vbcity...) I got something and it is , so the tutorial was "Path Independent Tutorial". But the white blocks due to "Luna" dll file, I want to get rid of this and want a smooth progressbar.
I don't understand. Didn't I gave you an exact recipe? You can apply one of these approaches to some other kinds of graphic decoration of progress bar. And how it can be not smooth?
Rupam Bhaduri Pro 4-Aug-15 0:23am
This is what I got
But this is what I wanted

The 2nd image in this comment doesn't has white bars but the 1st has. I want to get rid of those bars only. The bars is coming from Luna dll.
I described what you wanted, not what you (mistakenly) got. And this is because you did not use my advice. :-)
Do everything properly; and you will get it. Anyway, you did not explain how you got wrong image. I suggest you just do it again, correctly.
Rupam Bhaduri Pro 4-Aug-15 2:25am
Actually the problem was solved in a different way, I have done it from scratch and with my logic. My code is so simple compare to the above source. And it can handle any type of shape for linear smooth progressBar. Thanks for your valuable time.
zsohu 3-Dec-17 12:22pm

I'm looking for a smooth custom shaped progressbar for making a MoTeC like display. Could you share your solution for this problem?


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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900