← About Jeff

Creating a two dimensional barcode control for Silverlight 3

September 30, 2009

Update 3/26/10: This also works with Windows Phone applications. 2D barcodes in Windows Phone applications post.

Thanks to the abundance of .NET class libraries that have been developed over nearly a decade of .NET software development, it’s amazingly easy to add powerful functionality to Silverlight applications by reusing existing code. Within a few hours, I was able to create two-dimensional barcodes in Silverlight – making me really want mobile support, web camera support, and printing (submit your Silverlight customer suggestions) for this functionality to be super useful.

My temporary obsession with 2D barcodes came about after I installed the awesome Starbucks Card Mobile app for my iPhone and drove by the Madison Park Starbucks on my way to Redmond, trying out their sweet mobile payment experience. The app worked great – I can only imagine how nice it will be once I can leave my physical Starbucks card at home!

starbucksapp1
Note: Image is provided by Starbucks, and not a real bar-code that’ll get you free coffee :-)

I’ve heard stories for years about how many countries worldwide are super-high tech, using QR two-dimensional barcodes everywhere, but this was my first experience as a regular consumer, other than seeing them on UPS shipping labels, expensive-looking gadgets in stores, and photos of interesting places:

QuickReadLive 
Photo by avlxyz', CC-attribution

There are so many versions of the QR code standard now that I settled on Version 2, which doesn’t hold as much data as some of the more complex versions – but the library iteself supports them all if you embed a few additional resource files into the assembly.

So what I set and did to get the bare minimum working:

  • Used Joe Stegman’s EditableImage and PngEncoder to create a raster image on the client
  • Found an open-source .NET library that performs at least QR encoding – I found and settled on QRcode on The Code Project site, licensed via the permissive CPOL – this work of user ‘twit88’ is the bulk of the awesomeness we’re talking about here
  • Adapted the library to work with the reduced BCL set (replace ArrayList with generic collections, etc.). I also had to replace some System.Drawing functionality with other equivalents, plus write a quick ToArgb extension method
  • Create a simple control, QRBarcode, that has text and barcode color properties

Here’s the resulting control in use (click to experience the app):

BarcodeSample[1]

It was a quick project, so now, I just need some Silverlight mobile – argh! There isn’t much application to a standard Silverlight app today, unless you want to use SaveFileDialog to store the image to the user’s homepage, or let them take a digital picture of the code. But hey, it was fun!

If you download the project, you’ll see that I purposely excluded a lot of the various QA code spec versions from the final assembly, to cut down its size, plus I commented out some of the encode capability – but overall it went together really quickly and is a solid library, for sure.

Download the zipped up solution with everything you need to experiment (Silverlight 3, C#, 1.1 MB)

Related note: Jeff Atwood posted a neat comparison of data over the years, back in July.