Using Nine-Grid Rendering

When working with images, you can use nine-grid rendering to control how an image is resized. When an image is resized normally, the entire image is stretched evenly and linearly in both horizontal and vertical dimensions. When you use nine-grid rendering, you can specify how different segments of the image are stretched. This feature is useful for preserving the detail on image corners.

Nine-grid rendering divides an image into a grid of nine sections:

Nine-grid rendering allows you to preserve the original dimensions of the corners (boxes 1, 3, 7, and 9). The top and bottom (boxes 2 and 8) are stretched horizontally only, and the sides (boxes 4 and 6) are stretched vertically only. The center (box 5) is stretched in both dimensions.

To use nine-grid rendering, you must create an Image element and specify the nine-grid values—pixel values for the lengths of the left, top, right, and bottom sides of the grid:

The following is an example of an Image element:

<Image Name="9Grid" Source="file://9grid.bmp" NineGrid="30,30,30,30" />

The following example shows how an image appears when resized normally and using nine-grid rendering. Note that when the image is resized larger, the corners appear pixilated. When nine-grid rendering is used, the corners remain smooth with finer detail.

  <Image Name="9Grid" Source="file://9grid.bmp" NineGrid="30,30,30,30" />

  <UI Name="9GridImages">
    <Content>
      <Panel >
        <Layout>
          <FlowLayout Orientation="Vertical"  Spacing="20,0" />
        </Layout>
        <Children>

          <Text Margins="0,15,0,0" Color="White" Font="Verdana,12" Content="The original image:" />
          <me:Original/>
          
          <Text Margins="0,15,0,0" Color="White" Font="Verdana,12" Content="Stretched evenly 2x larger:" />
          <me:Doubled/>

          <Text Margins="0,15,0,0" Color="White" Font="Verdana,12" Content="Stretch 2x using NineGrid=30,30,30,30:" />
          <me:NineGrid/>
        </Children>
      </Panel>
    </Content>
  </UI>

  <UI Name="Original">
    <Content>
      <Panel  >
        <Children>
          <!-- The original image, which is 85 x 85 pixels. -->
          <Graphic HorizontalAlignment="Near" VerticalAlignment="Near" Content="file://9grid.bmp" />
        </Children>
      </Panel>
    </Content>
  </UI>

  <UI Name="Doubled">
    <Content>
      <Panel Layout="VerticalFlow" MaximumSize="170,170" >
        <Children>
          <!-- Scaled 2 x 2 larger. The corners are pixelated. -->
          <Graphic Content="file://9grid.bmp" HorizontalAlignment="Fill" VerticalAlignment="Fill" SizingPolicy="SizeToConstraint" />
        </Children>
      </Panel>
    </Content>
  </UI>

  <UI Name="NineGrid">
    <Content>
      <Panel Layout="VerticalFlow" MaximumSize="170,170" >
        <Children>
          <!-- Scaled 2 x 2 larger. The NineGrid values preserve the size of the corners. -->
          <Graphic Content="image://me:9Grid" HorizontalAlignment="Fill" VerticalAlignment="Fill" SizingPolicy="SizeToConstraint" />
        </Children>
      </Panel>
    </Content>
  </UI>

Sample Explorer

• View Items – Graphic > Graphic - Image

See Also

• Creating a Layout
• Sample Explorer
• Working with View Items