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 (default mode)
- Grid layout mode (advanced)
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.
Add a grid panel to a document by using the layout container submenu or the Asset Library 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:
- Alignment Alignment determines what position an element takes in relation to the element's parent element.
- Margins A margin determines the amount of empty space around the control, between the outside of the child element and the boundaries of the panel.
- Width and Height Width and Height properties are fixed values measured in pixels (or, device-independent units which are approximately 1/96 inch). These properties can be set to Auto so that child elements will automatically resize depending on the sizing of the parent panel.
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 orderthe 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:
- 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.
In Windows Presentation Foundation (WPF) applications (like those created with Expression Blend), pixels refer to device independent pixels or device independent units which 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 Height and Width properties, and is set by clicking the lock icon to set it to Auto sized . Auto sizing means that elements within the grid panel will resize when the parent element 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 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.
- Horizontal alignment
- Left - anchors to left but stretches to right on resize
- Center - always anchored to the horizontal center regardless of resizing
- Right - anchors to right but stretches to left on resize
- Stretch - stretches both horizontal directions on resize
- Vertical alignment
- Bottom - anchors to bottom but stretches to top on resize
- Center - always anchored to the vertical center regardless of resizing
- Top - anchors to top but stretches to bottom on resize
- Stretch - stretches in both vertical directions on resize
- Margin settings Fixed values measured in pixels (or, device-independent units which are approximately 1/96 inch) for Top, Left, Right, and Bottom margins. These are set when you drag a child element into position in a grid and represent the distance from the edge of the selected element to the next grid line.
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.
- MinWidth and MinHeight The smallest an element can be resized or scaled within a row or column.
- MaxWidth and MaxHeight The largest an element can be resized or scaled within a row or column. This can be set to Infinity if you do not want to set a maximum size.
- Clip contents Determines if the parent panel should clip its child elements.
GridSplitteris 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.