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.
<Grid
x:Name="LayoutRoot">
<!– Background –>
<Rectangle
Fill="White" />
<!– Reference Image –>
<Image
Source="/Images/Frame.png"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Stretch="None" />
<!– Grid containing the frame in the background and some controls inside –>
<Grid
VerticalAlignment="Center"
HorizontalAlignment="Center"
MinHeight="100"
MinWidth="100">
<!– Reference image –>
<Image
Source="/Images/Frame.png"
NineGrid="50" />
<!– Sample controls –>
<StackPanel
Margin="50"
VerticalAlignment="Top"
HorizontalAlignment="Left">
<TextBlock>TextBlock</TextBlock>
<TextBox
Text="TextBox"/>
</StackPanel>
</Grid>
</Grid>
Result:
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.
