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…
My Development Blog 