My Development Blog

My Development experiences

Archive for June, 2012

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:
  • 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!).


Posted in Uncategorized | 4 Comments »

Windows 8 Style Progress Bar

Posted by ipwright83 on June 1, 2012

I recently saw a preview of Windows 8, I didn’t see very much of it but one of the things I did see really caught my eye. The new file transfer progress bar that is in use. For those of you who haven’t seen it a screenshot is included below. Not only does it report progress, but it shows you the current rate of transfer and how that has varied over time.

I wondered whether or not this was something that Microsoft would be releasing, a question on StackOverflow led to ‘maybe’, but chances are it would only be avaliable for Windows 8 anyway. I could see some real potential for this sort of feedback for the application I contribute toward at my workplace, many of the customers won’t be using Windows 8 for some time. I love writing custom tools to make my development life easier, so I thought why not write a new progress bar mimicking this behaviour?

I could have chosen to do this in WinForms and GDI. This would have been well in the realm of comfort although probably tedious ensuring things were pixel perfect. I have been trying to learn some WPF in my spare time, and one of the big problems, is coming up with small isolated projects that are interesting and achievable, I felt like this fit the bill so got started during my lunch breaks and evenings.

I originally thought that I’d just inherit from a ProgressBar and modify some visuals (I actually did do this in the end) but when I discovered I had to use templates this gave me some shivers, I struggle with the bindings still in XAML and didn’t felt like I could easily seek answers to the wrong implementation. So I started off writing a purely code based solution – ProgressGraph.cs.

Although it was fairly easy, and did seem to work, it felt like it was breaking the WPF paradigm. I hadn’t touched a piece of XAML and I’m sure it had bugs in it. I loaded up Reflector to see how ProgressBase.cs had been implemented, and extended this implementation to include the relevant Rate based information that I needed – RateBase.cs. This is a reusable class that you can build your own templates for if you so wish. I’d learnt a few things on the way, a little about DependencyProperties, I was reminded that co-ordinates were based from the top-left and initally had forgotten to use the Dispatcher.

I then started writing my template, which was relatively easy actually once I knew what the bindings should be (note to self… controls don’t appear if you forget to apply the template!). I wanted to do as much as possible in the XAML and using converter’s where possible, I managed to achieve much of this when I stumbled across a blog about a Javascript based multi-converter. This allows me to do much of the calculation within the XAML itself. The only aspect I’m less pleased with is how I’ve handled updating the graph as this had to be done in the code behind. I don’t want to pollute the RateBase with a property of historical values, but I do need to store these somewhere to produce a graph. It works at least and I managed to achieve most of it in XAML which wasmy aim.

Keep an eye out for the next post where I’ll be sharing a link to the source and compiled version…

Posted in C#, WPF | Tagged: , , | Leave a Comment »