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!

2 comments:

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

    ReplyDelete
  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.

    ReplyDelete