Using the Grid layout panel
The Grid layout panel is the most flexible layout container, compared to other layout containers that are designed to manage more specific layout functionality. Microsoft Expression Blend offers two layout editing modes for working with Grid layout panels:
Grid layout mode (default mode)
.png "Cc295203.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(en-us,Expression.30).png")
Provides an editing experience that is just like the run-time resizing behavior of the Grid. In this mode, when you move column and row dividers .png "Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(en-us,Expression.30).png")
that you've created, the objects inside those rows and columns change in size to preserve their Margin properties.Canvas layout mode
.png "Cc295203.ecb419d9-1def-4c4d-9656-cab9bdb89672(en-us,Expression.30).png")
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 created, the objects inside those rows and columns stay in place, but their Margin properties are updated.
You can switch between the two modes by clicking the mode icon in the upper-left corner when a Grid object is selected, or by selecting or 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
.png "Cc295203.3078f933-314a-4951-966c-a66f5edbf69f(en-us,Expression.30).png")
Add a Grid to a document by selecting Grid .png "Cc295203.a87ee957-7fbf-4135-a6ab-6de7e63160aa(en-us,Expression.30).png")
from the Assets panel .png "Cc295203.0d8b8d29-1af9-418f-8741-be3097d76eab(en-us,Expression.30).png")
or from the layout container button in the Tools panel, and then dragging with the pointer on the artboard.
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.
Arrangement of objects in a grid panel that has been divided into three rows and three columns, shown in Grid layout mode
.png "Cc295203.0c06c18b-6bce-4d41-bf0f-0d1f8cdbf5d3(en-us,Expression.30).png")
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 .png "Cc295203.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png")
, the pointer changes to an arrow with a plus (+) sign .png "Cc295203.a61a7ecb-9364-4bfe-ae2e-fac00d6858ba(en-us,Expression.30).png")
, 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
.png "Cc295203.814b7368-8ef4-4771-a067-17e30a9f4bff(en-us,Expression.30).png")
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)
.png "Cc295203.56fdad3b-cb94-41a2-8afb-3a2bbf4b2f1a(en-us,Expression.30).png")
. Fixed sizing means that the row or column will not resize.Note
In Expression 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)
.png "Cc295203.1b4edaf6-b6a8-4498-80dc-949375fa610d(en-us,Expression.30).png")
. 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
.png "Cc295203.aa9ec064-22f8-4b62-9eed-3f4772362d22(en-us,Expression.30).png")
. 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
.png "Cc295203.98b234b2-ac3b-441f-9136-98375fee87b7(en-us,Expression.30).png")
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 Canvas layout mode, you can position objects visually by working directly on the artboard and dragging objects anywhere in a grid panel (and even outside the boundaries), or you can enter precise position values under Layout in the Properties panel.
In Grid layout mode, 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 (.png "Cc295203.dac083fe-54cd-4cdc-973a-bea351080175(en-us,Expression.30).png")
or .png "Cc295203.7eeec52f-8610-416e-a0f2-79c7bf117e77(en-us,Expression.30).png")
), that margin is not set. If a margin adorner is closed (.png "Cc295203.8523b4c7-be0f-4624-961a-6adb66120049(en-us,Expression.30).png")
or .png "Cc295203.95a79778-cb78-400c-9f4f-5f6fc5a02eb1(en-us,Expression.30).png")
), 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.
Expression 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
.png "Cc295203.cd8d0751-ffa0-4f04-bc2f-09584ecd873d(en-us,Expression.30).png")
Horizontal alignment
Left
.png "Cc295203.1e3c2891-633d-4162-a3bd-d5ac53046b56(en-us,Expression.30).png")
Anchors to the left but stretches to the right when resized.Center
.png "Cc295203.02978741-8e12-476d-afa7-165b613ea515(en-us,Expression.30).png")
Always anchored to the horizontal center regardless of resizing.Right
.png "Cc295203.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(en-us,Expression.30).png")
Anchors to the right but stretches to the left when resized.Stretch
.png "Cc295203.90aa9534-0480-4a7f-b992-1af23c71ea9c(en-us,Expression.30).png")
Stretches in both horizontal directions when resized.
Vertical alignment
Bottom
.png "Cc295203.7c84b219-479d-45e7-b2fc-2df1b5e35129(en-us,Expression.30).png")
Anchors to the bottom but stretches to the top when resized.Center
.png "Cc295203.5d244079-53d6-4188-ac2b-3a31054a2cd7(en-us,Expression.30).png")
Always anchored to the vertical center regardless of resizing.Top
.png "Cc295203.737a11a8-b9d6-4270-8432-f17bb11a1337(en-us,Expression.30).png")
. Anchors to the top but stretches to the bottom when resized.Stretch
.png "Cc295203.fbd6b7db-d726-4f40-b8c7-b287423e6615(en-us,Expression.30).png")
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.png "Cc295203.d08d529f-a27e-4a8f-95aa-8a4e8b4ee7be(en-us,Expression.30).png")
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.