XAML 디자이너를 사용하여 UI 만들기
Visual Studio 2013의 XAML 디자이너는 XAML, WPF 및 Silverlight 앱을 사용하여 만든 Windows 스토어 앱을 디자인하는 데 도움이 되는 시각적 인터페이스를 제공합니다. 도구 상자에서 컨트롤을 끌어 오고 속성 창에서 속성을 설정하여 응용 프로그램의 사용자 인터페이스를 만들 수 있습니다. XAML 뷰에서 XAML을 직접 편집할 수도 있습니다.
XAML 디자이너 작업 영역
Visual Studio에 있는 XAML 디자이너의 작업 영역은 몇 가지 시각적 인터페이스 요소로 구성되어 있습니다. 여기에는 아트보드, 도구 상자, 장치 창, 문서 개요 창, 솔루션 탐색기, 속성 창 및 XAML 편집기가 포함됩니다. XAML 디자이너를 열려면 솔루션 탐색기에서 XAML 페이지를 마우스 오른쪽 단추로 클릭하고 뷰 디자이너를 선택합니다.
뷰 제작
XAML 디자이너는 응용 프로그램의 렌더링된 XAML 태그에 대한 XAML 뷰 및 이와 동기화된 디자인 뷰를 제공합니다. XAML 문서가 Visual Studio에 열려 있으면 디자인 및 XAML 탭을 사용하여 디자인 뷰와 XAML 뷰 간을 전환할 수 있습니다. 디자인 뷰에서 아트보드가 포함된 창이 활성 창이고 이 창을 기본 작업 화면으로 사용할 수 있습니다. 이 창에서 요소를 추가하거나 그린 다음 수정하여 응용 프로그램에서 페이지를 시각적으로 디자인할 수 있습니다. 자세한 내용은 XAML Designer에서의 요소 작업을 참조하십시오. 이 그림에서는 디자인 뷰의 아트보드를 보여 줍니다.
.png "XAML 디자이너의 디자인 뷰")
창 바꾸기 단추를 사용하여 아트보드나 XAML 편집기 중에서 맨 위에 나타나는 창을 전환할 수 있습니다.
아트보드에서는 다음 기능을 사용할 수 있습니다.
맞춤선
맞춤선은 컨트롤의 가장자리나 텍스트 기준선이 맞춰질 때 표시할 빨간색 파선으로 나타나는 맞춤 경계선입니다. 맞춤선에 맞추기가 사용하도록 설정된 경우에만 맞춤 경계선이 나타납니다.모눈 레일
Grid 레일은 모눈 패널의 행과 열을 관리하는 데 사용됩니다. 행과 열을 만들고 삭제할 수 있으며 상대 너비 및 높이를 조정할 수 있습니다. 아트보드의 왼쪽에 나타나는 세로 모눈 레일은 행에 사용되고 맨 위에 나타나는 가로줄은 열에 사용됩니다.모눈 표시기
Grid 표시기는 Grid 레일에서 세로줄 또는 가로줄이 연결되어 있는 삼각형으로 나타납니다. Grid 표시기를 끌면 마우스를 움직일 때 인접한 열이나 행의 너비나 높이가 업데이트됩니다.Grid 표시기를 사용하면 Grid의 행 및 열의 너비와 높이를 제어할 수 있습니다. Grid 레일을 클릭하여 열이나 행을 새로 추가할 수 있습니다. 둘 이상의 열이나 행이 있는 Grid 패널에 대한 행 또는 열 줄을 새로 추가하면 너비와 높이를 명시적으로 설정할 수 있는 미니 도구 모음이 레일 외부에 나타납니다. 미니 도구 모음을 사용하면 Grid 행 및 열에 대해 고정, 별표 및 자동 크기 조정 옵션을 설정할 수 있습니다.
크기 조정 핸들
크기 조정 핸들은 선택된 컨트롤에 표시되며 컨트롤의 크기를 조정하는 데 사용할 수 있습니다. 컨트롤의 크기를 조정할 수 있도록 컨트롤 크기를 조정할 때 해당 너비 및 높이 값이 표시됩니다. 디자인 뷰에서 컨트롤을 조작하는 방법에 대한 자세한 내용은 XAML Designer에서의 요소 작업을 참조하십시오.여백
여백은 컨트롤 가장자리와 해당 컨테이너 가장자리 사이의 고정된 공간 크기를 나타냅니다. 속성 창의 레이아웃 아래에 있는 여백 속성을 사용하여 컨트롤의 여백을 설정할 수 있습니다.여백 표시기
여백 표시기를 사용하여 레이아웃 컨테이너를 기준으로 요소의 여백을 변경할 수 있습니다. 여백 표시기가 열린 경우 여백이 설정되지 않고 여백 표시기가 끊어진 체인을 표시합니다. 여백이 설정되지 않으면 레이아웃 컨테이너의 크기가 런타임에 조정되었을 때 요소가 원래 위치에 그대로 유지됩니다. 여백 표시기가 닫힌 경우 여백 표시기는 끊어지지 않은 체인을 표시하고, 레이아웃 컨테이너의 크기가 런타임에 조정될 때 요소가 여백과 함께 이동합니다(여백은 고정되어 있음).요소 핸들
요소 주위의 파란색 상자 모퉁이 위로 포인터를 이동하면 아트보드에 표시되는 요소 핸들을 사용하여 요소를 수정할 수 있습니다. 이러한 핸들을 사용하면 요소를 회전하거나 크기 조정 또는 대칭 이동하거나 요소에 모퉁이 반경을 추가할 수 있습니다. 요소 핸들의 기호는 함수별로 다르며 포인터의 정확한 위치에 따라 변경됩니다. 요소 핸들이 표시되지 않으면 요소가 선택되어 있는지 확인하십시오.
아래에 표시된 대로 디자인 뷰의 화면 왼쪽 아래 영역에서 추가 아트보드 명령을 사용할 수 있습니다.
.png "디자인 뷰 명령")
이 도구 모음에서 사용할 수 있는 명령은 다음과 같습니다.
확대/축소
확대/축소를 사용하면 디자인 화면의 크기를 조정할 수 있습니다. 12.5%에서 800%까지의 범위 내에서 확대/축소할 수 있으며 선택 영역에 맞춤 및 모두에 맞춤과 같은 옵션을 선택할 수 있습니다.맞춤 모눈 표시/숨기기
모눈선을 표시하는 맞춤 모눈을 표시하거나 숨깁니다. 모눈선은 모눈선에 맞추기 또는 맞춤선에 맞추기가 사용하도록 설정된 경우에 사용됩니다.모눈선에 맞추기 설정/해제
아트보드에서 요소를 끌 때 모눈선에 맞추기가 사용하도록 설정되어 있으면 요소가 가장 가까운 가로 모눈선과 세로 모눈선에 맞춰집니다.맞춤선에 맞추기 설정/해제
맞춤선을 사용하면 서로를 기준으로 컨트롤을 맞출 수 있습니다. 맞춤선에 맞추기가 사용하도록 설정된 경우 다른 컨트롤을 기준으로 컨트롤을 끌 때 일부 컨트롤의 가장자리와 텍스트가 가로 또는 세로로 맞춰지면 맞춤 경계선이 표시됩니다. 맞춤 경계선은 빨간색 파선으로 나타납니다.
XAML 뷰에서 XAML 편집기가 포함된 창이 활성 창이고 XAML 편집기가 기본 작성 도구입니다. XAML(Extensible Application Markup Language)은 응용 프로그램 사용자 인터페이스를 지정하는 데 사용할 수 있는 선언적이며 XML에 기반을 둔 구문을 제공합니다. XAML 뷰에는 IntelliSense, 자동 서식, 구문 강조 표시 및 태그 탐색 기능이 포함됩니다. 다음 그림에서는 XAML 뷰를 보여 줍니다.
.png "XAML 뷰")
분할된 뷰 구분선
XAML 편집기가 아래쪽 창에 있을 때 XAML 뷰의 맨 위에 분할된 뷰 구분선이 나타납니다. 분할된 뷰 구분선을 사용하면 디자인 뷰 및 XAML 뷰의 상대적 크기를 제어할 수 있습니다. 창 바꾸기 단추를 사용하여 뷰의 위치를 교환하고, 뷰가 가로로 정렬되는지 아니면 세로로 정렬되는지를 지정하고, 뷰를 축소할 수도 있습니다.태그 확대/축소
태그 확대/축소를 사용하면 XAML 뷰의 크기를 조정할 수 있습니다. 20%에서 400%까지의 범위 내에서 확대/축소할 수 있습니다.
장치 창
Visual Studio용 XAML 디자이너의 장치 창을 사용하면 디자인 타임에 응용 프로그램의 다양한 뷰, 표시 및 표시 옵션을 시뮬레이션할 수 있습니다. 장치 창은 XAML 디자이너에서 작업할 때 디자인 메뉴에서 사용할 수 있습니다. 이 창의 모양은 다음과 같습니다.
.png "장치 창")
장치 창에서 사용할 수 있는 옵션은 다음과 같습니다.
표시
앱에 다양한 표시 크기 및 해상도를 지정합니다.방향
앱에 다양한 방향(가로 또는 세로)을 지정합니다.가장자리
앱에 다양한 가장자리 맞춤(양쪽, 왼쪽, 오른쪽 또는 없음)을 지정합니다.고대비
선택한 대비 설정에 따라 앱을 미리 봅니다. 이 설정을 기본값 이외의 값으로 설정하면 App.xaml에 설정된 RequestedTheme 속성이 재정의됩니다.배율 재정의
디자인 화면 내에서 문서 배율의 에뮬레이션을 설정하거나 해제합니다. 배율을 1씩 늘릴 수 있습니다. 에뮬레이션을 설정하려면 이 확인란을 선택합니다. 예를 들어 배율이 100%인 경우 디자인 화면 내의 문서는 140%까지 확장됩니다. 현재 배율이 180인 경우에는 이 옵션을 사용할 수 없습니다.최소 너비
최소 너비 설정을 지정합니다. 최소 너비는 App.xaml에서 변경할 수 있습니다.테마
응용 프로그램 테마를 지정합니다.크롬 표시
디자인 뷰에서 응용 프로그램 주위의 시뮬레이션된 태블릿 프레임을 설정하거나 해제합니다. 프레임을 표시하려면 이 확인란을 선택합니다.표시에 맞춰 잘라 내기
표시 모드를 지정합니다. 문서 크기를 표시 크기에 맞춰 잘라 내려면 이 확인란을 선택합니다.
문서 개요 창
XAML 디자이너의 문서 개요 창은 다음 작업을 수행하는 데 도움이 됩니다.
아트보드에 있는 모든 요소의 계층 구조를 표시합니다.
요소를 선택하여 수정하거나, 계층 구조에서 이동하거나, 아트보드에서 수정하거나, 속성 창에서 속성을 설정하는 등의 작업을 수행할 수 있습니다. 자세한 내용은 XAML Designer에서의 요소 작업을 참조하십시오.
컨트롤 요소의 템플릿을 만들고 수정합니다.
선택한 요소에 대한 상황에 맞는 메뉴를 사용합니다. 아트보드에서 선택된 요소에도 동일한 메뉴를 사용할 수 있습니다.
.png "문서 개요 창")
문서 개요 창에서 사용할 수 있는 옵션은 다음과 같습니다.
문서 개요
문서 개요 창의 기본 뷰에는 트리 구조로 문서의 계층 구조가 표시됩니다. 문서 개요의 계층적 특성을 사용하여 다양한 세부 수준에서 문서를 검사하고 요소를 단일로 또는 그룹으로 잠그고 숨길 수 있습니다.표시/숨기기
문서 개요의 항목에 해당하는 아트보드 요소를 표시하거나 숨깁니다. 표시될 때 눈 기호를 표시하는 표시/숨기기 단추를 사용하거나, 요소를 숨기려면 Ctrl+H를 누르고 요소를 표시하려면 Shift+Ctrl+H를 누릅니다.잠금/잠금 해제
문서 개요의 항목에 해당하는 아트보드 요소를 잠그거나 잠금 해제합니다. 잠긴 요소는 수정할 수 없습니다. 잠길 때 자물쇠 기호를 표시하는 잠금/잠금 해제 단추를 사용하거나, 요소를 잠그려면 Ctrl+L을 누르고 요소의 잠금을 해제하려면 Shift+Ctrl+L을 누릅니다.범위를 {0}(으)로 되돌립니다.
위쪽 화살표 기호를 표시하는 문서 개요 창의 위쪽에 있는 이 옵션은 문서 개요를 이전 범위로 되돌립니다. 상위 범위로 이동은 스타일 또는 템플릿 범위에 있을 때만 가능합니다.
속성 창
속성 창을 사용하면 컨트롤에 속성 값을 설정할 수 있습니다. 이 창의 모양은 다음과 같습니다.
.png "속성 창")
속성 창의 위쪽에는 다양한 옵션이 있습니다. 이름 상자를 사용하여 현재 선택된 요소의 이름을 변경할 수 있습니다. 왼쪽 위 모퉁이에 현재 선택된 요소를 나타내는 아이콘이 있습니다. 속성을 범주별로 또는 사전순으로 정렬하려면 정렬 기준 목록에서 범주, 이름 또는 소스를 클릭합니다. 컨트롤의 이벤트 목록을 보려면 번개 기호를 표시하는 이벤트 단추를 클릭합니다. 속성을 검색하려면 검색 상자에 속성 이름을 입력하기 시작합니다. 입력하는 동안 속성 창에는 검색 내용과 일치하는 속성이 표시됩니다. 일부 속성의 경우 아래쪽 화살표 단추를 선택하여 고급 속성을 설정할 수 있습니다. 속성 사용 및 이벤트 처리에 대한 자세한 내용은 퀵 스타트: 컨트롤 추가 및 이벤트 처리를 참조하십시오.
각 속성 값의 오른쪽에는 상자 기호로 나타나는 속성 표식이 있습니다. 속성 표식의 모양은 속성에 데이터 바인딩이나 리소스가 적용되었는지를 나타냅니다. 예를 들어 흰색 상자 기호는 기본값을 나타내고, 검은색 상자 기호는 일반적으로 로컬 리소스가 적용되었음을 나타내며, 주황색 상자는 대개 데이터 바인딩이 적용되었음을 나타냅니다. 속성 표식을 클릭하면 스타일의 정의로 이동하거나 데이터 바인딩 작성기 또는 리소스 선택기를 열 수 있습니다.