XAML 디자이너에서 개체를 레이아웃 컨테이너로 구성Organize objects into layout containers in XAML Designer

페이지에 개체를 표시할 위치를 가정해 보겠습니다. 개체로는 이미지, 단추, 비디오 등을 들 수 있습니다.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. 기본적으로 Grid가 설정되지만 변경할 수 있습니다.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.

참고

동영상 중 일부에서는 Visual Studio 및 Blend for Visual Studio와 동일한 XAML 디자이너를 사용하는 Blend 또는 Expression Blend를 다룰 수 있습니다.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.

레이아웃 패널Layout panels

다음 레이아웃 패널 중 하나를 선택하여 페이지를 시작합니다.Start your page by choosing one of these layout panels. 페이지에 둘 이상의 레이아웃 패널을 지정할 수 있습니다.Your page can have more than one. 예를 들어 Grid 레이아웃 패널에서 시작한 후 Grid의 영역에 StackPanel을 추가하여 해당 요소에서 컨트롤을 세로로 정렬할 수 있습니다.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.

GridGrid

개체를 행 및 열로 정렬합니다.Arrange objects into rows and columns.

짧은 비디오 보기: 설치된 기능 구성 Using Grids(Grid 사용).Watch a short video: Configure Installed Features Using Grids

UniformGridUniformGrid

개체를 동일하게 또는 균일하게 모눈 영역에 정렬합니다.Arrange objects into equal, or uniform, grid regions. 이 패널은 이미지의 목록을 정렬할 때 매우 유용 합니다.This panel is great for arranging a list of images.

(WPF 프로젝트에만 사용 가능)(Available only for WPF projects)

짧은 비디오 보기: 설치된 기능 구성 Working with a UniformGrid(UniformGrid 사용).Watch a short video: Configure Installed Features Working with a UniformGrid

CanvasCanvas

원하는 방식으로 개체를 정렬합니다.Arrange objects any way you want. 사용자가 앱을 실행할 때 이러한 요소는 화면에서 고정 위치에 표시됩니다.When users run your app, these elements will have fixed positions on the screen.

짧은 비디오 보기: 설치된 기능 구성 Working with the canvas(Canvas 사용).Watch a short video: Configure Installed Features Working with the canvas

StackPanelStackPanel

개체를 가로 또는 세로로 한 줄로 정렬합니다.Arrange objects in a single line horizontally or vertically.

짧은 비디오 보기: 설치된 기능 구성 Working with StackPanel and WrapPanel(StackPanel 및 WrapPanel 사용).Watch a short video: Configure Installed Features Working with StackPanel and WrapPanel

WrapPanelWrapPanel

개체를 순서대로 왼쪽에서 오른쪽으로 정렬합니다.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.

(WPF 프로젝트에만 사용 가능)(Available only for WPF projects)

짧은 비디오 보기: 설치된 기능 구성 Working with StackPanel and WrapPanel(StackPanel 및 WrapPanel 사용).Watch a short video: Configure Installed Features Working with StackPanel and WrapPanel

DockPanelDockPanel

개체가 패널의 한쪽 가장자리에 고정되도록 개체를 정렬합니다.Arrange objects so that they stay, or dock, to one edge of the panel.

(WPF 프로젝트에만 사용 가능)(Available only for WPF projects)

짧은 비디오 보기: 설치된 기능 구성 WPF - DockPanel.Watch a short video: Configure Installed Features WPF - DockPanel

레이아웃 컨트롤Layout controls

개체를 레이아웃 컨트롤에도 추가할 수 있습니다.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.

BorderBorder

개체 주위에 테두리, 배경 또는 둘 다를 그립니다.Create a border, background, or both around an object. Border에는 개체를 하나만 추가할 수 있습니다.You can add only one object to a Border. 둘 이상의 개체에 테두리나 배경을 적용하려면 레이아웃 패널을 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.

짧은 비디오 보기: 설치된 기능 구성 Working with Borders(Border 사용).Watch a short video: Configure Installed Features Working with Borders

창의 사용자에게 정보나 옵션을 표시합니다.Show information or options to users in a window. Popup에 개체를 하나만 추가할 수 있습니다.You can add only one object to a Popup. 기본적으로 Popup에는 Grid가 포함되지만 변경할 수 있습니다.By default, a Popup contains a Grid but you can change that.

ScrollViewerScrollViewer

페이지나 페이지의 특정 영역을 스크롤할 수 있습니다.Enable uses to scroll down a page or area of a page. ScrollViewer에 개체를 하나만 추가할 수 있으므로 Grid 또는 StackPanel 등과 같은 레이아웃 패널을 추가합니다.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.

ViewboxViewbox

확대/축소 컨트롤과 유사하게 개체의 비율 크기를 조정합니다.Scale objects much like you would with a zoom control. Viewbox에 하나의 개체만 추가할 수 있습니다.You can add only one object to a Viewbox. 둘 이상의 개체에 해당 효과를 적용하려면 레이아웃 패널을 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.

(WPF 프로젝트에만 사용 가능)(Available only for WPF projects)

참고 항목See Also

Working with elements in XAML Designer Working with elements in XAML Designer
XAML 디자이너를 사용하여 UI 만들기Creating a UI by using XAML Designer