20 January 2009

Making Silverlight do the work for me: fake software boxes

What I love about Silverlight is that it does a lot of work for me. An example: fake software boxes. Let's say you have some software to advertise: isn't this box appealing?

So, you can go to the graphics department and nicely ask for such a box. Or follow the tutorial. But what if you have dozens of products to advertise? The graphic people don't want to do that and neither do you. I believe there are some smart graphic editors that do macros or something like that, but there's yet one more way, illustrated by the diagram below:
Here's what I did yesterday working on a website to advertise my company's software:

  1. I took two plain pictures, one for the front and one for the side (this one can be a textblock).
  2. I placed them on the canvas and surrounded them with borders.
  3. I added a rectangle for the top.
  4. I applied transformations to obtain the pseudo-3d effect you can see above.
Now, to make more boxes of the kind, I just need to re-use the xaml and change the images! Piece of cake!

Okay, this is the place where I should put the code, but I did this at work, which means it's copyrighted to my company and I'd have to ask my boss for his permission, which I couldn't really do these days because he's too busy and now I'm leaving work for a week to focus on school. Sorry about that.

Furthermore, this can be done better (look again at the picture on the top):
  1. one can apply a matrix transform to give perspective (that thing where parallel lines all meet somewhere... mine don't)
  2. one can add a shadow (which I definitely should)
  3. one can make rounded corners like Microsoft's software boxes have
  4. one can add a reflection, since it's web 2.0 and every single software box is standing on a shiny surface, and Silverlight is great for that too!
and that's just a few ideas.

Well, if anyone feels inspired and wants to make a re-usable software box control, I'm sure a lot of people would re-use it, so let me know if you do!


  1. mmm... yeah, perspective.. (holding chin)... I've been meaning to try harder. I'll let you know when that happens.

  2. I've seen your tutorial on making shadows and it's great - I think I'll use it if I ever need to add a shadow.