Image.NineGrid in WinRT

WinRT adds this sweet new property for an Image control called NineGrid. It simplifies using images as frames around a content that does not have predefined dimensions or when you want to use a simple image that is smaller than the end result frame, but is stretched in some parts.


The below sample has a reference, Image control with unscaled bitmap – a white 100×100 rectangle with a big circle aligned to all its borders and small circles in each of the corners. It also has a Grid with some sample controls within it, layed out with a margin of 50 on each side and an Image control as a background with the same bitmap used as in the reference image, but stretched in such a way, that the quarters (50×50) of the original big circle form corners of a frame and the frame sides are just stretched pixels from the vertical and horizontal cross sections of the bitmap crossing in the middle of the source bitmap.

    <!– Background –>
        Fill="White" />
    <!– Reference Image –>
        Stretch="None" />
    <!– Grid containing the frame in the background and some controls inside –>
        <!– Reference image –>
            NineGrid="50" />
        <!– Sample controls –>



As you can see – the ornaments at the corners of the source image have preserved dimensions, while the frame can stretch to any size as long as it is bigger than 100×100. Note the MinWidth and MinHeight properties on the Grid – the image won’t stretch to be smaller than the frame of the nine grid!

Another place to look at a good description of a nine-grid is in another SDK – for Windows Media Center, that has a similar control – here.

Tagged , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: