Blend에서 Silverlight 컨트롤에 대한 TextBox 컨트롤 스타일 지정 팁
기본 제공 TextBox 컨트롤을 사용하여 사용자 지정 TextBox 템플릿을 만들 수 있습니다. 기본적으로 TextBox 컨트롤의 모양은 다음과 같습니다.
TextBox 템플릿의 구성 요소
TextBox 컨트롤에는 ContentElement 파트 하나가 있습니다. 이 파트는 필수입니다.
팁
템플릿의 파트를 보려면 템플릿을 수정하는 동안 파트 패널을 엽니다.
TextBox 컨트롤의 상태
기본적으로 TextBox 컨트롤은 다음과 같은 CommonStates 상태 그룹의 네 가지 상태 중 하나일 수 있으며 해당 상태는 TextBox 템플릿을 수정할 때 상태 패널에 나타납니다.
상태 이름 |
설명 |
---|---|
Normal |
TextBox 컨트롤과의 상호 작용이 없을 때의 컨트롤 모양입니다. |
MouseOver |
TextBox 컨트롤로 포인터를 이동할 때의 컨트롤 모양입니다. |
ReadOnly |
IsReadOnly 속성이 True로 설정될 때 TextBox 컨트롤의 모양입니다. |
Disabled |
IsEnabled 속성이 False로 설정될 때 TextBox 컨트롤의 모양입니다. |
TextBox 컨트롤은 다음과 같은 FocusStates 상태 그룹의 두 가지 상태 중 하나일 수도 있습니다.
상태 이름 |
설명 |
---|---|
Unfocused |
키보드 포커스가 없을 때 TextBox 컨트롤의 모양입니다. |
Focused |
키보드 포커스가 있을 때 TextBox 컨트롤의 모양입니다. 예를 들어 TextBox 컨트롤에 키보드 포커스가 놓일 때까지 사용자가 Tab 키를 눌러 응용 프로그램의 모든 개체를 순환시킬 수 있습니다. |
TextBox 컨트롤은 다음과 같은 ValidationStates 상태 그룹의 세 가지 상태 중 하나일 수도 있습니다.
상태 이름 |
설명 |
---|---|
Valid |
TextBox 컨트롤이 유효할 때의 컨트롤 모양 |
InvalidUnfocused |
TextBox 컨트롤이 유효하지 않은 상태이며 키보드 포커스가 없을 때의 컨트롤 모양. |
InvalidFocused |
TextBox 컨트롤이 유효하지 않은 상태이며 키보드 포커스가 있을 때의 컨트롤 모양. |
팁
상태 그룹에는 동일한 논리적 범주에 속하지만 동시에 표시할 수는 없는 시각적 상태가 포함됩니다.예를 들어 CommonStates 그룹에는 마우스와 같은 입력 장치와 사용자 간의 상호 작용과 관련된 상태가 포함됩니다.한 상태 그룹의 상태는 한 번에 하나만 표시할 수 있지만, 서로 다른 상태 그룹의 상태는 각각 하나씩 동시에 표시할 수 있습니다.
상태를 선택하면 상태 기록이 켜지고 해당 상태에 적용하는 모든 변경 내용이 기록됩니다. 상태 기록 기능을 끄려면 기록 모드 표시기 를 클릭하거나 상태패널에서 Base를 선택합니다. 별개의 두 상태가 활성화되었을 때의 컨트롤 모양을 수정하려면 한 상태 그룹의 상태 미리 보기를 고정한 상태에서 다른 상태 그룹의 상태를 수정할 수 있습니다.
템플릿 바인딩
Background, BorderBrush, Foreground, BorderThickness 및 Padding 속성을 템플릿 바인딩할 수 있습니다. 자세한 내용은 Blend에서 개체 속성을 템플릿으로 연장을 참조하십시오.
개체를 TextBox 컨트롤로 변환
다음 그림은 TextBox의 전체 디자인(comp)입니다.
이 예에서는 다음 절차의 2단계에 있는 XAML 코드를 사용하며 이 코드는 TextBox 컨트롤 템플릿을 사용하여 사용자 지정 텍스트 상자를 만드는 위 그래픽에 해당합니다.
새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.
<Grid x:Name="LayoutRoot" Background="White"/>
다음 코드를 복사하여 1단계에서 찾은 새 프로젝트의 코드 뒤에 붙여 넣습니다.
<Grid Height="20" Width="120"> <Rectangle Fill="#FF333333" RadiusX="5" RadiusY="5"/> <TextBlock Margin="5,0" Foreground="White" Text="Lorem" VerticalAlignment="Center"/> </Grid>
붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.
개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 TextBox를 클릭한 다음 확인을 클릭합니다.
프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.
새 TextBox 템플릿을 다른 TextBox 개체에 적용하는 방법에 대한 자세한 내용은 Blend에서 리소스 적용 또는 제거를 참조하십시오.
참조
Silverlight TextBox 컨트롤의 속성 및 이벤트에 대한 자세한 내용은 MSDN의Silverlight 컨트롤 갤러리에서 확인할 수 있습니다.