Content Index Search
 

Grid panel

The grid panel is the most flexible layout container in Microsoft® Expression Blend™ compared to other layout containers that are designed to manage more specific layout functionality. Expression Blend offers two layout editing modes for working with grid panels:

Canvas layout mode provides an editing experience that is just like editing inside a canvas panel. In this mode, when you move column and row dividers that you've set, the elements inside those rows and columns stay in place. Grid layout mode provides more advanced layout functionality. In this mode, the grid panel in design time behaves like the run time behavior of the grid. You can switch between the two modes by clicking the mode icon in the top left corner when a grid panel is selected, or by selecting or by clearing the Use grid layout mode check box in the Artboard section of the Options dialog box (on the Tools menu).

Layout modes for working with grid panels

Layout modes for working with grid panels.

Add a grid panel to a document by using the layout container submenu or the Asset Library Asset Library button on the Toolbox.

Arrangement of objects in a grid panel that has been divided into 3 rows and 3 columns. Shown in Grid layout mode.

Positioning, sizing, and arranging

The core of layout in a grid panel is how to effectively position, size, and arrange elements by using alignment, margins, and Width and Height properties:

Arranging child elements

You can arrange elements within a grid by sectioning off areas of the grid, which you do by using column and row dividers to create a series of rows and columns that define regions in which you can lay out elements within the grid. When the grid panel is the active element in your document, blue rulers appear along the top and left sides of the grid. When you move your mouse pointer over the rulers using the Selection tool, the cursor 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 elements within a grid panel so that the elements overlap each other. Overlapping elements will be visible depending on their Z order—the order in which the elements were drawn or placed within the parent element. You can change the Z order of elements by using Order on the Object menu, or by right-clicking items under Objects and Timeline in the Interaction panel, pointing to Order, and then clicking the desired command. Child elements 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 allows you to drag objects on the artboard and have them snap to the margins, baseline (for text objects), or alignment (red dashed line) of other objects within the same container element such as a layout panel, or the column and row dividers in a grid panel.

Sizing rows and columns

When you are in the Grid layout mode of a grid 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 properties for rows, and width properties for columns. There are three different options for sizing rows and columns in a grid, and these options in turn affect the arrangement of the child elements within the grid. These sizing options are:

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 using star or fixed sizing. The MaxWidth and MinWidth properties of a column grid divider can also be set in the Properties panel.

Positioning child elements

In Canvas layout mode, you can position elements visually by working directly on the artboard and dragging elements anywhere within a grid panel (and even outside the boundaries), or you can enter precise values for position under Layout in the Properties panel.

In Grid layout mode, you set the positions of child elements within a grid by setting margins for each element. Margins specify the amount of offset for an element from the rows and columns that define the grid, or from the edges of the cell within the grid. Margins are set initially when you drag a child element into position in a grid, and they represent the distance from the edge of the selected element to the next grid line (row or column). These are set by clicking on the margin (knot) adorners. If a margin adorner is open like so or , then that margin is not set. If a margin adorner is closed like so or , then that margin is set. Resizing the grid during run time will leave any elements in place where the margins aren't set. Elements bound to a margin will move with the margin as it is resized.

Expression Blend also uses a simple rule to set the default alignment—if the child element 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 alignment which indicates if the margin is enforced or not when the grid resizes. The alignment is shown within the grid as solid (alignment set) or dashed (no alignment set) lines as shown in the image below.

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

Sizing child elements

There are 2 primary sizing options you can use for child elements: fixed-size or auto-size. Fixed-sized elements have specific Width and Height values set in the Layout category. Auto-sized elements have Width and Height values set to Auto and automatically resize depending on the sizing of the parent panel.

Grid Splitter

GridSplitter is a control used within a grid panel that provides a piece of UI which a user can interact with to manually resize parts of a grid at run time. GridSplitter is available in the Asset Library.

For more information about the grid panel, the GridSplitter control, or how to create custom layout panels, see the .NET Development section of the Windows Software Development Kit (SDK).