Organize objects into layout containers in Blend

Imagine where you’d like objects to appear on a page; objects such as images, buttons, and videos. Maybe you want them to appear in rows and columns, in a single line vertically or horizontally, or in fixed positions.

After you’ve had a chance to think about how the page might appear, choose a layout panel. All pages start with one because you need something to add your objects to. By default, it’s a Grid but you can change that.

Layout panels help you arrange objects on a page, but they do more than that. They help you design for different screen sizes and resolutions. When users run your app, everything in a layout panel resizes to match the screen real estate of their device. Of course, if you don’t want your layout to do that, you can override that behavior for a part of the layout, or the entire layout. You can use height and width properties to control that.

This page describes layout panels and controls, and then directs you to short videos that help you get started with them. If you’d like to suggest a video or know of any great videos that have helped you organize the content in your pages, please share that with us. See Help us evolve our content!

Start your page by choosing one of these layout panels. Your page can have more than one. For example, you might start with a Grid layout panel, and then add a StackPanel to an area in the Grid so that you can arrange controls vertically in that element.

The following layout panels are the most popularly used, but there are others. You can find them all in the Assets panel.

Arrange objects into rows and columns.

98b234b2-ac3b-441f-9136-98375fee87b7

Watch a short video: Configure Installed Features Using Grids

Arrange objects into equal, or uniform, grid regions. This panel is great for arranging a list of images.

928b9284-a7e8-4678-875a-656b80b78076

(Available only for WPF projects)

Watch a short video: Configure Installed Features Working with a UniformGrid

Arrange objects any way you want. When users run your app, these elements will have fixed positions on the screen.

e1ae27f0-3a57-454e-b580-877dcea8836d

Watch a short video: Configure Installed Features Working with the canvas

Arrange objects in a single line horizontally or vertically.

a85a7b57-b0a8-495e-b985-f0291e41d093

Watch a short video: Configure Installed Features Working with StackPanel and WrapPanel

Arrange objects sequentially from left to right. When the panel runs out of room at the far-right edge, it wraps the content to the next line, and so on from left-to-right, top-to-bottom. You can also make the orientation of a wrap panel vertical so that objects flow from top-to-bottom, left-to-right.

(Available only for WPF projects)

b1c415fb-9a32-4a18-aa0b-308fca994ac9

Watch a short video: Configure Installed Features Working with StackPanel and WrapPanel

Arrange objects so that they stay, or dock, to one edge of the panel.

(Available only for WPF projects)

72d46b58-9a49-4dd5-8af7-6843c0440226

Watch a short video: Configure Installed Features WPF - DockPanel

You can add your objects to layout controls as well. They aren’t as feature-rich as a layout panel, but you might find them helpful for certain scenarios.

The following layout controls are the most popularly used but there are others. You can find them all in the Assets panel.

Create a border, background, or both around an object. You can add only one object to a Border. If you want to apply a border or background for more than one object, add layout panel to the Border. Then, add objects to that panel or control.

e761238b-99fd-43c5-bbc4-57538b8289ff

Watch a short video: Configure Installed Features Working with Borders

Show information or options to users in a window. You can add only one object to a Popup. By default, a Popup contains a Grid but you can change that.

Enable uses to scroll down a page or area of a page. You can add only one object to a ScrollViewer so it makes a lot of sense to add a layout panel such as a Grid or StackPanel.

06b326d4-f23d-41a6-b26b-e1aff37572a7

Scale objects much like you would with a zoom control. You can add only one object to a Viewbox. If you want to apply that effect to more than one object, add a layout panel to the ViewBox, and then add your controls to that layout panel.

(Available only for WPF projects)

f5b13c66-d918-4141-8a16-bd8f8628687a

If you’ve found a video or article that’s helped you arrange objects in Blend, please share that with us. After we review the content, we might add a link to it so that others can benefit from your discovery.

If you’d like to suggest a new video, we’d also like to hear from you. If we receive similar requests from others, we’ll create one as our time and priorities permit.

No one knows your business better than you. So please tell us what resources have helped you to organize objects in your pages, and what areas have not been well explained by us, or by anyone in our community, so that we can better evolve our content to help you.

Please share your suggestions here.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2015 Microsoft