Editor's Note: we have a special guest article from the Designer/Developer of the 2008 Presidential Candidates Silverlight Application. We'd like to thank Lincoln Anderson for a really great informative site that shows us where the candidates stand on the issues and also a great backstory diary of his experience developing this Silverlight Web Application..

The Making of: "2008 Presidential Candidates" Silverlight Web Application

By Lincoln Anderson
352 Media Group

The 2008 presidential primaries are fast approaching, and while there are many great web sites that give a quick overview of each candidate, there hasn't been a really visually engaging one. I wanted to make a UX-rich web app that would allow you to select your stance on the issues that are most important to you, and instantly get a graphical view of which candidates agree with you. (Or which ones disagree with you, which is often more interesting.)

I've been working with Silverlight since beta, and it seemed like a perfect fit for this concept. Silverlight 1.0 apps are quick to build and run, and great for managing the little animations of a graphical web application - fade transitions, rollovers and so on. I'm a designer at heart, and I've found that Silverlight's architecture makes it easy to tweak and test these types of simple animations in a live app.

I started with a prototype design. Most of the interface design work was done in Microsoft Expression Blend. Blend provides a slick GUI for editing your Silverlight application's XAML-based design files. Next I started developing the functionality and interactivity in Javascript. One cool thing about Silverlight 1.0 is that the published files are text-based. Everything in the app - from the color of a button to a XML parsing method - can be edited in your favorite code editor. (In my case, Notepad. I'm old-school.)

If you're already familiar with Silverlight, most of this application will be an open book to you. However, I did encounter one hurdle, which was the back-and-forth of design and functionality during development. There currently isn't a sure-fire way to manage design "resources," or create something like a user control inside Silverlight. For example, I wanted to create a template for a candidate's click-able photo and name, and repeat that element on the canvas, tiling it in rows and columns. I wanted to be able to maintain the design of this template in Blend, even though the names of each element would have to be unique in the application.

Now, from what I understand, Silverlight 2.0 will have support for user controls, among other neat new features. In the meantime the solution is not so cut and dry, so I formed a workaround. I creating several "template" XAML files, adding the suffix "N" to each the element's name property. When the application runs, it loads that XAML file as plaintext, iterates each element by replacing "N" with an integer, and injects it into the main document canvas. The script also manages pulling the storyboards out of the template and inserting them into the main document to avoid any naming conflicts with the associated animations.

The result is that I can now open a XAML file in Blend, tweak the graphics and animations, save it, and see the changes propagate across every instance in the application. I have templates for "candidates", "icons" and "issues". This resource-management method made design changes during development much easier.

Overall, building the application has been a great learning experience for me, and I look forward to Silverlight 2.0. In the meantime, I'll be trying to decide who to vote for...