Arranging objects (XAML)

Layout is a process of sizing and positioning objects in your user interface (UI). The XAML layout framework provides various Panel controls that serve as containers for other container objects, for example, a Grid, StackPanel, Canvas and so on. These layout containers control the positioning, size, dimensions, and arrangement of the elements that they contain. This section includes topics about designing the layout of your Blend for Visual Studio 2012 application.

For information about the layout system in Windows Store applications, see Creating a UI on Windows Dev Center.

Layout panels

Blend supports both dynamic layout and absolute layout. In dynamic layout, the layout container and its children can be automatically sized and repositioned as the application resizes (for example, using a Grid or a StackPanel). Whereas in absolute layout, you position the container’s children using explicit x and y coordinates (for example, using a Canvas). Blend makes it easy to define your own custom panels, for instance, combining absolute and dynamic layouts, and embedding panels within other panels.

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 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.

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.

Blend has four 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 Using the grid layout panel (XAML) and Grid Class.
	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 Class.
	StackPanel	Arranges child elements into a single line that can be oriented, or stacked, horizontally or vertically. For more information, see StackPanel Class.
	WrapGrid	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. The orientation of a wrap panel can also be vertical so that the child elements flow from top-to-bottom, left-to-right. For more information, see WrapGrid class.

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 Border class.
	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.
	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 ScrollViewer class.
	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 Viewbox class.

The root layout container

In the Objects and Timeline panel, you will notice an element labeled [Grid]. This represents the root layout panel in an 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.

How to work with child elements

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 and Timeline panel, then the child element will be added to that container. You can make an element active by clicking the layout panel. A blue highlight around the panel indicates that it is now the active element. The blue highlight appears in both the artboard and in the Objects and Timeline 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.

New child objects are added to the colors2 StackPanel object

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 down 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

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, combine a dynamic layout container (Grid) with an absolute layout container (Canvas).

For more information about layout, see examples in the Windows Sample app pack on the Downloads for Windows Store development website.