Scale 9 Image for Silverlight

Tim Rule — Tue, 13 May 2008 03:15:00 GMT

A scale 9 image divides an image into 9 regions which each scale differently when an image is scaled. Click on the "Toggle Full Screen" to try the example. Drag the white square with a red border to resize the shape.

Take the following bitmap for example:

By defining a center Rectangle there is enough information for a smarter scaling of the image. In the case of scale 9 the corners will not scale when the image is resized. The edges will scale parallel to their orientation. The center will scale in both direction.

This type of image construct can be useful for creating rich bitmap graphics for the backgrounds of sizable containers.

Here is a sample usage of the control. The ImageSize is the "Width,Height" of the source image and the CenterRect defines the grow region of the control.

The control is composed of a Grid with a Canvas in each cell of the Grid. Each Canvas contains an Image which has a Clip property as well as a TranslateTransform and a ScaleTransform. All these values are adjusted programmatically when a resize occurs to the control.

My Silverlight Blog : bitmap

Scale 9 Image for Silverlight