시스템 컨트롤의 상태 변경 간 전환 시간 수정

컨트롤은 어떤 상태에 있느냐에 따라 다르게 보일 수 있습니다. 예를 들어 단추 위로 마우스 포인터를 가져갈 때 해당 단추의 색이 약간 바뀌는 경우를 들 수 있습니다. "MouseOver"는 단추의 상태 중 하나입니다. 시스템 컨트롤의 템플릿 복사본을 수정하여 해당 컨트롤의 상태 간 전환 시간을 사용자 지정할 수 있습니다.

다음 절차에서는 단추(Button)를 사용자 지정하는 방법을 보여 주고 있지만 Microsoft Expression Blend 2에 포함된 어떤 시스템 컨트롤 또는 Control 클래스를 상속하는, 가져온 항목인 어떤 사용자 지정 Silverlight 2 컨트롤이라도 사용자 지정할 수 있습니다.

팁:
사용자 정의 컨트롤의 상태 및 전환 시간을 수정할 수도 있습니다. 자세한 내용은 사용자 정의 컨트롤의 다양한 시각적 상태 및 전환 시간 정의를 참조하십시오.

상태 간 전환 시간 수정

1. 시스템 컨트롤의 재사용 가능한 템플릿 만들기를 수행합니다(예: Button  컨트롤).

2. 아직 템플릿 편집 모드가 아니면 아트보드에서 컨트롤을 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다. 필요에 따라 개체를 선택한 다음 이동 경로 탐색 막대에서 Template을 클릭할 수도 있습니다(선택 사항).

   

3. 템플릿 편집 모드인 동안에는 Normal 및 MouseOver 같은 단추 상태가 인터랙션 패널의 상태에 표시됩니다. 상태는 상태 그룹(예: CommonStates 및 FocusStates)에 포함되어 있습니다.

   

   CommonStates 옆에는 값이 0초("0s")인 텍스트 상자가 있습니다. 이 시간은 상태 그룹에 속한 상태 간의 모든 전환에 사용되는 기본 전환 지속 시간입니다. 예를 들어 임의의 상태에서 Normal 상태로 전환하려면 0초가 걸립니다. 이 기본 전환 지속 시간을 변경할 수 있습니다.

   

   이 값은 MouseOver 상태 및 Pressed 상태로 전환할 때 "0.1s"로 다시 정의됩니다. 별 모양과 화살표는 "특정 상태에서 이 상태로"를 나타냅니다.

   

4. 상태에서 MouseOver 상태의 전환 추가  단추를 클릭한 다음 MouseOver->Normal 전환을 클릭합니다.

   

5. MouseOver->Normal 전환의 새 줄에서 텍스트 상자의 값을 "0s"에서 "0.5s"로 변경합니다.

   

6. 작업 내용을 저장(Ctrl+S)한 다음 F5 키를 눌러 응용 프로그램을 빌드하고 테스트합니다. 브라우저 창에서 응용 프로그램이 열리면 마우스 포인터를 단추 위로 가져가서 마우스가 단추를 벗어날 때 얼마나 느리게 이전 상태로 다시 전환되는지 확인합니다.

문제 해결

• 브라우저에서 응용 프로그램을 볼 때 문제가 발생하면 올바른 Silverlight 2 런타임을 설치하지 않은 경우일 수 있습니다. 자세한 내용은 Silverlight 2 도구 및 런타임 설치를 참조하십시오.

다음 단계

• 다양한 상태의 단추 모양을 변경할 수 있습니다. 자세한 내용은 다양한 상태의 시스템 컨트롤 모양 수정을 참조하십시오.

• 단추 위로 마우스 포인터를 가져가면 단추가 회전하게 하는 것과 같은 애니메이션을 추가할 수 있습니다. 자세한 내용은 상태 변경 후 재생될 애니메이션 추가을 참조하십시오.

• 이 템플릿을 프로젝트의 다른 단추에 적용하거나 이미 지정된 템플릿이 있는 단추를 새로 그릴 수 있습니다. 자세한 내용은 스타일 리소스 적용을 참조하십시오.

참조

개념

Silverlight 2 프로젝트에서 컨트롤 그리기

상태 변경 후 재생될 애니메이션 추가