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.