<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\07513405220\46blogName\75Pavan+Podila\47s+Blog\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75BLUE\46layoutType\75CLASSIC\46searchRoot\75http://pavanpodila.blogspot.com/search\46blogLocale\75en_US\46v\0752\46homepageUrl\75http://pavanpodila.blogspot.com/\46vt\0757258010184004836690', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Monday, February 13, 2006

QuickSort animation in WPF


This is my first complete application written in Windows Presentation Foundation (WPF). I had written many test projects and samples to test various pieces of WPF but nothing that puts things together as a whole.

The idea of creating a QuickSort animation struck me when I was explaining this algorithm to someone at UH. I thought it would be cool to animate this using WPF.

Workflow
The workflow I adopted was opening up Expression Interactive Designer (EID) and Visual Studio 2005 (VS) side by side. I created the project in EID and then opened it up in VS as well. I would hack in EID to come up with the visuals and then go back to VS to write out the logic. The only nagging thing was the "Do you want to reload?" dialog which pops up in both places as you switch between EID and VS. It would be very cool if these apps understood that we are hacking the same project and reload things automatically. I don't know if this could be configured. If yes, I would like to know HOW?

Insights on the internals

1. The solution is divided into 3 projects. There is a class library that contains the QuickSort implementation. A Test project that has unit tests for QuickSort. Finally there is the UI written using WPF.
2. The UI generates some random numbers (clicking on Generate! button) and sets up the list for QuickSort.
3. As QuickSort executes, it fires events whenever a Swap operation happens
4. The UI intercepts these events and makes a list of all the swaps
5. Clicking the Play button plays the swaps as they happened.

Pretty simple isn't it. On the surface yes. I had some issues with animating the elements. Some off-by-one issues in the QuickSort implementation and a few issues with enabling-disabling the (Generate, Play) buttons.

It was fun and a great learning experience. Discussion on the EID forum helped a lot in shaping this app.

Download the source.