사용자 상호 작용에 대한 응답으로 상태 변경

나만의 사용자 정의 컨트롤을 직접 만들 때, 상태 및 상태 그룹을 추가하여 해당 상태에 따라 사용자 정의 컨트롤의 모양을 변경할 수 있습니다. 마우스 클릭 같은 사용자 상호 작용에 대한 응답으로 이러한 상태를 변경하려면 이벤트 처리기 메서드를 추가하여 GoToState 메서드를 호출합니다.

[!참고]

단추(Button) 같은 시스템 컨트롤의 템플릿을 수정하는 경우에는 사용자 상호 작용에 대한 컨트롤의 응답 외에도 기본 상태가 이미 정의되어 있습니다. 기본 상태는 추가하거나 제거할 수 없습니다. 하지만 다양한 상태의 컨트롤 모양을 변경할 수 있으며 다음 절차를 사용하여 상태를 변경할 수 있습니다.

마우스 클릭에 대한 응답으로 상태 변경

1. 상태 그룹 및 상태를 아직 만들지 않은 경우 사용자 정의 컨트롤의 다양한 시각적 상태 및 전환 시간 정의를 수행할 수 있습니다. 예를 들어 다음 그림은 카드 게임의 카드를 나타내는 사용자 정의 컨트롤을 보여 줍니다. SideDisplayed 상태 그룹에는 카드 앞면을 표시하는 상태(FaceUp)와 뒷면을 표시하는 상태(FaceDown)가 포함되어 있습니다.

   

2. 상태에서 Base를 선택하여 상태 기록 모드를 해제합니다.

3. 개체 및 타임라인에서 [UserControl] 개체를 선택하여 전체 사용자 정의 컨트롤의 표면 영역 위로 가져가는 액션에 응답할 이벤트를 연결합니다.

4. 속성 패널에서 이벤트  단추를 클릭하여 속성 보기에서 이벤트 보기로 전환합니다.

   팁:
   속성 패널을 속성 보기로 다시 전환하려면 속성  단추를 클릭하십시오.

5. MouseLeftButtonDown 이벤트 옆에 "goClick" 같은 이벤트 처리기 메서드 이름을 입력합니다.

   

   팁:
   또는 간단히 이벤트 텍스트 상자를 두 번 클릭해서 이벤트 처리기 메서드의 기본 이름을 생성할 수도 있습니다.

   Enter 키를 누르면 Microsoft Expression Blend가 Microsoft Visual Studio 2008(설치된 경우)에서 프로젝트를 엽니다. 코드 편집기가 설치되어 있지 않은 경우에는 Expression Blend가 이벤트 처리기 메서드 코드를 클립보드에 복사하므로, 텍스트 편집기에서 사용자 정의 컨트롤의 코드 숨김 파일을 열고 클립보드에 복사된 코드를 직접 붙여 넣을 수 있습니다.

   private void goClick(object sender, MouseButtonEventArgs e)
   {
   
   }
   

   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
   
   End Sub
   

   Visual Studio 2008과 Expression Blend의 상호 운용성에 대한 자세한 내용은 코드 숨김 파일 편집을 참조하십시오.

6. 사용자 정의 컨트롤이 상태를 변경하게 하려면 상태 이름과 함께 GoToState 메서드를 호출하십시오. 예를 들어 굵게 표시된 다음 코드를 코드 숨김 파일에 붙여 넣습니다.

   private bool isFaceUp = false;
   
   private void goClick(object sender, MouseButtonEventArgs e)
   {
     if (isFaceUp)  {    VisualStateManager.GoToState(this, "FaceDown", true);  }  else  {    VisualStateManager.GoToState(this, "FaceUp", true);}  isFaceUp = !isFaceUp;
   }
   

   Private isFaceUp As Boolean = False
   
   Private Sub goClick(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
     If isFaceUp Then    VisualStateManager.GoToState(Me, "FaceDown", True)  Else    VisualStateManager.GoToState(Me, "FaceUp", True)  End If  isFaceUp = Not (isFaceUp)
   End Sub
   

7. 프로젝트를 빌드합니다(Ctrl+Shift+B).

8. 프로젝트를 테스트(F5 키)한 다음 사용자 정의 컨트롤을 클릭하여 상태를 변경하는지 확인합니다.

문제 해결

• Expression Blend의 이벤트 패널에 이름을 입력할 때 "코드 숨김 파일을 변경할 수 없습니다. 다음 클래스를 찾을 수 없습니다."라는 오류 메시지가 나타나면 외부 코드 편집기(대개 Microsoft Visual Studio)로 전환하여 솔루션을 다시 로드해야 할 수 있습니다. 다시 로드하면 누락된 클래스를 정의하는 새 파일이 포함됩니다. Visual Studio 2008에서 "솔루션을 로드할 수 없습니다."라는 오류 메시지가 나타나면 Visual Studio 2008용 Microsoft Silverlight Tools를 설치하지 않은 것일 수 있습니다. 해당 도구를 설치한 다음 Expression Blend의 이벤트 패널에 이름을 입력해 봅니다.

• 프로젝트를 테스트(F5 키)할 때 사용자 정의 컨트롤이 표시되지 않는데도 브라우저 창에 오류 메시지가 나타나지 않으면 시작 문서에 사용자 정의 컨트롤 인스턴스를 그리지 않은 것일 수 있습니다. 시작 문서는 응용 프로그램을 실행할 때 나타나는 첫 번째 문서입니다. 별도의 문서에 사용자 정의 컨트롤을 만든 경우에는 프로젝트를 빌드(Ctrl+Shift+B)하고 시작 문서(대개 Page.xaml)를 연 다음 자산 라이브러리 를 열고 사용자 지정 컨트롤 탭에서 사용자 정의 컨트롤을 선택한 다음 아트보드에 사용자 정의 컨트롤을 그려야 합니다.

• 응용 프로그램 빌드 시 문제가 발생하면 잘못된 Microsoft Silverlight 버전을 설치한 것일 수 있습니다. 자세한 내용은 Silverlight 2 도구 및 런타임 설치를 참조하십시오.

다음 단계

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

• Expression 커뮤니티 웹 사이트에서 제공되는 "작업 방법(How Do I?)" 비디오 자습서를 통해 상태 및 상태 그룹을 사용하는 실제 시나리오를 참조할 수 있습니다.