텍스트 컨트롤은 텍스트 입력란, 암호 상자, 자동 제안 상자 및 텍스트 블록으로 구성됩니다. XAML 프레임워크는 텍스트를 렌더링, 입력 및 편집하기 위한 여러 컨트롤과 텍스트 서식을 지정하기 위한 속성 집합을 제공합니다.
- 읽기 전용 텍스트를 표시하기 위한 컨트롤은 TextBlock 및 RichTextBlock입니다.
- 텍스트 입력 및 편집을 위한 컨트롤은 TextBox, RichEditBox, AutoSuggestBox 및 PasswordBox입니다.
중요 API: TextBlock 클래스, RichTextBlock 클래스, TextBox 클래스, RichEditBox 클래스, AutoSuggestBox 클래스, PasswordBox 클래스
이것이 올바른 컨트롤인가요?
사용하는 텍스트 컨트롤은 시나리오에 따라 달라집니다. 이 정보를 사용하여 앱에서 사용할 올바른 텍스트 컨트롤을 선택합니다.
읽기 전용 텍스트 렌더링
TextBlock을 사용하여 앱에서 대부분의 읽기 전용 텍스트를 표시합니다. 이를 사용하여 한 줄 또는 여러 줄 텍스트, 인라인 하이퍼링크, 굵게, 기울임꼴 또는 밑줄 같은 서식이 있는 텍스트를 표시할 수 있습니다.
TextBlock은 일반적으로 사용하기 쉽고 RichTextBlock보다 더 나은 텍스트 렌더링 성능을 제공하므로 대부분의 앱 UI 텍스트에 선호됩니다. Text 속성의 값을 가져오면 앱의 TextBlock에서 텍스트에 쉽게 액세스하고 사용할 수 있습니다.
또한 텍스트 렌더링 방식을 사용자 지정하는 동일한 서식 옵션을 많이 제공합니다. 텍스트에 줄 바꿈을 넣을 수는 있지만, TextBlock은 단일 단락을 표시하도록 설계되었으며 텍스트 들여쓰기를 지원하지 않습니다.
여러 단락, 다중 열 텍스트 또는 기타 복잡한 텍스트 레이아웃 또는 이미지와 같은 인라인 UI 요소를 지원해야 하는 경우 RichTextBlock 을 사용합니다. RichTextBlock은 고급 텍스트 레이아웃에 대한 몇 가지 기능을 제공합니다.
RichTextBlock의 콘텐츠 속성은 Blocks 속성인데, 이는 Paragraph 요소를 통해 단락 기반 텍스트를 지원합니다. 여기에는 앱에서 컨트롤의 텍스트 콘텐츠에 쉽게 액세스하는 데 사용할 수 있는 Text 속성이 없습니다.
문자 입력
TextBox 컨트롤을 사용하여 폼과 같이 서식이 지정되지 않은 텍스트를 입력하고 편집할 수 있습니다. Text 속성을 사용하여 TextBox 에서 텍스트를 가져와서 설정할 수 있습니다.
TextBox를 읽기 전용으로 만들 수 있지만 임시 조건부 상태여야 합니다. 텍스트를 편집할 수 없는 경우 대신 TextBlock을 사용하는 것이 좋습니다.
PasswordBox 컨트롤을 사용하여 암호 또는 기타 개인 데이터(예: 주민등록번호)를 수집합니다. 암호 상자는 개인 정보 보호를 위해 입력된 문자를 숨기는 텍스트 입력란입니다. 암호 상자는 입력된 텍스트 대신 글머리 기호를 렌더링한다는 점을 제외하고 텍스트 입력 상자처럼 보입니다. 글머리 기호 문자를 사용자 지정할 수 있습니다.
AutoSuggestBox 컨트롤을 사용하여 입력할 때 선택할 제안 목록을 사용자에게 표시합니다. 자동 제안 상자는 기본 검색 제안 목록을 트리거하는 텍스트 입력란입니다. 제안된 용어는 인기 있는 검색어와 사용자가 입력한 기록 용어의 조합에서 도출할 수 있습니다.
또한 AutoSuggestBox 컨트롤을 사용하여 검색 상자를 구현해야 합니다.
RichEditBox를 사용하여 텍스트 파일을 표시하고 편집합니다. RichEditBox를 사용하여 다른 표준 텍스트 입력 상자를 사용하는 방식으로 앱에 사용자 입력을 가져올 수 없습니다. 대신 앱과 별개의 텍스트 파일로 작업할 때 이를 사용합니다. 일반적으로 RichEditBox에 입력한 텍스트를 .rtf 파일로 저장합니다.
텍스트 입력이 최상의 옵션인가요?
앱에서 사용자 입력을 가져올 수 있는 여러 가지 방법이 있습니다. 이러한 질문은 표준 텍스트 입력 상자 또는 다른 컨트롤 중 하나가 사용자 입력을 가져오는 데 가장 적합한지 여부를 대답하는 데 도움이 됩니다.
- 유효한 모든 값을 효율적으로 열거하는 것이 실용적입니까? 그렇다면 확인란, 드롭다운 목록, 목록 상자, 라디오 단추, 슬라이더, 토글 스위치, 날짜 선택기 또는 시간 선택과 같은 선택 컨트롤 중 하나를 사용하는 것이 좋습니다.
- 유효한 값 집합이 상당히 작은가요? 이 경우 특히 값이 몇 자 이상인 경우 드롭다운 목록 또는 목록 상자를 고려합니다.
- 유효한 데이터가 완전히 제한되지 않는가요? 또는 유효한 데이터가 형식(제한된 길이 또는 문자 형식)으로만 제한되었나요? 그렇다면 텍스트 입력 컨트롤을 사용합니다. 입력할 수 있는 문자 수를 제한할 수 있으며 앱 코드에서 형식의 유효성을 검사할 수 있습니다.
- 값은 특수한 공용 컨트롤이 있는 데이터 형식을 나타내나요? 그렇다면 텍스트 입력 컨트롤 대신 적절한 컨트롤을 사용합니다. 예를 들어 텍스트 입력 컨트롤 대신 DatePicker 를 사용하여 날짜 입력을 수락합니다.
- 데이터가 엄격하게 숫자인 경우:
예시
| WinUI 2 갤러리 | |
|---|---|
|
WinUI 2 갤러리 앱이 설치되어 있는 경우 여기를 클릭하여 앱을 열고 작동 중인 텍스트 컨트롤을 확인합니다. |
텍스트 상자
자동 제안 상자
암호 상자
텍스트 컨트롤 만들기
각 텍스트 컨트롤과 관련된 정보 및 예제는 다음 문서를 참조하세요.
글꼴 및 스타일 지침
글꼴 지침은 다음 문서를 참조하세요.
펜 입력
적용 대상: TextBox, RichEditBox, AutoSuggestBox(UWP만 해당)
Windows 10 버전 1803부터 XAML 텍스트 입력 상자는 Windows Ink를 사용하여 펜 입력을 지원하는 기능을 제공합니다. 사용자가 Windows 펜을 사용하여 텍스트 입력란을 탭하면 텍스트 상자가 변환되어 사용자가 별도의 입력 패널을 열지 않고 펜으로 직접 입력할 수 있습니다.
자세한 내용은 필기 보기가 있는 텍스트 입력을 참조하세요.
텍스트 컨트롤에 맞는 키보드를 선택합니다.
적용 대상: TextBox, PasswordBox RichEditBox
사용자가 입력할 것으로 예상되는 데이터 종류와 일치하도록 텍스트 컨트롤의 입력 범위를 설정하여 터치 키보드나 SIP(Soft Input Panel)를 사용한 데이터 입력을 도울 수 있습니다.
팁 이 정보는 SIP에만 적용됩니다. Windows 접근성 옵션에서 사용할 수 있는 하드웨어 키보드 또는 화상 키보드에는 적용되지 않습니다.
터치 키보드는 터치 스크린이 있는 장치에서 앱이 실행될 때 텍스트 입력에 사용할 수 있습니다. 터치 키보드는 사용자가 TextBox 또는 RichEditBox와 같은 편집 가능한 입력 필드를 탭할 때 호출됩니다. 사용자가 입력할 것으로 예상되는 데이터 종류와 일치하도록 텍스트 컨트롤의 입력 범위를 설정하여 사용자가 앱에서 데이터를 쉽고 빠르게 입력할 수 있도록 지원할 수 있습니다. 입력 범위는 시스템에서 입력 형식에 대한 특수 터치 키보드 레이아웃을 제공할 수 있도록 컨트롤에서 예상하는 텍스트 입력 형식에 대한 힌트를 시스템에 제공합니다.
예를 들어 입력란을 사용하여 4자리 PIN을 입력하는 경우 InputScope 속성을 Number로 설정합니다. 이렇게 하면 시스템에 숫자 키패드 레이아웃이 표시되므로 사용자가 PIN을 더 쉽게 입력할 수 있습니다.
중요합니다
입력 범위는 입력 유효성 검사를 수행하지 않으며 사용자가 하드웨어 키보드 또는 기타 입력 장치를 통해 입력을 제공하지 못하게 합니다. 필요에 따라 코드의 입력 유효성을 검사할 책임이 있습니다.
자세한 내용은 입력 범위를 사용하여 터치 키보드를 변경하세요.
색 글꼴
적용 대상: TextBlock, RichTextBlock, TextBox, RichEditBox
Windows에는 글꼴이 각 문자 모양에 대해 여러 개의 색이 지정된 레이어를 포함할 수 있습니다. 예를 들어 Segoe UI 이모지 글꼴은 이모티콘 및 기타 이모지 문자의 색 버전을 정의합니다.
표준 및 서식 있는 텍스트 컨트롤은 표시 색 글꼴을 지원합니다. 기본적으로 IsColorFontEnabled 속성은 true 이며 이러한 추가 레이어가 있는 글꼴은 색으로 렌더링됩니다. 시스템의 기본 색 글꼴은 Segoe UI 이모지이며 컨트롤은 이 글꼴로 대체되어 문자 모양을 색으로 표시합니다.
<TextBlock FontSize="30">Hello ☺⛄☂♨⛅</TextBlock>
렌더링된 텍스트는 다음과 같습니다.
자세한 내용은 IsColorFontEnabled 속성을 참조하세요.
줄 및 단락 구분 기호에 대한 지침
적용 대상: TextBlock, RichTextBlock, 여러 줄 TextBox, RichEditBox
줄 구분 기호 문자(0x2028)와 단락 구분 문자(0x2029)를 사용하여 일반 텍스트를 나눕니다. 각 줄 구분 기호 후에 새 줄이 시작됩니다. 각 단락 구분 기호 뒤에 새 단락이 시작됩니다.
이러한 문자를 사용하여 파일에서 첫 번째 줄 또는 단락을 시작하거나 마지막 줄 또는 단락을 종료할 필요는 없습니다. 이렇게 하면 해당 위치에 빈 줄 또는 단락이 있음을 나타냅니다.
앱은 줄 구분 기호를 사용하여 무조건 줄 끝을 나타낼 수 있습니다. 그러나 줄 구분 기호는 별도의 캐리지 리턴 및 줄 바꿈 문자 또는 이러한 문자의 조합에 해당하지 않습니다. 줄 구분 기호는 캐리지 리턴 및 줄 바꿈 문자와 별도로 처리해야 합니다.
앱에서 텍스트 단락 사이에 단락 구분 기호를 삽입할 수 있습니다. 이 구분 기호를 사용하면 다른 운영 체제에서 서로 다른 선 너비로 서식을 지정할 수 있는 일반 텍스트 파일을 만들 수 있습니다. 대상 시스템은 줄 구분 기호를 무시하고 단락 구분 기호에서만 단락을 분리할 수 있습니다.
맞춤법 검사 지침
적용 대상: TextBox, RichEditBox
텍스트 입력 및 편집 중에 맞춤법 검사는 빨간색 물결선으로 강조 표시하여 단어의 철자가 잘못되었다는 것을 사용자에게 알리고 사용자가 맞춤법 오류를 수정할 수 있는 방법을 제공합니다.
기본 제공 맞춤법 검사기의 예는 다음과 같습니다.
다음 두 가지 용도로 텍스트 입력 컨트롤을 사용하여 맞춤법 검사를 사용합니다.
맞춤법 오류를 자동으로 수정하려면
맞춤법 검사 엔진은 수정에 대해 확신이 있을 때 철자가 틀린 단어를 자동으로 수정합니다. 예를 들어 엔진은 자동으로 "the"를 "the"로 변경합니다.
대체 맞춤법을 표시하려면
맞춤법 검사 엔진이 교정에 대해 확신하지 못하는 경우 맞춤법이 틀린 단어 아래에 빨간색 선을 추가하고 단어를 탭하거나 마우스 오른쪽 단추로 클릭할 때 상황에 맞는 메뉴에 대체 항목을 표시합니다.
맞춤법 검사를 사용하여 사용자가 텍스트 입력 컨트롤에 단어 또는 문장을 입력할 때 도움을 줄 수 있습니다. 맞춤법 검사는 터치, 마우스 및 키보드 입력에서 작동합니다.
단어가 사전에 있을 가능성이 없거나 사용자가 맞춤법 검사를 소중히 여기지 않는 경우 맞춤법 검사를 사용하지 마세요. 예를 들어 텍스트 상자가 전화 번호나 이름을 캡처하도록 의도된 경우에는 설정하지 마세요.
현재 맞춤법 검사 엔진이 앱 언어를 지원하지 않는다는 이유로 맞춤법 검사를 사용하지 않도록 설정하지 마세요. 맞춤법 검사기가 언어를 지원하지 않는 경우 아무 작업도 수행하지 않으므로 옵션을 그대로 두는 데 아무런 해가 없습니다. 또한 일부 사용자는 IME(입력 방법 편집기)를 사용하여 앱에 다른 언어를 입력할 수 있으며 해당 언어가 지원될 수 있습니다. 예를 들어 일본어 앱을 빌드할 때 맞춤법 검사 엔진이 현재 해당 언어를 인식하지 못하더라도 맞춤법 검사를 해제하지 마세요. 사용자는 영어 IME로 전환하고 앱에 영어를 입력할 수 있습니다. 맞춤법 검사를 사용하도록 설정하면 영어가 맞춤법을 검사합니다.
TextBox 및 RichEditBox 컨트롤의 경우 맞춤법 검사는 기본적으로 켜져 있습니다. IsSpellCheckEnabled 속성을 false로 설정하여 해제할 수 있습니다.
관련 문서
디자이너용
개발자용(XAML)
GitHub에서 Microsoft와 공동 작업
이 콘텐츠의 원본은 GitHub에서 찾을 수 있으며, 여기서 문제와 끌어오기 요청을 만들고 검토할 수도 있습니다. 자세한 내용은 참여자 가이드를 참조하세요.
Windows developer