Silverlight Nine Grid

I was recently working on a project where I ran into a need for a nice nine grid (or scale 9 grid) and realized that with some of the new additions in Silverlight 3 and Blend 3 that one could put together a pretty sweet solution based on pixel shaders and the new design-time extensibility in Blend.

Nine Grids

Just in case everyone isn’t aware of what a nine grid is, it’s a technique for splitting up an image into 9 pieces then scaling those pieces to simulate layout-aware resizing rather than uniform scaling. Nine grids are very useful because they allow graceful resizing of otherwise non-resizable images.

Normally nine grids are done using either one image duplicated, scaled and cropped into 9 parts but I realized that this could be done much more elegantly with a single shader to handle the appropriate stretching. The real big benefit of using an effect is that vector path data from tools such as Illustrator can be nine-gridded in addition to images. A pixel shader also results in a much lower framework element count which helps keep control instantiation time zippy.

Design-Time

Using Blend 3’s new design-time extensions I was also able to put together a solid editing experience complete with adorners on the design-surface- makes it quick and easy to configure.

 

Source and binaries.

I've been playing around with a fun little Virtual Earth browser, it seems like everyone is making one these days so I figured I'd make a stab at it as well. It actually turned out to be a lot more fun than I was planning on- I got completely sidetracked by trying to add all the little polishes and got no where close to what I originally had in mind.

Before you read any further, I'd definitely suggest giving it a whirl- http://blois.us/VE

Instructions are basic- use the mouse wheel to zoom and search using the location bar.

Besides really cool zooming, I also tried to integrate into the browser history. I think that I got it working, but haven't tested on Safari yet, so it's really anyone's guess. The result is super fun- when searching multiple places the items get added to the browser history and clicking the back button will zoom you back and forward.

Some random searches to get you started-
Statue of Liberty
White House
University of Colorado (hey! that's where I went!)

I have to admit that I'm quite happy with the result so far- work progressed at a reasonable rate until I got mired in browser hell which happened a few more times than I would have liked. I definitely learned that HTML layout is no fun at all. Can't wait for Silverlight to get layout and be done with it.

I'd like to do some follow-ups with some of the things I learned while making this project, I definitely feel like I have a few more tricks in my bag that will come in handy later.

Sources can be found here. But be warned- I'm sort of hacking the VirtualEarth API and offer absolutely no guarantees for how long it will continue to work.

Enjoy!