Working with elements in XAML DesignerWorking with elements in XAML Designer

코드의 XAML에 또는 XAML 디자이너를 사용하여 컨트롤, 레이아웃 및 모양과 같은 요소를 추가할 수 있습니다.You can add elements—controls, layouts, and shapes—to your app in XAML, in code, or by using XAML Designer. 이 항목에서는 Visual Studio 또는 Blend for Visual Studio의 XAML 디자이너에서 요소에 대해 작업하는 방법을 설명합니다.This topic describes how to work with elements in XAML Designer in Visual Studio or Blend for Visual Studio.

레이아웃에 요소 추가Adding an element to a layout

레이아웃은 UI에서 요소의 크기를 조정하고 배치하는 프로세스입니다.Layout is the process of sizing and positioning elements in a UI. 시각적 요소를 배치하려면 패널 레이아웃에 가져다 놓아야 합니다.To position visual elements, you must put them in a layout Panel. Panel에는 FrameworkElement 형식의 컬렉션인 자식 속성이 있습니다.A Panel has a child property which is a collection of FrameworkElement types. Canvas, StackPanelGrid와 같은 다양한 Panel 자식 요소를 사용하여 레이아웃 컨테이너 역할을 하고, 페이지에서 요소를 배치 및 정렬할 수 있습니다.You can use various Panel child elements, such as Canvas, StackPanel, and Grid, to serve as layout containers and to position and arrange the elements on a page.

기본적으로는 Grid 패널은 페이지 또는 폼 내에서 최상위 레이아웃 컨테이너로 사용됩니다.By default, a Grid panel is used as the top-level layout container within a page or form. 최상위 페이지 레이아웃에서 패널, 컨트롤 또는 기타 요소를 추가할 수 있습니다.You can add layout panels, controls, or other elements within the top-level page layout.

레이아웃에 요소를 추가하려면To add an element to a layout

  • XAML 디자이너에서 다음 중 하나를 수행합니다.In XAML Designer, do one of the following:

    • 도구 상자에서 요소를 두 번 클릭하거나 도구 상자에서 요소를 선택하고 Enter 키를 누릅니다.Double-click an element in the Toolbox (or select an element in the Toolbox and press Enter).

    • 요소를 도구 상자에서 아트보드로 끌어 놓습니다.Drag an element from the Toolbox to the artboard.

    • 도구 상자에서 그리기 도구(예: 타원 또는 사각형) 중 하나를 선택한 다음 활성 패널에서 요소를 그립니다.In the Toolbox, select one of the drawing tools (for example, Ellipse or Rectangle), and then draw an element in the active panel.

요소의 쌓기 순서 변경Changing the layering order of elements

XAML 디자이너의 아트보드에 두 요소가 있는 경우 한 요소가 쌓기 순서대로 다른 요소 앞에 표시됩니다.When there are two elements on the artboard in XAML Designer, one element will appear in front of the other in the layering order. [문서 개요] 창의 요소 목록 아래쪽에는 맨 앞의 요소가 있습니다(요소에 대해 ZIndex 속성이 설정된 경우 제외).At the bottom of the list of elements in the Document Outline window is the front-most element (except for when the ZIndex property for an element is set). 페이지, 폼 또는 레이아웃 컨테이너에 요소를 삽입할 때 요소가 활성 컨테이너 요소의 다른 요소 앞에 자동으로 배치됩니다.When you insert an element into a page, form, or layout container, the element is automatically placed in front of other elements in the active container element. 요소의 순서를 변경하려면 Order 명령을 사용하거나 [문서 개요] 창의 개체 트리에서 요소를 끌면 됩니다.To change the order of elements, you can use the Order commands or drag the elements in the object tree in the Document Outline window.

쌓기 순서를 변경하려면To change the layering order

  • 다음 작업 중 하나를 수행합니다.Do one of the following:

    • 문서 개요 창에서 요소를 위쪽이나 아래쪽으로 끌어 원하는 쌓기 순서를 만듭니다.In the Document Outline window, drag the elements up or down to create the desired layering order.

    • [문서 개요] 창 또는 쌓기 순서를 변경하려는 아트보드에서 요소를 마우스 오른쪽 단추로 클릭하고, Order를 가리키고, 다음 중 하나를 클릭합니다.Right-click the element in the Document Outline window or the artboard for which you want to change the layering order, point to Order, and then click one of the following:

      • 맨 앞으로 가져오기 - 요소를 순서의 맨 앞으로 가져옵니다.Bring to Front to bring the element all the way to the front of the order.

      • 앞으로 가져오기 - 요소를 순서대로 한 수준 앞으로 가져옵니다.Bring Forward to bring the element forward one level in the order.

      • 뒤로 보내기 - 요소를 순서대로 한 수준 뒤로 보냅니다.Send Backward to send the element back one level in the order.

      • 맨 뒤로 보내기 - 요소를 순서의 맨 뒤로 보냅니다.Send to Back to send the element all the way to the back of the order.

      [속성] 창의 레이아웃 섹션에서 ZIndex 속성을 변경합니다.Change the ZIndex property in the Layout section in the Properties window. 겹치는 요소의 경우 ZIndex 속성이 [문서 개요] 창에 표시되는 요소의 순서보다 우선합니다.For overlapping elements, the ZIndex property takes precedence over the order of elements shown in the Document Outline window. 요소가 겹치는 경우 ZIndex 값이 더 낮은 요소가 앞에 표시됩니다.An element that has a lower ZIndex value appears in front when elements overlap.

요소의 맞춤 변경Changing the alignment of an element

메뉴 명령을 사용하거나 맞춤선에 요소를 끌어 아트 보드에서 요소를 맞출 수 있습니다.You can align elements in the artboard by using menu commands or by dragging elements to snaplines.

맞춤선은 앱의 다른 요소를 기준으로 요소를 맞추는 데 도움이 되는 시각적 표시입니다.A snapline is a visual cue that helps you align an element relative to other elements in the app.

메뉴 명령을 사용하여 둘 이상의 요소를 맞추려면To align two or more elements by using menu commands

  1. 맞출 요소를 선택합니다.Select the elements that you want to align. 요소를 선택하는 동안 Ctrl 키를 누르고 두 개 이상의 요소를 선택할 수 있습니다.You can select more than one element by pressing and holding the Ctrl key while you select the elements.

  2. [속성] 창의 레이아웃 섹션에 있는 HorizontalAlignment 아래에서 Left, Center, Right 또는 Stretch 속성 중 하나를 선택합니다.Select one of the following properties under HorizontalAlignment in the Layout section of the Properties window: Left, Center, Right, or Stretch.

  3. [속성] 창의 레이아웃 섹션에 있는 VerticalAlignment 아래에서 Top, Center, Bottom 또는 Stretch 속성 중 하나를 선택합니다.Select one of the following properties under VerticalAlignment in the Layout section of the Properties window: Top, Center, Bottom, or Stretch.

맞춤선을 사용하여 둘 이상의 요소를 맞추려면To align two or more elements by using snaplines

  • XAML 디자이너에서, 둘 이상의 요소가 포함된 레이아웃에서 가장자리가 다른 요소에 맞춰지도록 요소 중 하나를 끌거나 크기를 조정합니다.In XAML Designer, in a layout that contains at least two elements, drag or resize one of the elements so that the edge is aligned with another element.

    가장자리가 맞춰지는 경우 맞춤 경계선이 표시되어 맞춤을 나타냅니다.When the edges are aligned, an alignment boundary appears to indicate alignment. 맞춤 경계선은 빨간색 파선입니다.The alignment boundary is a red dashed line. 맞춤선에 맞추기 를 사용하도록 설정한 경우에만 맞춤 경계선이 나타납니다.Alignment boundaries appear only when snapping to snaplines is enabled. 맞춤 경계선을 표시하는 아트보드의 그림은 XAML 디자이너를 사용하여 UI 만들기를 참조하세요.For an illustration of the artboard that shows an alignment boundary, see Creating a UI by using XAML Designer.

요소의 여백 변경Changing the an element's margins

XAML 디자이너의 여백이 아트 보드에서 요소 주위에 있는 빈 공간의 크기를 결정합니다.The margins in XAML Designer determine the amount of empty space that is around an element on the artboard. 예를 들어 여백은 요소의 바깥쪽 가장자리와 요소가 포함된 Grid 패널 경계 사이의 공백 양을 지정합니다.For example, margins specify the amount of space between the outside edges of an element and the boundaries of a Grid panel that contains the element. 여백은 StackPanel에 포함된 요소 간의 공백을 지정합니다.Margins also specify the amount of space between elements that are contained in a StackPanel.

속성 창에서 요소의 여백을 변경하려면To change an element's margins in the Properties window

  1. 여백을 변경할 요소를 선택합니다.Select the element whose margins you want to change.

  2. [속성] 창의 레이아웃 아래에서 Margin 속성(Top, Left, Right 또는 Bottom) 값(픽셀 단위 또는 장치와 독립적인 단위, 대략 1/96인치)을 변경합니다.Under Layout in the Properties window, change the value (in pixels or device-independent units, which are approximately 1/96 inch) for any of the Margin properties (Top, Left, Right, or Bottom).

아트 보드에서 요소의 여백을 변경하려면To change an element's margins in the artboard

  • 레이아웃 컨테이너를 기준으로 요소의 여백을 변경하려면 요소를 선택하거나 요소가 레이아웃 컨테이너에 있을 때 아트보드의 요소 주위에 나타나는여백 표시기를 클릭합니다.To change the margins of an element relative to its layout container, click the margin adorners that appear around the element in the artboard when the element is selected and is within a layout container. 여백 표시기를 표시하는 그림은 XAML 디자이너를 사용하여 UI 만들기를 참조하세요.For an illustration that shows margin adorners, see Creating a UI by using XAML Designer.

    여백 표시기가 가로 또는 세로로 열려 있으면 여백이 설정되지 않고,If a margin adorner is open, vertically or horizontally, that margin isn't set. 여백 표시기가 닫히면 여백이 설정됩니다.If a margin adorner is closed, that margin is set.

    여백 표시기를 열 때 반대쪽 여백이 설정되지 않았으면 반대쪽 여백이 아트보드에 있는 요소의 위치에 따라 올바른 값으로 설정됩니다.When you open a margin adorner and the opposite margin isn't set, the opposite margin is set to the correct value according to the location of the element in the artboard. LeftRight 여백과 같은 반대쪽 여백에는 항상 하나 이상의 속성이 설정됩니다.For opposite margins, such as the Left and Right margins, at least one property is always set.

    중요

    Windows.UI.Xaml.Controls.Canvas와 같은 일부 레이아웃 컨테이너에 배치된 요소에는 여백 표시기가 없습니다.Elements placed inside some layout containers, such as a Windows.UI.Xaml.Controls.Canvas, don't have margin adorners. Windows.UI.Xaml.Controls.StackPanel에 배치된 요소에는 StackPanel의 방향에 따라 왼쪽 및 오른쪽 여백이나 위쪽 및 아래쪽 여백에 대한 여백 표시기가 있습니다.Elements placed inside a Windows.UI.Xaml.Controls.StackPanel have margin adorners for either the left and right margins or the top and bottom margins, depending on the orientation of the StackPanel.

요소 그룹화 및 그룹 해제Grouping and ungrouping elements

XAML 디자이너에서 둘 이상의 요소를 그룹화하면 새로운 레이아웃 컨테이너가 생성되고 해당 컨테이너 내에 이러한 요소가 배치됩니다.Grouping two or more elements in XAML Designer creates a new layout container and places those elements within that container. 레이아웃 컨테이너에 둘 이상의 요소를 함께 배치하면 해당 그룹의 요소가 하나의 요소인 것처럼 그룹을 쉽게 선택하고, 이동하고, 변환할 수 있습니다.Placing two or more elements together in a layout container enables you to easily select, move, and transform the group as if the elements in that group were one element. 요소를 그룹화하면 탐색 요소를 구성하는 단추처럼 특정 방식으로 서로 관련된 요소를 식별하는 데 도움이 됩니다.Grouping is also useful for identifying elements that are related to each other in some way, such as the buttons that make up a navigation element. 요소를 그룹 해제할 때 요소가 포함된 레이아웃 컨테이너를 삭제하면 됩니다.When you ungroup elements, you are simply deleting the layout container that contained the elements.

새 레이아웃 컨테이너에 요소를 그룹화하려면To group elements into a new layout container

  1. 그룹화할 요소를 선택합니다.Select the elements that you want to group. (여러 요소를 선택하려면 Ctrl 키를 누른 상태에서 요소를 클릭합니다.)(To select multiple elements, press and hold the Ctrl key while you click them.)

  2. 선택한 요소를 마우스 오른쪽 단추로 클릭하고, 그룹으로 묶기를 가리킨 다음, 그룹을 배치할 레이아웃 컨테이너의 형식을 클릭합니다.Right-click the selected elements, point to Group Into, and then click the type of layout container in which you want the group to reside.

    Windows.UI.Xaml.Controls.Viewbox, Windows.UI.Xaml.Controls.Border 또는 Windows.UI.Xaml.Controls.ScrollViewer를 선택하여 요소를 그룹화하는 경우 새로운 Windows.UI.Xaml.Controls.Grid 패널 내에서 Windows.UI.Xaml.Controls.Viewbox, Windows.UI.Xaml.Controls.Border 또는 Windows.UI.Xaml.Controls.ScrollViewer 요소 내에 요소가 배치됩니다.If you select Windows.UI.Xaml.Controls.Viewbox, Windows.UI.Xaml.Controls.Border, or Windows.UI.Xaml.Controls.ScrollViewer to group your elements, the elements are placed in a new Windows.UI.Xaml.Controls.Grid panel within the Windows.UI.Xaml.Controls.Viewbox, Windows.UI.Xaml.Controls.Border, or Windows.UI.Xaml.Controls.ScrollViewer. 이러한 레이아웃 컨테이너 중 하나에서 요소를 그룹 해제하는 경우 Windows.UI.Xaml.Controls.Viewbox, Windows.UI.Xaml.Controls.Border 또는 Windows.UI.Xaml.Controls.ScrollViewer만 삭제되고 Windows.UI.Xaml.Controls.Grid 패널은 유지됩니다.If you ungroup elements in one of these layout containers, only the Windows.UI.Xaml.Controls.Viewbox, Windows.UI.Xaml.Controls.Border, or Windows.UI.Xaml.Controls.ScrollViewer is deleted, and the Windows.UI.Xaml.Controls.Grid panel remains. Grid 패널을 삭제하려면 요소를 다시 그룹 해제하세요.To delete the Grid panel, ungroup the elements again.

요소를 그룹 해제하고 레이아웃을 삭제하려면To ungroup elements and delete the layout

  • 그룹 해제하려는 그룹을 마우스 오른쪽 단추로 클릭하고 그룹 해제를 클릭합니다.Right-click the group that you want to ungroup and click Ungroup.

    [문서 개요] 창에서 선택한 항목을 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기 또는 그룹 해제를 클릭하여 요소를 그룹화하거나 그룹 해제할 수도 있습니다.You can also group or ungroup elements by right-clicking selected items in the Document Outline window and clicking Group Into or Ungroup.

요소 레이아웃 재설정Resetting the element layout

레이아웃 다시 설정 명령을 사용하여 요소의 특정 레이아웃 속성에 대한 기본값을 복원할 수 있습니다.You can restore default values for specific layout properties of an element by using the Layout Reset commands. 이 명령을 사용하여 개별적으로 또는 전체적으로 요소의 여백, 맞춤, 너비, 높이 및 있는 크기를 재설정할 수 있습니다.By using this command, you can reset the margin, alignment, width, height, and size of an element, either individually or collectively.

요소 레이아웃을 재설정하려면To reset the element layout

  • [문서 개요] 창 또는 아트보드에서 요소를 마우스 오른쪽 단추로 클릭하고, 레이아웃, PropertyName 다시 설정을 차례로 선택하거나(여기서 PropertyName은 다시 설정하려는 속성), 레이아웃, 모두 다시 설정을 차례로 선택하여 요소에 대한 모든 레이아웃 속성을 다시 설정합니다.In the Document Outline window or the artboard, right-click the element, choose Layout, Reset PropertyName, where PropertyName is the property that you want to reset (or choose Layout, Reset All to reset all the layout properties for the element).

참고 항목See Also

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