컨트롤은 단추, 텍스트 필드, 목록, 선택기 등 Windows 앱을 구성하는 UI 요소입니다.
컨트롤은 콘텐츠를 표시하거나 사용자가 앱과 상호 작용할 수 있도록 합니다.
패턴은 양식 또는 목록 세부 레이아웃과 같은 일반적인 시나리오를 위해 여러 컨트롤을 재사용 가능한 레시피로 결합합니다.
Windows 45개 이상의 즉시 사용 가능한 컨트롤을 제공하며, 모두 Fluent 디자인 시스템 기반으로 합니다. 간단한 토글에서 그리드 및 목록과 같은 풍부한 데이터 뷰에 이르기까지 이러한 컨트롤을 사용하면 디바이스에서 시각적으로 세련되고 액세스 가능하며 응답성이 뛰어난 인터페이스를 빌드할 수 있습니다.
각 컨트롤 및 패턴에 대한 디자인 지침, 코드 예제 및 모범 사례를 위한 문서를 이 섹션에서 탐색하십시오.
시작하기
앱에 컨트롤을 추가하고 이벤트 처리기를 연결하는 방법을 알아보려면 컨트롤 추가 및 이벤트 처리를 참조하세요. 재사용 가능한 XAML 스타일을 사용하여 컨트롤 모양을 사용자 지정하려면 컨트롤 스타일 지정을 참조하세요.
제어
다음 표에서는 설명서에 대한 링크와 함께 WinUI에서 사용할 수 있는 Windows 앱 컨트롤을 나열합니다.
| 이미지 |
제어 |
설명 |
|
단추 |
사용자 입력에 응답하고 Click 이벤트를 발생시키는 컨트롤입니다. 단추, 드롭다운 단추, 분할 단추, 토글 단추 등이 포함됩니다. |
|
확인란 |
사용자가 선택하거나 지울 수 있는 컨트롤입니다. |
|
콤보 상자 |
사용자가 선택할 수 있는 항목의 드롭다운 목록입니다. |
|
하이퍼링크 |
하이퍼링크 텍스트로 표시되고 URI로 이동하거나 Click 이벤트를 처리할 수 있는 단추입니다. |
|
라디오 단추 |
사용자가 옵션 그룹에서 단일 옵션을 선택할 수 있도록 하는 컨트롤입니다. |
|
등급 제어 |
별 1~5개까지 평가합니다. |
|
슬라이더 |
사용자가 트랙을 따라 Thumb 컨트롤을 이동하여 값 범위에서 선택할 수 있는 컨트롤입니다. |
|
토글 스위치 |
2개 상태 간에 전환할 수 있는 스위치입니다. |
Collections
| 이미지 |
제어 |
설명 |
|
항목 보기 |
다양한 레이아웃을 사용하여 항목 컬렉션을 표시하는 컨트롤입니다. |
|
목록 보기 및 그리드 보기 |
세로 목록이나 행 및 열에 항목 컬렉션을 표시하는 컨트롤입니다. |
|
대칭 이동 보기 |
사용자가 한 번에 하나의 항목을 넘길 수 있는 항목의 모음을 제공합니다. |
|
Pips 호출기 |
페이지 번호를 시각적으로 알 필요가 없는 경우 사용자가 페이지를 매긴 컬렉션을 탐색할 수 있도록 하는 컨트롤입니다. |
|
트리 보기 |
중첩된 항목이 포함된 노드를 확장하고 축소하는 계층적 목록 패턴입니다. |
|
|
항목 반복기 |
데이터 기반 레이아웃에 대한 유연한 기본형 컨트롤입니다. |
|
스와이프 |
항목에 대한 빠른 메뉴 작업에 대한 터치 제스처입니다. |
|
당겨서 새로 고침 |
목록/그리드의 항목 컬렉션을 끌어와 컬렉션의 내용을 새로 고치는 기능을 제공합니다. |
대화 상자 및 팝업
| 이미지 |
제어 |
설명 |
|
대화 |
XAML 콘텐츠를 포함하도록 사용자 지정할 수 있는 대화 상자입니다. |
|
플라이아웃 |
컨텍스트 정보를 표시하고 사용자 상호 작용을 가능하게 합니다. |
|
교육 팁 |
사용자를 안내하고 교육 순간을 활성화하기 위한 콘텐츠가 풍부한 플라이아웃입니다. |
| 이미지 |
제어 |
설명 |
|
폼 |
입력 컨트롤과 레이블의 조합을 사용하여 사용자 입력을 수집하고 제출하는 패턴입니다. |
| 이미지 |
제어 |
설명 |
|
아이콘 |
다양한 이미지 형식을 콘텐츠로 사용하는 아이콘 컨트롤을 나타냅니다. |
|
애니메이션 아이콘 |
사용자가 컨트롤과 상호 작용할 때 애니메이션 효과를 주는 아이콘을 표시하고 제어하는 요소입니다. |
|
|
이미지 및 이미지 브러시 |
이미지 콘텐츠를 표시하는 컨트롤입니다. |
|
잉크 |
디지털 잉크 기능을 위한 제어 장치로, 잉크 캔버스와 잉크 도구 모음을 포함합니다. |
|
미디어 재생 |
비디오 및 이미지 콘텐츠를 표시하는 컨트롤입니다. |
|
도형 |
줄임표, 사각형 및 다각형과 같은 셰이프를 그립니다. |
| 이미지 |
제어 |
설명 |
|
메뉴 및 상황에 맞는 메뉴 |
간단한 명령 또는 옵션의 상황별 목록을 표시합니다. |
|
명령 모음 |
레이아웃을 처리하고 내용의 크기를 조정하는 애플리케이션별 명령을 표시하기 위한 도구 모음입니다. |
|
명령줄 확장 |
자동 관리 명령과 명령의 선택적 메뉴를 표시하는 미니 도구 모음입니다. |
|
메뉴 플라이아웃 및 메뉴 표시줄 |
클래식 메뉴로, MenuFlyoutItems를 포함하는 MenuItems의 표시가 가능합니다. |
네비게이션
| 이미지 |
제어 |
설명 |
|
이동 경로 표시줄 |
현재 위치로 이동한 탐색의 내역을 표시합니다. |
|
목록/세부 정보 |
현재 선택한 항목의 세부 정보와 함께 항목 목록을 표시하는 패턴입니다. |
|
탐색 보기 |
축소 가능한 탐색 메뉴를 통해 앱의 최상위 영역에 대한 일반적인 세로 레이아웃입니다. |
|
피벗 |
탭 보기에 다른 원본의 정보를 표시합니다. |
|
|
선택기 표시줄 |
다양한 소스의 작은 집합에서 정보를 제공합니다. 사용자는 그 중 하나를 선택할 수 있습니다. |
|
탭 보기 |
여러 문서를 표시하는 데 사용할 수 있는 탭 컬렉션을 표시하는 컨트롤입니다. |
사람
| 이미지 |
제어 |
설명 |
|
인물 사진 |
사람/연락처의 사진을 표시합니다. |
Pickers
| 이미지 |
제어 |
설명 |
|
색 선택기 |
선택 가능한 색 스펙트럼을 표시하는 컨트롤입니다. |
|
달력 날짜 선택기 |
사용자가 달력을 사용하여 날짜 값을 선택할 수 있는 컨트롤입니다. |
|
일정 보기 |
사용자가 날짜를 선택할 수 있는 일정을 표시하는 컨트롤입니다. |
|
날짜 선택기 |
사용자가 날짜 값을 선택할 수 있는 컨트롤입니다. |
|
시간 선택기 |
사용자가 시간 값을 선택할 수 있는 구성 가능한 컨트롤입니다. |
| 이미지 |
제어 |
설명 |
|
확장기 |
더 많은 콘텐츠가 있는 본문을 표시하도록 확장할 수 있는 헤더가 있는 컨테이너입니다. |
|
스크롤 및 패닝 컨트롤 |
사용자가 콘텐츠를 이동 및 확대/축소할 수 있는 컨테이너 컨트롤입니다. |
|
주석이 추가된 스크롤 막대 |
큰 컬렉션을 쉽게 탐색할 수 있도록 일반 세로 스크롤 막대의 기능을 확장하는 컨트롤입니다. |
|
시맨틱 줌 |
사용자가 컬렉션의 서로 다른 두 보기를 확대/축소하여 큰 항목 컬렉션을 보다 쉽게 탐색할 수 있습니다. |
|
분할 보기 |
창에 대한 여러 표시 옵션이 있는 2개의 콘텐츠 영역이 있는 컨테이너입니다. |
|
|
2개 창 보기 |
사용 가능한 공간에 걸쳐 있는 두 개의 콘텐츠 영역이 있는 컨트롤(나란히 또는 위쪽 아래쪽). |
| 이미지 |
제어 |
설명 |
|
Progress |
진행률 표시줄 또는 진행률 링을 사용하여 작업에서 앱의 진행률을 표시합니다. |
|
도구 팁 |
팝업 창에 요소에 대한 정보를 표시합니다. |
|
정보 표시줄 |
앱 전체 상태 변경 정보를 표시하는 인라인 메시지입니다. |
|
정보 배지 |
알림을 표시하거나 영역에 포커스를 가져오는 비입력 UI입니다. |
텍스트
| 이미지 |
제어 |
설명 |
|
자동 제안 상자 |
사용자가 입력할 때 제안을 제공하는 컨트롤입니다. |
|
텍스트 블록 |
적은 양의 텍스트를 표시하기 위한 간단한 컨트롤입니다. |
|
서식 있는 텍스트 블록 |
서식이 지정된 텍스트, 하이퍼링크, 인라인 이미지 및 기타 서식 있는 콘텐츠를 표시하는 컨트롤입니다. |
|
텍스트 상자 |
한 줄 또는 여러 줄 일반 텍스트 필드입니다. |
|
서식 있는 편집 상자 |
서식 있는 텍스트, 하이퍼링크 및 기타 서식 있는 콘텐츠를 지원하는 서식 있는 텍스트 편집 컨트롤입니다. |
|
암호 상자 |
암호를 입력하기 위한 컨트롤입니다. |
|
숫자 상자 |
대수 수식의 숫자 입력 및 평가에 사용되는 텍스트 컨트롤입니다. |
|
레이블 |
입력 컨트롤에 액세스 가능한 레이블을 추가하기 위한 지침입니다. |
제목 표시줄
| 이미지 |
제어 |
설명 |
|
제목 표시줄 |
앱 창의 제목 표시줄을 사용자 지정합니다. |
WinUI 3 갤러리
WinUI 3 갤러리 앱은 이러한 컨트롤을 실습하는 가장 좋은 방법입니다. 대부분의 WinUI 컨트롤, 기능 및 Fluent 디자인 패턴에 대한 대화형 데모를 제공하므로 이 설명서에 적합합니다. 컨트롤을 실시간으로 시도하고 개별 컨트롤 페이지에서 직접 연결하도록 설치합니다.
추가 컨트롤 및 리소스
Windows 커뮤니티 도구 키트는 기본 제공 WinUI 컨트롤을 보완하는 도우미, 확장 및 추가 UI 컨트롤의 컬렉션입니다. Microsoft는 커뮤니티 기반이며 고급 레이아웃, 변환기 및 애니메이션과 같은 일반적인 시나리오를 다룹니다.
실험적 컨트롤 및 기능에 대한 초기 액세스를 위해 Windows 커뮤니티 도구 키트 랩을 확인하세요. 여기서 새 구성 요소는 기본 도구 키트로 졸업하기 전에 개발 및 테스트됩니다.
