UI 빌더로 시작하기

The following is the general approach to create UI in the UI Builder:

1. 기존의 UI 문서(UXML) 또는 새 UI 문서를 엽니다.
2. Drag elements from the Library into the Hierarchy to create your UI hierarchy.
3. Hierarchy 또는 Canvas의 요소를 선택하여 인스펙터에서 요소의 속성과 스타일 프로퍼티에 액세스합니다.
4. 인스펙터의 Attributes 섹션을 통해 Label 텍스트나 Button 툴팁과 같은 요소별 속성을 설정합니다.
5. 인스펙터의 Inline Styles 섹션을 통해 레이아웃과 위치 지정 프로퍼티를 포함한 요소별 스타일 프로퍼티를 설정합니다.
6. 두 개 이상의 요소가 같은 스타일 프로퍼티를 필요로 하게 되면 StyleSheets 창에서 UI 문서(UXML)에 StyleSheet를 추가하거나 만듭니다.
7. 요소를 선택한 후, 인스펙터의 StyleSheet > Style Class List 섹션을 통해 새로운 스타일 클래스 이름을 지정한 다음 Extract Inlined Styles to New Class를 클릭해 해당 요소의 인라인 스타일 프로퍼티를 StyleSheet로 추출합니다.
8. StyleSheets 창 상단의 Add new selector…를 통해 추가 USS 선택자를 만듭니다. 이러한 선택자는 특정 요소 세트의 스타일 프로퍼티 하위 세트를 오버라이드합니다(예: .my-button 클래스가 있으며 마우스 커서가 올려진 모든 요소의 컬러를 파란색으로 설정하는 { color: blue; }` 선택자).
9. Viewport의 툴바에서 Preview 버튼을 클릭해 Canvas 저작을 비활성화하고 UI가 상호작용이 가능하도록(즉, :hover 스타일 테스트가 가능하도록) 허용하여 UI를 테스트합니다.
10. (2) 단계로 돌아가 UI 문서(UXML)를 저장합니다.

추가 리소스

• Create and manage UI Documents (UXML)
• Set up the edit-time Canvas
• 런타임 UI와 에디터 확장 프로그램 저작 비교
• 인라인 스타일과 스타일 시트 비교