XAML Designer에서의 요소 작업
컨트롤, 레이아웃 및 모양 등의 요소를 XAML 앱에 코드로 추가하거나 XAML 디자이너를 사용하여 추가할 수 있습니다. 이 항목에서는 XAML 디자이너에서 요소로 작업하는 방법을 설명합니다.
레이아웃에 요소 추가
레이아웃은 UI에서 요소의 크기 및 위치를 지정하는 프로세스입니다. 시각적 요소를 배치하려면 레이아웃 패널에 가져다 놓아야 합니다. Panel에는 FrameworkElement 형식의 컬렉션인 자식 속성이 있습니다. Canvas, StackPanel 및 Grid 등 다양한 Panel 자식 요소를 레이아웃 컨테이너로 사용하거나 이러한 요소를 페이지에 배치하고 배열할 수 있습니다.
기본적으로 Grid 패널은 JavaScript를 사용하여 빌드된 Windows용 Windows 스토어 앱의 페이지 문서에서 최상위 레이아웃 컨테이너로 사용됩니다. 최상위 페이지 레이아웃 내에서 레이아웃 패널, 컨트롤 또는 다른 요소를 추가할 수 있습니다.
레이아웃에 요소를 추가하려면
Visual Studio 프로젝트의 문서 개요 창에서 다음 중 하나를 수행합니다.
.gif "Hh965587.collapse_all(ko-kr,VS.120).gif")
요소의 쌓기 순서 변경
XAML 디자이너에서 아트보드에 요소가 두 개 있으면 쌓기 순서대로 한 요소가 다른 요소 앞에 나타납니다. 문서 개요 창의 요소 목록 맨 아래에 있는 항목이 맨 앞의 요소입니다. 단, 요소에 ZIndex 속성이 설정된 경우는 예외입니다. 문서나 레이아웃 컨테이너에 요소를 삽입하면 요소는 활성 컨테이너 요소에 있는 다른 요소의 앞에 자동으로 배치됩니다. 요소의 순서를 변경하려면 순서 지정 명령을 사용하거나 문서 개요 창의 개체 트리에서 요소를 끌면 됩니다.
쌓기 순서를 변경하려면
다음 작업 중 하나를 수행합니다.
문서 개요 창에서 요소를 위나 아래로 끌어 원하는 쌓기 순서를 만듭니다.
문서 개요 창이나 쌓기 순서를 변경할 아트보드에서 요소를 마우스 오른쪽 단추로 클릭하고 순서 지정을 가리킨 후 다음 중 하나를 클릭합니다.
맨 앞으로 가져오기 순서의 맨 앞으로 요소를 가져옵니다.
앞으로 가져오기 순서에서 한 수준 앞으로 요소를 가져옵니다.
뒤로 보내기 순서에서 한 수준 뒤로 요소를 보냅니다.
맨 뒤로 보내기 순서의 맨 뒤로 요소를 보냅니다.
속성 창에서 레이아웃 섹션의 ZIndex 속성을 변경합니다. 겹치는 요소의 경우 ZIndex 속성은 문서 개요 창에 표시된 요소의 순서보다 우선합니다. ZIndex 값이 작은 요소는 요소가 겹칠 때 앞에 나타납니다.
요소의 맞춤 변경
메뉴 명령을 사용하거나 요소를 맞춤선으로 끌어서 아트보드에서 요소를 맞출 수 있습니다.
맞춤선은 앱의 다른 요소를 기준으로 요소를 맞추는 데 유용한 시각적 표시입니다.
메뉴 명령을 사용하여 두 개 이상의 요소를 맞추려면
맞출 요소를 선택합니다. Ctrl 키를 누른 채 요소를 선택하여 두 개 이상의 요소를 선택할 수 있습니다.
속성 창의 레이아웃 섹션에 있는 HorizontalAlignment 아래에서 Left, Center, Right 또는 Stretch 속성 중 하나를 선택합니다.
속성 창의 레이아웃 섹션에 있는 VerticalAlignment 아래에서 Top, Center, Bottom 또는 Stretch 속성 중 하나를 선택합니다.
맞춤선을 사용하여 둘 이상의 요소를 맞추려면
요소가 두 개 이상 있는 XAML 디자이너의 레이아웃에서 한 요소를 끌거나 크기를 조정하여 해당 요소의 가장자리가 다른 요소에 맞춰지도록 합니다.
가장자리가 맞춰지면 맞춤을 나타내는 맞춤 경계선이 나타납니다. 맞춤 경계선은 빨간색 파선입니다. 맞춤선에 맞추기가 사용하도록 설정된 경우에만 맞춤 경계선이 나타납니다. 맞춤 경계선을 보여 주는 아트보드 그림은 XAML 디자이너를 사용하여 UI 만들기를 참조하십시오.
요소의 여백 변경
XAML 디자이너에서 여백은 아트보드의 요소 주위에 있는 빈 공간의 크기를 결정합니다. 예를 들어 여백은 요소의 바깥쪽 가장자리와 해당 요소가 들어 있는 Grid 패널의 경계선 사이에 있는 공간의 크기를 지정합니다. 또한 StackPanel에 포함된 요소 사이에 있는 공간의 크기를 지정합니다.
요소의 여백을 변경하려면
여백을 변경할 요소를 선택합니다.
속성 창의 레이아웃 아래에서 Margin 속성(Top, Left, Right 또는 Bottom)에 대한 값을 픽셀 단위 또는 약 1/96인치의 장치 독립적 단위로 변경합니다.
아트보드에서 요소의 여백을 변경하려면
레이아웃 컨테이너를 기준으로 요소의 여백을 변경하려면 요소가 선택되고 레이아웃 컨테이너 안에 있을 때 아트보드의 요소 주위에 나타나는 여백 표시기를 클릭합니다. 여백 표시기를 보여 주는 그림은 XAML 디자이너를 사용하여 UI 만들기를 참조하십시오.
여백 표시기가 세로 또는 가로로 열려 있으면 해당 여백이 설정되지 않은 것이며, 여백 표시기가 닫혀 있으면 여백이 설정된 것입니다.
여백 표시기를 열 때 반대쪽 여백이 설정되지 않았으면 반대쪽 여백이 아트보드에 있는 요소의 위치에 따라 올바른 값으로 설정됩니다. 왼쪽 및 오른쪽 여백과 같은 반대쪽 여백의 경우 적어도 한 속성이 항상 설정됩니다.
중요
Canvas와 같은 레이아웃 컨테이너 안에 배치된 요소에는 여백 표시기가 없습니다. StackPanel 안에 배치된 요소에는 StackPanel의 방향에 따라 왼쪽 및 오른쪽 여백이나 위쪽 및 아래쪽 여백에 대한 여백 표시기가 있습니다.
요소 그룹화 및 그룹 해제
XAML 디자이너에서 둘 이상의 요소를 그룹화하면 새로운 레이아웃 컨테이너가 만들어지고 이 컨테이너에 해당 요소가 배치됩니다. 레이아웃 컨테이너에 둘 이상의 요소를 함께 배치하면 해당 그룹의 요소가 한 요소인 것처럼 쉽게 그룹을 선택하고 이동하며 변형할 수 있습니다. 요소를 그룹화하면 탐색 요소를 구성하는 단추처럼 특정 방식으로 서로 관련된 요소를 식별하는 데 도움이 됩니다. 요소의 그룹을 해제할 때는 요소가 들어 있는 레이아웃 컨테이너만 삭제하면 됩니다.
요소를 새 레이아웃 컨테이너로 그룹화하려면
그룹화할 요소를 선택합니다. 여러 요소를 선택하려면 Ctrl 키 누른 채로 요소를 클릭합니다.
선택된 요소를 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기를 가리킨 다음 그룹을 배치할 레이아웃 컨테이너의 형식을 클릭합니다.
팁
요소를 그룹화할 Viewbox, T:Windows.UI.Xaml.Controls.Border 또는 ScrollViewer를 선택할 경우 요소가 Viewbox, Border 또는 ScrollViewer 내의 새 Grid 패널에 배치됩니다. 이러한 레이아웃 컨테이너 중 하나에서 요소의 그룹을 해제하면 Viewbox, Border 또는 ScrollViewer만 삭제되고 Grid 패널은 그대로 유지됩니다. Grid 패널을 삭제하려면 요소의 그룹을 다시 해제합니다.
요소의 그룹을 해제하고 레이아웃을 삭제하려면
- 그룹을 해제할 그룹을 마우스 오른쪽 단추로 클릭하고 그룹 해제를 클릭합니다.
문서 개요 창에서 선택한 항목을 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기 또는 그룹 해제를 클릭하여 요소를 그룹으로 묶거나 요소의 그룹을 해제할 수도 있습니다.
요소 레이아웃 다시 설정
레이아웃 다시 설정 명령을 사용하여 요소의 특정 레이아웃 속성에 대한 기본값을 복원할 수 있습니다. 이 명령을 사용하여 요소의 여백, 맞춤, 너비, 높이 및 크기를 개별적으로 또는 전체적으로 다시 설정할 수 있습니다.
요소 레이아웃을 다시 설정하려면
- 문서 개요 창이나 아트보드에서 요소를 마우스 오른쪽 단추로 클릭하고 레이아웃 다시 설정을 선택한 다음 다시 설정할 속성을 클릭합니다. 또는 모두를 선택하여 요소의 모든 레이아웃 속성을 다시 설정합니다.