TextBox 컨트롤 스타일 지정 팁

  • 아티클

Ee371168.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(KO-KR,Expression.30).png

TextBox 컨트롤은 사용자의 입력 내용을 가져오거나 텍스트를 표시하는 데 사용할 수 있습니다. 일반적으로 이 컨트롤은 편집 가능한 텍스트에 사용되지만 읽기 전용으로도 설정할 수 있습니다. TextBox 개체는 컨트롤 크기에 맞게 자동 줄 바꿈하여 여러 줄의 텍스트를 표시할 수 있습니다.

다른 모든 컨트롤과 마찬가지로 TextBox 컨트롤도 기본 모양과 다르게 수정할 수 있습니다. 기본적으로 TextBox 컨트롤은 다음과 같이 보입니다.

Ee371168.f77261da-feb5-4693-b764-582a9cc93c12(KO-KR,Expression.30).png

TextBox 컨트롤의 주요 속성

TextBox 컨트롤은 텍스트 컨트롤이므로 속성 패널의 공용 속성 범주에서 Text 속성을 설정하여 TextBox 컨트롤에 텍스트를 표시할 수 있습니다.

IsReadOnly 속성을 설정하여 TextBox 컨트롤을 읽기 전용으로 설정할 수 있습니다.

AcceptsReturn 속성을 선택하여 사용자가 입력하는 텍스트에 새 줄 문자를 추가하도록 할 수 있습니다. 이 경우 HorizontalScrollBarVisibility 및 VerticalScrollBarVisibility 속성을 설정하여 스크롤 막대를 표시할 수도 있습니다.

글꼴 크기, 글꼴 등을 지정하려면 속성 패널의 텍스트에서 해당 속성을 설정하십시오. 프로젝트에 사용자 지정 글꼴을 추가한 다음 텍스트 컨트롤에 사용할 수 있도록 해당 글꼴을 포함할 수도 있습니다.

자세한 내용은 텍스트 그리기을 참조하십시오.

다음과 같은 방법으로 이러한 속성을 설정할 수 있습니다.

  • 개체의 속성 설정   아트보드에 TextBox 개체를 그린 후 개체의 속성을 직접 설정할 수 있습니다. 여러 TextBox 개체에 같은 값을 사용하려면 스타일에서 개체의 속성을 설정합니다.

  • 스타일에서 속성 설정   TextBox 개체의 스타일 Ee371168.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(KO-KR,Expression.30).png에서 속성을 설정하면 해당 스타일을 사용하는 모든 TextBox 개체에서 기본적으로 해당 속성 값을 사용하게 됩니다. 특정 개체의 값을 덮어쓸 수 있습니다.

    자세한 내용은 스타일 만들기을 참조하십시오.

TextBox 템플릿의 구성 요소

TextBox 컨트롤은 TextBox 템플릿이라는 한 개의 템플릿을 사용하여 컨트롤의 모양을 정의합니다. 템플릿의 각 구성 요소는 템플릿이 적용된 TextBox 개체의 모양과 동작을 제어하는 역할을 합니다.

이 템플릿에는 TextBox 컨트롤의 모양을 세밀하게 다듬는 다른 개체도 있을 수 있지만, 다음 표에 나오는 구성 요소는 컨트롤의 정해진 동작에 연결되어 있습니다.

템플릿의 구성 요소를 보려면 템플릿을 수정하는 동안 구성 요소 패널을 엽니다. 개체 및 타임라인 패널의 구성 요소 패널에는 구성 요소 역할을 하는 개체 옆에 아이콘  Ee371168.6cf58c39-edba-4a0e-acbc-1da272f9a387(KO-KR,Expression.30).png이 나타납니다.

Ee371168.62c81ec5-2055-4556-a068-2dc300675ac9(KO-KR,Expression.30).png

구성 요소 이름

개체 형식

설명

ContentElement

FrameworkElement

텍스트를 표시하는 개체입니다.

이 구성 요소는 필수입니다.

TextBox 템플릿의 다른 개체는 다양한 상태에서 TextBox 컨트롤 모양을 변경하는 데 사용됩니다.

TextBox 컨트롤의 상태

기본적으로 TextBox 컨트롤은 CommonStates 상태 그룹에 있는 다음 네 가지 상태 중 하나일 수 있습니다. 이러한 상태는 TextBox 템플릿을 수정할 때 상태 패널에 표시됩니다.

상태 이름

설명

Normal

TextBox 컨트롤과의 상호 작용이 없을 때의 TextBox 컨트롤 모양

MouseOver

TextBox 컨트롤로 포인터를 이동했을 때의 TextBox 컨트롤 모양

Pressed

사용자가 TextBox 컨트롤을 클릭했을 때 또는 TextBox 컨트롤에 포커스가 있고 사용자가 Enter 키 또는 스페이스바를 눌렀을 때의 TextBox 컨트롤 모양

Disabled

IsEnabled 속성이 False로 설정되었을 때의 TextBox 컨트롤 모양

TextBox 컨트롤은 FocusStates 상태 그룹의 다음 두 가지 상태 중 하나일 수 있습니다.

상태 이름

설명

Unfocused

키보드 포커스가 없을 때의 TextBox 컨트롤 모양

Focused

키보드 포커스가 있을 때의 TextBox 컨트롤 모양. 예를 들어 TextBox 컨트롤에 키보드 포커스가 놓일 때까지 사용자가 Tab 키를 눌러 응용 프로그램의 모든 개체를 순환할 수 있습니다.

TextBox 컨트롤은 ValidationStates 상태 그룹의 다음 세 가지 상태 중 하나일 수 있습니다.

상태 이름

설명

Valid

TextBox 컨트롤이 유효할 때의 TextBox 컨트롤 모양

InvalidUnfocused

TextBox 컨트롤이 유효하지 않으며 키보드 포커스가 없을 때의 TextBox 컨트롤 모양

InvalidFocused

TextBox 컨트롤이 유효하지 않으며 키보드 포커스가 있을 때의 TextBox 컨트롤 모양
Ee371168.alert_tip(KO-KR,Expression.30).gif팁:

상태 그룹에는 동일한 논리적 범주에 속하지만 동시에 표시할 수는 없는 시각적 상태들이 포함됩니다. 예를 들어 CommonStates 그룹에는 마우스 같은 입력 장치와 사용자 간의 상호 작용과 관련된 상태가 포함됩니다. 한 상태 그룹의 상태는 한 번에 하나만 표시할 수 있지만, 서로 다른 상태 그룹의 상태는 각각 하나씩 동시에 표시할 수 있습니다.

상태 기록 기능이 켜져 있는 상태에서 상태를 선택하면 상태에 수행하는 변경 내용이 기록됩니다. 상태 기록 기능을 끄려면 기록 단추 Ee371168.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(KO-KR,Expression.30).png를 클릭하거나 상태 패널에서 Base를 선택합니다. 별개의 두 상태가 활성화되었을 때의 컨트롤 모양을 수정하려면 한 상태 그룹의 상태 미리 보기를 고정한 상태에서 다른 상태 그룹의 상태를 수정할 수 있습니다.

개체를 TextBox 컨트롤로 변환

TextBox 컨트롤의 템플릿을 수정하려면 다음 작업 중 하나를 수행합니다.

  • 아트보드에 TextBox Ee371168.343296b4-5c7d-4145-84cc-91b08ba67a1b(KO-KR,Expression.30).png를 그린 다음 기본 템플릿의 복사본을 만듭니다.

    자세한 내용은 템플릿 만들기 또는 수정을 참조하십시오.

  • 개체를 그리거나 아트를 가져온 다음 컨트롤로 만들기 명령을 사용하여 TextBox 컨트롤의 모양을 디자인합니다.

컨트롤로 만들기 명령을 사용하는 경우 다음 단계에 따라 TextBox 템플릿에 필요한 모든 개체를 만들어야 합니다.

  1. TextBox 컨트롤에 텍스트를 표시하려면 TextBox 컨트롤의 모양을 구성하는 개체가 있는 TextBlock Ee371168.42165963-00f7-4a33-abcd-b0849edebada(KO-KR,Expression.30).png을 포함합니다.

    TextBlock 개체가 포함된 아트워크를 TextBox 컨트롤의 템플릿으로 변환할 때 컨트롤로 만들기 명령은 다음 작업을 수행합니다.

    • ContentElement 구성 요소를 나타내는 ScrollViewer 개체를 TextBlock 컨트롤의 위치에 있는 템플릿에 배치합니다.

    • TextBlock 컨트롤의 레이아웃 속성을 ContentElement 개체로 복사합니다.

    • TextBlock 컨트롤의 인쇄 관련 속성을 TextBox 컨트롤의 스타일로 복사합니다. 스타일은 템플릿을 둘러쌉니다.

    • TextBlock 컨트롤의 Text 속성을 템플릿이 적용된 TextBox 개체로 복사합니다.

    개체를 컨트롤 템플릿으로 변환한 후 개체를 ContentElement 구성 요소에 할당할 수도 있습니다. 자세한 내용은 템플릿 파트를 개체에 할당합니다.을 참조하십시오.

  2. 개체를 레이아웃 패널로 그룹화하여 레이아웃 패널을 선택한 다음 도구 메뉴에서 컨트롤로 만들기를 클릭합니다.

  3. 대화 상자가 나타나면 TextBox를 선택하고 템플릿의 이름을 지정한 다음 템플릿을 저장할 위치를 선택합니다.

  4. 확인을 클릭하면 Microsoft Expression Blend에서 템플릿 편집 모드를 시작하고 TextBox 컨트롤을 구성하는 개체를 표시합니다. 이 모드에서는 템플릿 수정 작업을 계속할 수 있습니다. 예를 들어 개체를 추가하거나 수정하고 상태 패널에서 상태를 선택하여 해당 상태에 있을 때의 템플릿 모양을 수정할 수 있습니다.

  5. 템플릿에 있는 개체의 브러시 속성 일부를 템플릿을 사용할 TextBox 개체의 다음과 같은 속성에 바인딩하는 방법을 고려해 보십시오.

    • 배경

    • BorderBrush

    • Foreground

    • BorderThickness

    자세한 내용은 개체 속성을 템플릿으로 연장을 참조하십시오.

  6. 템플릿 편집 모드를 종료하려면 아트보드 위쪽의 이동 경로 탐색 막대에서 **[TextBox]**를 클릭하거나 개체 및 타임라인 패널에서 상위 범위로 이동 Ee371168.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png을 클릭합니다.

새 TextBox 템플릿을 다른 TextBox 개체에 적용하는 방법에 대한 자세한 내용은 리소스 적용 또는 제거를 참조하십시오.

참조

Microsoft Silverlight TextBox 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의 Silverlight Control Gallery(Silverlight 컨트롤 갤러리)를 참조하십시오.

참조

개념

공통 Silverlight 컨트롤의 스타일 지정 팁

템플릿을 지원하는 컨트롤의 스타일 지정

텍스트 그리기