제목 표시줄

제목 표시줄은 기본 계층에 있는 앱의 맨 위에 있습니다. 사용자가 제목을 통해 앱을 식별하고, 앱 창을 이동하고, 앱을 최소화, 최대화 또는 닫을 수 있도록 하는 것이 주 목적입니다.

An example of a title bar

표준 설계

이 섹션에서는 표준 제목 표시줄 부분의 디자인 권장 사항 및 동작에 대해 설명합니다.

디자인

표준 제목 표시줄의 높이는 32px입니다.
제목 표시줄의 기본 배경은 Mica이지만, 가능하다면 제목 표시줄을 창의 나머지 부분과 혼합하는 것이 좋습니다.
제목 표시줄은 사용자가 창의 활성 상태 여부를 구분하는 데 도움이 됩니다. 창이 비활성 상태인 경우 모든 제목 표시줄 요소는 반투명해야 합니다.
제목 표시줄 색은 사용자가 고대비 테마로 전환하거나 light and dark 모드사이를 전환할 때 조정되어야 합니다.
- 고대비 테마의 경우 앱은 SystemColors 우수한 고대비 경험을 용이하게 하기 위해 적절한 UI 요소 색 지정을 결정하는 클래스를 사용해야 합니다.

동작

제목 표시줄은 창의 위치를 변경하고 크기를 조정하는 데 중요한 역할을 합니다. 제목 표시줄의 모든 빈 공간 또는 창 제목과 같은 비대화형 요소에서 사용하는 공간은 드래그가 가능해야 합니다.
대화형 요소가 없는 제목 표시줄의 모든 부분을 한 번 클릭/탭하면 시스템 창 메뉴가 표시됩니다.
더블클릭/탭하면 창 최대화와 창 복원 간에 전환됩니다.

디자인

창 아이콘의 크기는 16px x 16px입니다.
LTR의 왼쪽 테두리에서 또는 RTL에서 가장 오른쪽에 있는 테두리에서부터 16px 아이콘을 배치합니다.
- 뒤로 가기 버튼이 있는 경우, 뒤로 가기 버튼의 오른쪽에 16px 창 아이콘을 배치합니다.
창 아이콘은 제목 표시줄에서 가운데에 세로로 배치되어야 합니다. 예를 들어 제목 표시줄 높이가 32px이면 위쪽 및 아래쪽 여백은 8px입니다.

동작

디자인

창 아이콘 또는 뒤로 가기 버튼으로부터 16px 창 제목을 배치합니다.
- 아이콘이나 뒤로 가기 버튼이 없는 경우, LTR의 왼쪽 테두리에서 또는 RTL에서 가장 오른쪽 테두리에서부터 16px 창 제목을 배치합니다.
창 제목은 Segoe UI 변수(사용 가능한 경우) 또는 Segoe UI 글꼴을 사용해야 합니다.
창 제목은 캡션 스타일 텍스트를 사용해야 합니다( XAML 형식 램프를 참조하세요).
창 너비가 제목 표시줄 요소의 길이보다 작으면 창 제목을 잘라내고 줄임표를 추가할 수 있습니다. 아이콘 및 캡션 단추(최소, 최대 및 닫기)는 항상 완전히 표시되어야 합니다.

동작

앱에 대한 고유한 캡션 버튼을 만드는 경우, 시스템 캡션 버튼와 일치시키기 위해 다음 지침을 따릅니다.

디자인

버튼용 아이콘 으로 다음을 사용합니다.
- 최소화 아이콘: E921 ChromeMinimize
- 최대화 아이콘: E922 ChromeMaximize
- 복원 아이콘: E923 ChromeRestore
- 닫기 아이콘: E8BB ChromeClose
최대화 및 복원 버튼의 아이콘에는 둥근 모서리가 있습니다.
캡션 버튼에는 전체 블리드 백플레이트가 있습니다.
캡션 버튼은 휴식, 이동, 누름, 활성, 및 비활성 상태에 응답합니다.

디자인

권장되는 뒤로 가기 버튼 아이콘은 E830 ChromeBack입니다.

뒤로 가기 버튼이 있는 경우, 앱 제목 또는 아이콘/타이틀 조합(LTR)의 왼쪽에 배치해야 합니다.
뒤로 가기 버튼은 휴식, 이동, 누름, 활성, 및 비활성 상태에 응답합니다.
뒤로 가기 버튼의 크기는 16px x 16px이어야 하며 제목 표시줄에서 가운데에 세로로 배치되어야 합니다. 버튼에 전체 블리드 백플레이트가 있어야 합니다.
뒤로 가기 버튼은 LTR에서 가장 왼쪽 테두리에서 또는 RTL에서 가장 오른쪽 테두리에서부터 16px이어야 하며, 다음 요소에서 왼쪽 또는 오른쪽으로 16px여야 합니다.