Tag Archives: Image

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.

<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:

image

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.

Advertisements
Tagged , , , ,