Layout overview

Microsoft Expression Blend makes it easy to do both simple and complex page layout by using various built-in layout panels or your own custom panels. Layout panels are elements that control the positioning, size, dimensions, and arrangement of other elements that they contain. Layout panels essentially act as containers. One beneficial use of layout panels is that you can organize elements inside them.

Note

Only the Canvas layout panel is available in Microsoft Silverlight 1.0 projects. Additionally, only the Grid, Canvas, StackPanel, ScrollViewer, and Border layout panels are available in Silverlight 2 projects.

Layout panels are adaptive in the sense that they can be implemented implicitly. This means that the overall layout automatically resizes, or auto-sizes, according to the window size. This benefits you in several scenarios, such as when you build a user interface (UI) that allows for varying screen sizes and resolutions, and also addresses localization needs. You can also decide to use fixed sizes by implementing the layout panels explicitly, which means that the layout has fixed Width and Height attributes so that an area in the layout stays the designated size even when the application window is resized.

Note

When you change the Width or Height property of an object from a fixed value to Auto, the property is set to the default minimum value.

You can also transform an element in a layout panel to set a post-layout render position. This is useful for animation (for example, to move an element outside the bounds of a grid panel and have it fly into position). Transformations are relative to the layout position. Therefore, the Transform category of the Properties panel shows the default position as being (0,0). In most cases, you will not want to apply transformations to an element in a layout panel, except animation, where you want an element to move around relative to the final layout position.

Layout panels

Expression Blend has five primary layout panels, each one designed to manage a different type of layout. The following table describes these layout panels.

Panel	Name	Description
	Grid	Arranges child elements in a very flexible layout of rows and columns that form a grid. For more information, see Grid panel.
	Canvas	Arranges child elements according to absolute x and y coordinates. Canvas enables you to have fixed positions for elements on the screen at run time, like a blank canvas. For more information, see Canvas panel.
	Stack	Arranges child elements into a single line that can be oriented, or stacked, horizontally or vertically. For more information, see Stack panel.
	Wrap	Arranges child elements in sequential position from left to right, and then, when it runs out of room at the far-right edge of the panel, wraps the content to the next line, and so on from left-to-right, top-to-bottom. A wrap panel's orientation can also be vertical so that the child elements flow from top-to-bottom, left-to-right. For more information, see Wrap panel.
	Dock	Arranges child elements so that they stay, or dock, to one edge of the panel. For more information, see Dock panel.

Back to top

Other layout containers

Other layout containers also affect the arrangement of elements that they contain. However, these containers are not optimized to support the more robust UI scenarios that the primary layout panels handle more successfully. The following table describes the other layout containers.

Element	Name	Description
	Border	A simple element that draws a border, background, or both around an element. Border takes only one child element. You likely will want to position a grid or canvas panel within the border so that you can work with multiple child elements. For more information about Border, see Other layout containers.
	BulletDecorator	An element that can take only two child elements, typically a text string and a glyph (which represents a control such as a check box). For more information about BulletDecorator, see Other layout containers.
	Popup	A window that renders in front of all other content in an application but relative to another element. You can use a pop-up menu to provide additional information and options to users who interact with the primary piece of UI that the pop-up menu is relative to. Popup takes a single child element and positions itself based on a target element. By default, a Popup has a grid panel as its single child element. The grid panel then enables you to work with multiple child elements inside the Popup immediately after drawing it. In most cases you will not have to directly create a pop-up menu yourself. Instead, you can use a control, such as a menu or combo box, that has a pop-up menu in its template. For more information about Popup, see Other layout containers.
	ScrollViewer	An element that allows you to enable scrolling of the child elements that it contains. It takes only a single child element. Therefore, most of the time you will want to use a layout panel such as a stack panel, canvas panel, or grid panel in it. ScrollViewer is used in the templates of other controls, such as list boxes, to support the scrolling of content. When the content inside a ScrollViewer is too large, you can enable the content to be clipped. You can also control whether scroll bars are unavailable, hidden, visible, or automatically shown only when they are needed. For more information about ScrollViewer, see Other layout containers.
	UniformGrid	Arranges child elements within equal, or uniform, grid regions. UniformGrid is not a variation of the grid panel; it can be more accurately described as a tiling layout element, because it creates equal spacing between each element that it contains, based on the number of rows and columns you specify. As you add child elements to a UniformGrid, each element is positioned in a region starting from top-left to bottom-right until the grid is filled. This is useful for a control such as an image list. For more information about UniformGrid, see Other layout containers.
	Viewbox	Scales all its child elements much like a zoom control. Because a view box accepts only a single child element, you will typically position a canvas panel or grid panel in it so that you can take advantage of the zoom effect on more than one child element. For more information about Viewbox, see Other layout containers.

Back to top

The root layout container

Under Objects and Timeline in the Interaction panel, you will notice an element labeled LayoutRoot. This represents the root layout panel in an Expression Blend document. By default, the layout root is a grid panel. The grid panel, in most cases, should be sufficient for top-level page layout. However, you can change the layout root to another layout panel by right-clicking it, pointing to Change Layout Type, and then selecting an alternative layout panel. You can also decide to have a canvas panel be your default LayoutRoot, instead of a grid panel, by clearing the Use a grid panel as the default layout for new items check box in the Project section of the Options dialog box (on the Tools menu).

Back to top

Layers

Layers provide a quick and easy way to create page-level layout containers for organizing content. Layers are especially useful for importing content from other programs such as Microsoft Expression Design 2. Artwork that you import from Expression Design 2 uses a canvas panel for each imported layer.

You can create a new layer by using the Create New Layer command on the Tools menu. Expression Blend creates a new layer based on what the LayoutRoot for the current document specifies.

Conceptual drawing of layers

Back to top

How to work with child elements

Expression Blend attempts to add child elements to the root (or topmost) panel in a document. However, if another layout container is active elsewhere in the objects tree, then the child element will be added to that container. You can make an element active by double-clicking the layout panel. A yellow highlight around the panel indicates that it is now the active element. The yellow highlight appears in both the artboard and under Objects and Timeline in the Interaction panel. When you create a new panel, and then immediately draw child elements inside the borders of that panel, note that the child elements will be put into the panel that you just created. This is because a newly created panel automatically becomes the active element.

The magGlass element is the current active element, to which new child objects will be added

Expression Blend also makes it easy to drag child elements between panels to reparent them into a different layout container. The following image shows an orange ellipse being moved from the root layout grid panel to another grid panel. A dashed bounding box and a text prompt will appear around the panel if the panel can accept a child element. Hold the ALT key before releasing the mouse button to complete the reparenting action.

Reparenting an object from the root Grid panel into another Grid panel

Back to top

Complex layout

You often need more flexibility when you lay out your page than you can get by using a single layout panel. One way to create complex layouts is by using layout panels as containers for other layout panels. For example, you may want to use a dock panel in the LayoutRoot (which, by default, is the grid panel). This breaks the page into a collection of regions where each region typically contains one or more controls.

For more programmatic information about layout, see the .NET Development section in the Windows Software Development Kit (SDK).

Back to top