Click here to Skip to main content
15,939,960 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi,

I want to make a progress bar with animation, a sweeping red light, much like the famous Knight Rider car of the 1980s.

I made lots google search, but there is no solution. Most encountered answer to use IsIndeterminate="True" and marquee style. But both of them are different from Knight Rider like Animation.

This is an example:
http://www.bndstudios.com/bthrive/kr/kr.gif[^]

Thank you.
Posted
Updated 6-Nov-13 2:08am
v2
Comments
ZurdoDev 6-Nov-13 8:26am    
You need to create the animation. Do you know how to do animations?
desmondos 6-Nov-13 8:30am    
I am using xaml for a while but i have no idea about animations.
ZurdoDev 6-Nov-13 8:42am    
I would suggest finding some tutorials then so you can do this.
desmondos 6-Nov-13 8:44am    
ok, thanks for your response.
Sergey Alexandrovich Kryukov 6-Nov-13 9:43am    
"I want to make a progress bar with animation..." and "I made lots google search, but there is no solution" contradict to each other.

No, you don't "want to make", you want to find something ready to use. Forget your "I want to make", you are not trying to make anything, be honest. If you wanted, you would sit down and try to make it, especially if this is something non-standard. And we would gladly help you to overcome some problems in your code, if you faced them.

—SA

1 solution

If what you need it what is shown in this GIF, I would probably keep to the animation already available in WPF. I hope you don't need that bad flicker shown in the sample GIF, probably this is just the limitation of the GIF with small number of frames.

This is a rectangular image moving withing a rectangular area.

First of all, you need to create an image itself. For scalability and other goodies, it's the best to make it a vector image. This is my "secret weapon", a wonderful open-source application called Inkscape:
http://en.wikipedia.org/wiki/Inkscape[^],
http://inkscape.org/[^].

Make am image to be moved. All you need is four basic shapes (delimited by diagonals of the rectangle) with separate gradient in each one. Then — important point — export it as XAML. You will need the object represented as the instance of the class System.Windows.Controls.Canvas:
http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.aspx[^].

Note that this is a very beneficial way to work with images in WPF. Not only you can scale it without any loss of quality (this is vector), you can put it in a resource dictionary (read about them if you haven't done it so far), but you even can allow the users to create their own images and use them in your application during run time, changing them on the fly, and so on.

Now, you need to put this image as a child on another canvas, because this UI element allows you to freely position children on it, using attached properties like Top and Left (these two would be enough, or, in your case, just Left). So, you change the position using Canvas.SetTop, Canvas.SetLeft, as shown in the MSDN article referenced below:
http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.top.aspx[^],
http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas.left.aspx[^].

See also: http://msdn.microsoft.com/en-us/library/ms749011%28v=vs.110%29.aspx[^].

The remaining step will be to animate the position via the Left property. Please see:
http://msdn.microsoft.com/en-us/library/ms752312%28v=vs.110%29.aspx[^],
http://msdn.microsoft.com/en-us/library/ms752312(v=vs.110).aspx[^].

—SA
 
Share this answer
 
v2

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