PasswordBox 컨트롤 스타일 지정 팁

기본 제공 PasswordBox 컨트롤 템플릿을 사용하여 사용자 지정 PasswordBox 템플릿을 만들 수 있습니다. PasswordBox 컨트롤의 기본 모양은 다음과 같습니다.

PasswordBox 템플릿의 구성 요소

PasswordBox 컨트롤에는 ContentElement 라는 파트가 하나 있습니다. 이 구성 요소는 필수입니다.

팁:
템플릿의 파트를 보려면 템플릿을 수정하는 동안 파트 패널을 엽니다.

PasswordBox 컨트롤의 상태

기본적으로 PasswordBox 컨트롤의 상태는 CommonStates 상태 그룹에서 다음 네 가지 상태 중 하나일 수 있으며 상태는 PasswordBox 템플릿을 수정할 때 상태 패널에 나타납니다.

상태 이름	설명
Normal	PasswordBox 컨트롤과의 상호 작용이 없을 때의 컨트롤 모양입니다.
MouseOver	PasswordBox 컨트롤로 포인터를 이동했을 때의 컨트롤 모양입니다.
Disabled	IsEnabled 속성이 False 로 설정되어 있을 때의 PasswordBox 컨트롤 모양입니다.

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

상태 이름	설명
Unfocused	키보드 초점이 없을 때의 PasswordBox 컨트롤 모양입니다.
Focused	키보드 포커스가 있을 때의 PasswordBox 컨트롤 모양입니다. 예를 들어 PasswordBox 컨트롤에 키보드 포커스가 놓일 때까지 사용자가 Tab 키를 눌러 응용 프로그램의 모든 개체를 순환할 수 있습니다.

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

상태 이름	설명
Valid	PasswordBox 컨트롤이 유효할 때의 컨트롤 모양입니다.
InvalidUnfocused	PasswordBox 컨트롤이 유효하지 않으며 키보드 포커스가 없을 때의 컨트롤 모양입니다.
InvalidFocused	PasswordBox 컨트롤이 유효하지 않으며 키보드 포커스가 있을 때의 컨트롤 모양입니다.

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

상태 기록 기능이 켜져 있는 상태에서 상태를 선택하면 상태에 수행하는 변경 내용이 기록됩니다. 상태 기록 기능을 끄려면 기록 모드 표시기 를 클릭하거나 상태 패널에서 Base를 선택합니다. 별개의 두 상태가 활성일 때의 컨트롤 모양을 수정하려면 한 상태 그룹의 상태 미리 보기를 고정한 상태에서 다른 상태 그룹의 상태를 수정하십시오.

템플릿 바인딩

Background, BorderBrush, Foreground, BorderThickness 또는 Padding 속성을 템플릿 바인딩할 수 있습니다. 자세한 내용은 개체 속성을 템플릿으로 연장을 참조하십시오.

개체를 PasswordBox 컨트롤로 변환

다음 그림은 PasswordBox 의 전체 디자인(comp)입니다.

이 예에서는 다음 절차의 2단계(위 그림에 해당)에서 XAML 코드를 사용하여 PasswordBox 컨트롤 템플릿으로 사용자 지정 암호 상자를 만듭니다.

1. 새 Microsoft Silverlight 프로젝트를 엽니다. 코드 보기에서 다음 코드를 찾은 다음 닫는 슬래시 표시(/)를 삭제합니다.

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. 다음 코드를 복사하여 1단계에서 찾은 새 프로젝트의 코드 뒤에 붙여 넣습니다.

   <Grid Height="20" Width="120">
   <Rectangle Fill="#FF333333" RadiusX="5" RadiusY="5"/>
   <TextBlock Margin="5,0" Foreground="White" Text="*****" VerticalAlignment="Center"/>
   </Grid>
   

3. 붙여 넣은 코드 뒤에 닫는 Grid 태그(</Grid>)를 추가합니다.

4. 개체 및 타임라인 패널에서 Grid를 마우스 오른쪽 단추로 클릭한 후 컨트롤로 만들기를 클릭합니다. 컨트롤로 만들기 대화 상자에서 PasswordBox를 클릭한 다음 확인을 클릭합니다.

5. 개체 및 타임라인 패널에서 Grid를 클릭합니다. 파트 패널에서 ContentElement를 두 번 클릭합니다.

6. TextBlock의 VerticalAlignment 및 Margin 속성을 복사하여 ContentElement에 붙여 넣습니다. 개체 및 타임라인 패널에서 ContentElement를 클릭하고 속성 패널에서 다음을 수행합니다.

   • **VerticalAlignment   **Center****로 설정합니다.

   • **Margin   ** 다음과 같이 설정합니다.

     • Left   5

     • Right   5

     • Top   0

     • Bottom   0

7. 개체 및 타임라인 패널에서 TextBlock을 마우스 오른쪽 단추로 클릭하고 Delete 키를 누릅니다.

8. 개체 및 타임라인 패널에서 템플릿을 클릭한 다음 범위를 {0}(으)로 되돌립니다.를 클릭합니다. 개체 및 타임라인 패널에서 Style을 선택하고 속성 패널의 브러시 범주에서 Foreground를 #FFFFFFFF 로 설정합니다.

9. 개체 및 타임라인 패널에서 범위를 {0}(으)로 되돌립니다.를 클릭합니다.

10. 속성 패널에서 공용 속성 범주의 암호 상자에 abcde 를 입력합니다.

11. 속성 패널의 텍스트 범주에서 고급 속성 표시를 클릭합니다. PasswordChar 텍스트 상자에 * 를 입력합니다.

12. 프로젝트를 빌드(Ctrl+Shift+B)한 다음 F5 키를 눌러 프로젝트를 테스트합니다.

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

참조

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

참조 항목

개념

공통 Silverlight 컨트롤의 스타일 지정 팁
템플릿을 지원하는 컨트롤 스타일
텍스트 그리기

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.