Grid panel
.png "This page applies to WPF and Silverlight 2")
The grid 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 panels:
.png "Cc295203.ecb419d9-1def-4c4d-9656-cab9bdb89672(en-us,Expression.10).png")
Canvas layout mode (default mode) provides an editing experience that is just like editing inside a canvas panel. In this mode, when you move column and row dividers .png "Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(en-us,Expression.10).png")
that you've set, the elements inside those rows and columns stay in place..png "Cc295203.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(en-us,Expression.10).png")
Grid layout mode (advanced) 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 upper-left corner when a grid panel 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.10).png")
Add a grid panel to a document by using the layout container submenu or the Asset Library.png "Cc295203.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png")
in the Toolbox.
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.10).png")
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 ** Determines what position an element takes in relation to the element's parent element.
Margins 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 ** Fixed values measured in pixels (or, device-independent units that are approximately 1/96 inch). You can set these properties to Auto so that child elements will automatically resize depending on the sizing of the parent panel.
.gif "Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif")
Back to top
Arranging child elements
You can arrange elements in a grid 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 elements in 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.png "Cc295203.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png")
tool, the pointer changes to an arrow with a plus (+) sign .png "Cc295203.a61a7ecb-9364-4bfe-ae2e-fac00d6858ba(en-us,Expression.10).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.10).png")
You can draw child elements in 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 positioned in 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 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 element such as a layout panel, or the column and row dividers in a grid panel.
Back to top
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 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 elements 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.10).png")
. Fixed sizing means that the row or column will not resize.Note
In Windows Presentation Foundation (WPF) applications (such as those created by using Expression Blend), 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.10).png")
. Star sizing has an effect similar to percentage-sizing in HTML.**Auto sizing **Uses no defined Width and 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.10).png")
. Auto sizing means that elements in the grid panel will resize when the parent element resizes.
Star sizing and auto sizing set for different columns in a grid panel
.png "Cc295203.98b234b2-ac3b-441f-9136-98375fee87b7(en-us,Expression.10).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 or fixed sizing. You can also set the MaxWidth and MinWidth properties of a column grid divider in the Properties panel.
Back to top
Positioning child elements
In Canvas layout mode, you can position elements visually by working directly on the artboard and dragging elements 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 elements in 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 in the grid. You set margins 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 gridline (row or column). You set these by clicking the margin (knot) adorners. If a margin adorner is open like so .png "Cc295203.dac083fe-54cd-4cdc-973a-bea351080175(en-us,Expression.10).png")
or .png "Cc295203.7eeec52f-8610-416e-a0f2-79c7bf117e77(en-us,Expression.10).png")
, then that margin is not set. If a margin adorner is closed like so .png "Cc295203.8523b4c7-be0f-4624-961a-6adb66120049(en-us,Expression.10).png")
or .png "Cc295203.95a79778-cb78-400c-9f4f-5f6fc5a02eb1(en-us,Expression.10).png")
, then that margin is set. Resizing the grid during run time leaves any elements in position 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 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 (alignment set) or dashed (no alignment set) lines, as shown in the following image.
A button in a Grid panel bound (margins set—notice that the margin value is 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.10).png")
Horizontal alignment
Left
.png "Cc295203.1e3c2891-633d-4162-a3bd-d5ac53046b56(en-us,Expression.10).png")
. Anchors to the left but stretches to the right on resize.Center
.png "Cc295203.02978741-8e12-476d-afa7-165b613ea515(en-us,Expression.10).png")
. Always anchored to the horizontal center regardless of resizing.Right
.png "Cc295203.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(en-us,Expression.10).png")
. Anchors to the right but stretches to the left on resize.Stretch
.png "Cc295203.90aa9534-0480-4a7f-b992-1af23c71ea9c(en-us,Expression.10).png")
. Stretches in both horizontal directions on resize.
Vertical alignment
Bottom
.png "Cc295203.7c84b219-479d-45e7-b2fc-2df1b5e35129(en-us,Expression.10).png")
. Anchors to the bottom but stretches to the top on resize.Center
.png "Cc295203.5d244079-53d6-4188-ac2b-3a31054a2cd7(en-us,Expression.10).png")
. Always anchored to the vertical center regardless of resizing.Top
.png "Cc295203.737a11a8-b9d6-4270-8432-f17bb11a1337(en-us,Expression.10).png")
. Anchors to the top but stretches to the bottom on resize.Stretch
.png "Cc295203.fbd6b7db-d726-4f40-b8c7-b287423e6615(en-us,Expression.10).png")
. Stretches in both vertical directions on resize.
Margin settings Fixed values measured in pixels (or, device-independent units that are approximately 1/96 inch) for Top, Left, Right, and Bottom margins. You set these 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 gridline.
Back to top
Sizing child elements
You have two primary sizing options to 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 in a row or column.
MaxWidth and MaxHeight The largest an element can be resized or scaled 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 elements.
Back to top
Grid Splitter
GridSplitter.png "Cc295203.d08d529f-a27e-4a8f-95aa-8a4e8b4ee7be(en-us,Expression.10).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 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).
Back to top