My Development Blog

My Development experiences

WPF – RateBar

Posted by ipwright83 on June 5, 2012

As per my previous post, I have been working on a WPF based progress bar. This is supposed to be similar to the  Windows 8 file transfer progress bar, I’ve named it a ‘RateBar’ as it seems appropriate. Well I’ve finished the initial version of this project and based on the popularity of the question on StackOverflow I imagine there are some other people who would benefit from the control.

I’ve not got any automated tests for it (I’ll try to add some at some point) and I don’t know if it works with WPF styles (mainly because I don’t know how they work), but it all seems to work so far and matches quite nicely based on my initial intention. To get a true windows 8 style it’ll probably need combining with an ‘expansion’ arrow which switches between a progress bar and a rate bar.

Some basic instructions to get you started. You’ll need to do the following (I hope most of which are fairly obvious):

  • Add a reference to RateBar.dll within your WPF project.
  • Add the RateBar namespace within your WPF window/control that you wish to include it on:
            xmlns:my="clr-namespace:RateBar;assembly=RateBar"
  • Add an instance of the RateGraph, recommended size is 380×88:
            <my:RateGraph x:Name="rateGraph1" Height="88" Width="380" />
  • Update Value (the progress), Rate (the current rate) and Caption (the rate info above the black line) on a regular basis.
Note: The Progress needs to change before the Rate is updated, otherwise you’ll end up with a vertical line on your graph, as the rate get’s added based on the current progress location to the graph.

I’ve included the source and release binaries in a zip file accessible from here. If you like this and would like to contribute in some way then please feel free to sign up for Dropbox if you’re not already on (free multi location file storage with cloud synchronization) using my referral link. This will give me more space for hosting source code, binaries and useful tools for the community.

The license for the code is that you may use it in any project and modify it as much as you need. Please reference me somewhere if you have a readme and if you’d like to use it for commercial use feel free to do so as long as you leave a comment so I know how many people are using it (and whether I should invest more time improving it!).

6 Responses to “WPF – RateBar”

  1. This is a truly lovely visualization, though a bit resource-hungry. I’d suggest you to use MathConverter instead, to get the rid of JScript dll dependency: http://www.codeproject.com/Articles/239251/MathConverter-How-to-Do-Math-in-XAML

    I’ve embedded it into our product, Zet Universe:

    Thank you, Ian. This is a fantastic thing!

    • ipwright83 said

      I’m glad you’ve found it useful. I honestly haven’t looked at this in quite a long time but it’s great that someone is using it. I’m not sure where the source code is for it at the moment but I’d be happy to put it on Github or similar so you can fork/remove the JScript.dll if you’d like? Unfortunately I never really got into WPF development (as much as I’d like to) and I’m instead digging deep into the JavaScript.

      • Yeah, it is super-cool. Actually, your download link in this blog contains the bits. I already replaced JScriptConverter with MathConverter. Works flawlessly 🙂

        Its sad you didn’t get into WPF development; this control shows a lot of Force hidden in you, Luke! 😉

    • ipwright83 said

      Can’t seem to reply to a reply! I can’t even remember what’s in the download link – that’s how long it’s been. I do remember I had a slight issue with it at some point (the solid area would grow off the y-axis until it rendered out of the grid and then it’d resize. Normally visible running the demo executable).

      Yeah, unfortunately it’s down to the needs of the company and we looked at some WPF but never needed to actually work with it. It still looks a really interesting technology and maybe one day I will get a chance. Right now I’m working on visualizations in JavaScript using D3.js so still getting to do some good stuff.

  2. Eddy said

    Great work! Looks slightly better even than the native Windows version. Probably because you can profit from anti-aliasing which happens in WPF.

    Too bad I discovered your project a little late, it seems the download link doesn’t work anymore. It would have made a great addition to a batch file copy tool I’m working on. Any chance it’s still to be found online somewhere else? Thanks.

Leave a reply to Daniel Kornev Cancel reply