NineGrid property

Image.NineGrid property

Gets or sets a value for a nine-grid metaphor that controls how the image can be resized. The nine-grid metaphor enables you to stretch edges and corners of an image differently than its center. See Remarks for more info and an illustration.


property Thickness NineGrid { 
   Thickness get();
   void set (Thickness value);

<Image NineGrid="left,top,right,bottom" />

XAML Values


An attribute string that is handled by the Thickness type converter behavior. Specify values for the Left, Top, Right, and Bottom value components of a Thickness in that order, with commas or spaces as separators. Other syntaxes exist that provide symmetrical/uniform values, see Thickness.

Property value

Type: Thickness

A Thickness value that sets the Left, Top, Right, Bottom measurements for the nine-grid resizing metaphor.


When you use nine-grid rendering, you can specify how different areas of the image are stretched. This feature is useful for preserving the detail on image corners when an image scales or stretches.

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

A grid of nine sections.

Nine-grid rendering enables 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 create an Image element and specify a value for the NineGrid property—pixel values for the lengths of the left, top, right, and bottom sides of the grid. In XAML, you specify the NineGrid attribute value as a string that specifies pixel values for the sides in left, top, right, bottom order. Internally, this syntax creates a Thickness object that represents this type of measurement. If you want a uniform value, you can specify just one value that's applied to all four edges.

Applying nine-grid rendering is very useful when the image itself includes some type of border or edge decoration embedded within the image source. For example, imagine you're using an image source for a Button that has the outline as part of an image with transparency. You might want the center area that contains an icon to stretch. But if you stretch the corners you might get aliasing artifacts from rounded corners. Or the border sides might get too thick and wouldn't look as good when scaled. To prevent that, you could use a NineGrid with uniform values that always keep the pixel size of the border the same size as in the image source.

Either in code or in XAML, the values for the Thickness that you use to set the NineGrid property are device-independent pixel values.

Here's example XAML for an Image element using a NineGrid value:

<Image Source="Images/9grid.bmp" NineGrid="30,20,30,20" />

A NineGrid value is only relevant for image rendering if the image does not have specific values set for Width and/or Height, and where the image is being stretched (image is rendered into a larger container space and the value for Stretch is not None).

Requirements (Windows 10 device family)

Device family

Universal, introduced version 10.0.10240.0

API contract

Windows.Foundation.UniversalApiContract, introduced version 1.0


Windows::UI::Xaml::Controls [C++]



Requirements (Windows 8.x and Windows Phone 8.x)

Minimum supported client

Windows 8

Minimum supported server

Windows Server 2012

Minimum supported phone

Windows Phone 8.1 [Windows Runtime apps only]


Windows::UI::Xaml::Controls [C++]



See also

XAML images sample



© 2016 Microsoft