|
1 | 1 | --- |
2 | | -title: "Organize objects into layout containers in XAML Designer | Microsoft Docs" |
3 | | -ms.custom: "" |
| 2 | +title: Organize objects into layout containers in XAML Designer |
4 | 3 | ms.date: "11/04/2016" |
5 | | -ms.reviewer: "" |
6 | | -ms.suite: "" |
7 | | -ms.technology: |
8 | | - - "vs-ide-designers" |
9 | | -ms.tgt_pltfrm: "" |
10 | | -ms.topic: "article" |
| 4 | +ms.technology: vs-ide-designers |
| 5 | +ms.topic: conceptual |
11 | 6 | ms.assetid: 29c80c38-0fa3-48d6-b3a8-3b864f482e44 |
12 | | -caps.latest.revision: 15 |
13 | 7 | author: "gewarren" |
14 | 8 | ms.author: "gewarren" |
15 | | -manager: ghogen |
16 | | -ms.workload: |
| 9 | +manager: douge |
| 10 | +ms.workload: |
17 | 11 | - "uwp" |
18 | 12 | --- |
19 | 13 | # Organize objects into layout containers in XAML Designer |
20 | | -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. |
21 | | - |
22 | | - 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. |
23 | | - |
24 | | - 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. |
25 | | - |
26 | | - This page describes layout panels and controls, and then directs you to short videos that help you get started with them. |
27 | | - |
28 | | -> [!NOTE] |
29 | | -> Some of the videos may refer to Blend or Expression Blend, which use the same XAML designer as Visual Studio and Blend for Visual Studio. |
30 | | - |
31 | | -## Layout panels |
32 | | - 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. |
33 | | - |
34 | | - The following layout panels are the most popularly used, but there are others. You can find them all in the **Assets** panel. |
35 | | - |
36 | | -- [Grid](#Grid) |
37 | | - |
38 | | -- [UniformGrid](#Uniform) |
39 | | - |
40 | | -- [Canvas](#Canvas) |
41 | | - |
42 | | -- [StackPanel](#Stack) |
43 | | - |
44 | | -- [WrapPanel](#Wrap) |
45 | | - |
46 | | -- [DockPanel](#Dock) |
47 | | - |
48 | | -### <a name="Grid"></a> Grid |
49 | | - Arrange objects into rows and columns. |
50 | | - |
51 | | -  |
52 | | - |
53 | | - **Watch a short video:**  [Using Grids](http://www.popscreen.com/v/6A4hj/Microsoft-Expression-Blend-Using-Grids) |
54 | | - |
55 | | -### <a name="Uniform"></a> UniformGrid |
56 | | - Arrange objects into equal, or uniform, grid regions. This panel is great for arranging a list of images. |
57 | | - |
58 | | -  |
59 | | - |
60 | | - (Available only for WPF projects) |
61 | | - |
62 | | - **Watch a short video:**  [Working with a UniformGrid](http://www.popscreen.com/v/6A4iq/Microsoft-Expression-Blend-Working-with-a-UniformGrid) |
63 | | - |
64 | | -### <a name="Canvas"></a> Canvas |
65 | | - Arrange objects any way you want. When users run your app, these elements will have fixed positions on the screen. |
66 | | - |
67 | | -  |
68 | | - |
69 | | - **Watch a short video:**  [Working with the canvas](http://www.popscreen.com/v/6A4hT/Microsoft-Expression-Blend-Working-with-the-Canvas) |
70 | | - |
71 | | -### <a name="Stack"></a> StackPanel |
72 | | - Arrange objects in a single line horizontally or vertically. |
73 | | - |
74 | | -  |
75 | | - |
76 | | - **Watch a short video:**  [Working with StackPanel and WrapPanel](http://www.popscreen.com/v/6A4i5/Microsoft-Expression-Blend-Using-the-StackPanel-and-WrapPanel) |
77 | | - |
78 | | -### <a name="Wrap"></a> WrapPanel |
79 | | - 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. |
80 | | - |
81 | | - (Available only for WPF projects) |
82 | | - |
83 | | -  |
84 | | - |
85 | | - **Watch a short video:**  [Working with StackPanel and WrapPanel](http://www.popscreen.com/v/6A4i5/Microsoft-Expression-Blend-Using-the-StackPanel-and-WrapPanel) |
86 | | - |
87 | | -### <a name="Dock"></a> DockPanel |
88 | | - Arrange objects so that they stay, or *dock*, to one edge of the panel. |
89 | | - |
90 | | - (Available only for WPF projects) |
91 | | - |
92 | | -  |
93 | | - |
94 | | - **Watch a short video:**  [WPF - DockPanel](https://www.youtube.com/watch?v=EBH_OIM-zPo) |
95 | | - |
96 | | -## Layout controls |
97 | | - 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. |
98 | | - |
99 | | - The following layout controls are the most popularly used but there are others. You can find them all in the **Assets** panel. |
100 | | - |
101 | | -- [Border](#Border) |
102 | | - |
103 | | -- [Popup](#Popup) |
104 | | - |
105 | | -- [ScrollViewer](#Scroll) |
106 | | - |
107 | | -- [UniformGrid](#Uniform) |
108 | | - |
109 | | -- [Viewbox](#View) |
110 | | - |
111 | | -### <a name="Border"></a> Border |
112 | | - 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. |
113 | | - |
114 | | -  |
115 | | - |
116 | | - **Watch a short video:**  [Working with Borders](http://www.popscreen.com/v/6A4hB/Microsoft-Expression-Blend-Working-with-Borders) |
117 | | - |
118 | | -### <a name="Popup"></a> Popup |
119 | | - 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. |
120 | | - |
121 | | -### <a name="Scroll"></a> ScrollViewer |
122 | | - 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**. |
123 | | - |
124 | | -  |
125 | | - |
126 | | -### <a name="View"></a> Viewbox |
127 | | - 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. |
128 | | - |
129 | | - (Available only for WPF projects) |
130 | | - |
131 | | -  |
132 | | - |
133 | | -## See Also |
134 | | - [Working with elements in XAML Designer](../designers/working-with-elements-in-xaml-designer.md) |
135 | | - [Creating a UI by using XAML Designer](../designers/creating-a-ui-by-using-xaml-designer-in-visual-studio.md) |
| 14 | + |
| 15 | +This article describes layout panels and controls for XAML Designer. |
| 16 | + |
| 17 | +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. |
| 18 | + |
| 19 | +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. |
| 20 | + |
| 21 | +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. |
| 22 | + |
| 23 | +## Layout panels |
| 24 | + |
| 25 | +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. |
| 26 | + |
| 27 | +The following layout panels are the most popularly used, but there are others. You can find them all in the **Assets** panel. |
| 28 | + |
| 29 | +- [Grid](#Grid) |
| 30 | + |
| 31 | +- [UniformGrid](#UniformGrid) |
| 32 | + |
| 33 | +- [Canvas](#Canvas) |
| 34 | + |
| 35 | +- [StackPanel](#stackpanel) |
| 36 | + |
| 37 | +- [WrapPanel](#wrappanel) |
| 38 | + |
| 39 | +- [DockPanel](#dockpanel) |
| 40 | + |
| 41 | +### Grid |
| 42 | + |
| 43 | +Arrange objects into rows and columns. |
| 44 | + |
| 45 | + |
| 46 | + |
| 47 | +### UniformGrid |
| 48 | + |
| 49 | +Arrange objects into equal, or uniform, grid regions. This panel is great for arranging a list of images. |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +(Available only for WPF projects.) |
| 54 | + |
| 55 | +### Canvas |
| 56 | + |
| 57 | +Arrange objects any way you want. When users run your app, these elements will have fixed positions on the screen. |
| 58 | + |
| 59 | + |
| 60 | + |
| 61 | +### StackPanel |
| 62 | + |
| 63 | +Arrange objects in a single line horizontally or vertically. |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | +### WrapPanel |
| 68 | + |
| 69 | +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. |
| 70 | + |
| 71 | +(Available only for WPF projects.) |
| 72 | + |
| 73 | + |
| 74 | + |
| 75 | +### DockPanel |
| 76 | + |
| 77 | +Arrange objects so that they stay, or *dock*, to one edge of the panel. |
| 78 | + |
| 79 | +(Available only for WPF projects.) |
| 80 | + |
| 81 | + |
| 82 | + |
| 83 | +**Watch a short video:**  [WPF - DockPanel](https://www.youtube.com/watch?v=EBH_OIM-zPo) |
| 84 | + |
| 85 | +## Layout controls |
| 86 | + |
| 87 | +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. |
| 88 | + |
| 89 | +The following layout controls are the most popular, but there are others. You can find them all in the **Assets** panel. |
| 90 | + |
| 91 | +- [Border](#Border) |
| 92 | + |
| 93 | +- [Popup](#Popup) |
| 94 | + |
| 95 | +- [ScrollViewer](#scrollviewer) |
| 96 | + |
| 97 | +- [Viewbox](#viewbox) |
| 98 | + |
| 99 | +### Border |
| 100 | + |
| 101 | +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. |
| 102 | + |
| 103 | + |
| 104 | + |
| 105 | +### Popup |
| 106 | + |
| 107 | +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. |
| 108 | + |
| 109 | +### ScrollViewer |
| 110 | + |
| 111 | +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**. |
| 112 | + |
| 113 | + |
| 114 | + |
| 115 | +### Viewbox |
| 116 | + |
| 117 | +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. |
| 118 | + |
| 119 | +(Available only for WPF projects.) |
| 120 | + |
| 121 | + |
| 122 | + |
| 123 | +## See also |
| 124 | + |
| 125 | +- [Work with elements in XAML Designer](../designers/working-with-elements-in-xaml-designer.md) |
| 126 | +- [Create a UI by using XAML Designer](../designers/creating-a-ui-by-using-xaml-designer-in-visual-studio.md) |
0 commit comments