Using the Grid layout panel

Blend for Visual Studio 2012 uses the as the default layout container for development. The Grid layout panel is the most flexible layout container, as compared to other layout containers that are designed to manage more specific layout functionality. A layout defines a flexible area that consists of columns and rows. Child elements of the Grid are measured and arranged according to their row and column assignments and internal class logic. The Grid provides an editing experience that is just like the run-time resizing behavior of the Grid. In this container, when you move column and row dividers  that you've created, the objects inside those rows and columns change in size to preserve their Margin properties.

Add a Grid to a document by selecting Grid  from the Assets panel  or from the layout container button in the Tools panel, and then dragging with the pointer on the artboard. The following XAML code is added to your project:

<Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>

For more information about how to work with Grid objects, see Add or remove a row or column and Change the sizing option for a row or column.

Positioning, sizing, and arranging

The purpose of layout in a Grid panel is to effectively position, size, and arrange objects by using Alignment, Margin, and Width and Height properties:

• Alignment   Determines what position an object takes in relation to the parent object of the object.

• Margins   Determines the amount of empty space around the control, between the outside of the child object and the boundaries of the panel.

• Width and Height   Fixed values measured in pixels (device-independent units that are approximately 1/96 inch). You can set these properties to Auto so that child objects will automatically resize depending on the sizing of the parent panel.

Arranging child objects

You can arrange objects in a Grid layout panel by sectioning off areas of the grid. You can do this by using column and row dividers  to create a series of rows and columns that define regions in which you can lay out objects in the grid. When the Grid layout panel is the active container in your document, blue rulers appear along the top and left sides of the grid. When you move your pointer over the rulers using the Selection tool , the pointer changes to an arrow with a plus (+) sign , and an orange line shows where a column or row will be added. Clicking anywhere on the top ruler adds a column to the grid at that position, and clicking the left ruler adds a row.

Adding a column grid divider

You can draw child objects in a Grid layout panel so that the objects overlap each other. Overlapping objects will be visible depending on their Z order (the order in which the objects were drawn or positioned in the parent object). You can change the Z order of objects by using Order on the Object menu, or by right-clicking items in the Objects and Timeline panel, pointing to Order, and then clicking the desired command. Child objects can also span across multiple columns or rows.

You can also turn on snapping so that you can better arrange objects by snapping to snaplines. Snapping lets you drag objects on the artboard and have them snap to the margins, baseline (for text objects), or alignment (red dashed line) of other objects in the same container object such as a layout panel, or the column and row dividers in a grid panel.

For more information, see Turn snapping on or off.

Sizing rows and columns

When you are in the Grid layout mode of a Grid layout panel, lock icons appear around the rulers on the top and left sides of the grid panel. You can use these lock icons to set the type of sizing that is used for the rows and columns in your grid. You can set height values for rows, and width values for columns. You have three options for sizing rows and columns in a grid, and these options in turn affect the arrangement of the child objects in the grid. These sizing options are as follows:

• **Fixed sizing   **Uses pixel values (px), and is set by clicking the lock icon to set it to Pixel sized (the locked position) . Fixed sizing means that the row or column will not resize.

  Note

  In Blend projects, pixels refer to device-independent pixels or device-independent units that are equivalent to the size of a pixel on a monitor that is set to a screen resolution of 96 DPI. Each unit is approximately 1/96 inch, regardless of monitor size or screen resolution.

• **Star sizing   **Uses star values (*), and is set by clicking the lock icon to set it to Star sized (the unlocked position) . Star sizing has an effect similar to percentage-sizing in HTML.

• **Auto sizing   **Uses no defined Width or Height properties, and is set by clicking the lock icon to set it to Auto sized. Auto sizing means that objects in the grid panel will resize when the parent object resizes.

Star sizing and auto sizing set for different columns in a grid panel

When a grid divider is selected on the artboard, you can use the Properties panel to select the sizing options and adjust the Width property when you use star sizing or fixed sizing. You can also set the MaxWidth and MinWidth properties of a column grid divider in the Properties panel.

Positioning child objects

In Grid layout, you set the positions of child objects in a grid by setting margins for each object. Margins specify the amount of offset for an object from the rows and columns that define the grid, or from the edges of the cell in the grid. You set margins when you drag a child object into position in a grid, and they represent the distance from the edge of the selected object to the next gridline (row or column). You set these by clicking the margin (knot) adorners. If a margin adorner is open ( or ), that margin is not set. If a margin adorner is closed ( or ), that margin is set. Resizing the grid during run time leaves any objects in position where the margins aren't set. Objects bound to a margin will move with the margin as it is resized.

Blend uses a simple rule to set the default alignment: If the child object you draw or resize crosses the middle of a row or column, the Width and Height will be Auto; otherwise, it will be fixed. You can also set an alignment option that indicates if the margin is enforced or not when the grid resizes. The alignment is shown in the grid as solid lines (alignment set) or dashed lines (no alignment set), as shown in the following image.

A button in a Grid panel that is bound (margins set, with the margin value indicated) to the left and right, and unbound (margins not set) at the top and bottom

• Horizontal alignment

  • Left   Anchors to the left but stretches to the right when resized.

  • Center   Always anchored to the horizontal center regardless of resizing.

  • Right   Anchors to the right but stretches to the left when resized.

  • Stretch   Stretches in both horizontal directions when resized.

• Vertical alignment

  • Bottom   Anchors to the bottom but stretches to the top when resized.

  • Center   Always anchored to the vertical center regardless of resizing.

  • Top. Anchors to the top but stretches to the bottom when resized.

  • Stretch   Stretches in both vertical directions when resized.

• Margin settings   Fixed values measured in pixels (device-independent units that are approximately 1/96 inch) for Top, Left, Right, and Bottom margins. You set these when you drag a child object into position in a grid and represent the distance from the edge of the selected object to the next gridline.

Sizing child objects

You have two primary sizing options to use for child objects: fixed-size or auto-size. Fixed-sized objects have specific width and height values set in the Layout category. Auto-sized objects have width and height values set to Auto and automatically resize depending on the sizing of the parent panel.

• MinWidth and MinHeight   The smallest an object can be resized or scaled to in a row or column.

• MaxWidth and MaxHeight   The largest an object can be resized or scaled to in a row or column. You can set this to Infinity if you do not want to set a maximum size.

• Clip contents   Determines if the parent panel should clip its child objects.

Grid Splitter

GridSplitter is a control used in a grid panel that a user interacts with to manually resize parts of a grid at run time. GridSplitter is available in the Assets panel.

For more information about the grid panel, the GridSplitter control, or how to create custom layout panels, see the System.Windows.Controls Namespace section of the .NET Framework Class Library for Windows Presentation Foundation (WPF), or see the System.Windows.Controls Namespace section of the .NET Framework Class Library for Microsoft Silverlight.

See Also

Tasks

Add or remove a row or column

Change the sizing option for a row or column