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.