사용자 정의 컨트롤의 다양한 시각적 상태 및 전환 시간 정의

아티클
10/11/2017

나만의 사용자 정의 컨트롤을 직접 만들 때, 사용자 지정 상태 및 상태 그룹을 추가하여 사용자 정의 컨트롤의 각 상태의 다양한 모양을 정의할 수 있습니다. 예를 들어 사용자 정의 컨트롤이 게임 카드(PlayingCard)를 나타내는 경우 FaceUp 및 FaceDown 상태가 있어야 합니다.

[!참고]

Silverlight 프로젝트에서 단추(Button) 같은 시스템 컨트롤의 템플릿을 수정하는 경우에는 기본 상태 그룹 및 상태가 이미 제공되어 있습니다. 따라서 새 상태 그룹 또는 상태를 추가할 수 없습니다.

사용자 정의 컨트롤의 상태 그룹 정의

사용자 컨트롤이 없는 경우 프로젝트에서 새 사용자 컨트롤을 만들고 XAML 파일을 열어 편집할 수 있습니다.

자세한 내용은 프로젝트에서 새 사용자 컨트롤 만들기를 참조하십시오.

팁:

주 문서(대개 Page.xaml)의 상태 그룹을 정의할 수도 있습니다.
상태 패널에 사용자 정의 컨트롤에 있는 개체의 기본 모양이 표시됩니다. 필요할 때마다(예: 문서에 개체를 더 추가하려는 경우) Base를 선택하여 상태 기록 모드를 끝낼 수 있습니다.
상태에서 상태 그룹 추가 를 클릭합니다.

새 상태 그룹이 추가되고 이름이 강조 표시되어 새 이름을 입력할 수 있습니다.

이제 상태 그룹에 상태를 추가하거나 상태 그룹을 더 추가할 수 있습니다.

팁:
주 문서(대개 Page.xaml)의 상태 그룹을 정의할 수도 있습니다.

상태 그룹에 상태 추가

상태에서 상태 그룹 이름 옆의 상태 추가 를 클릭합니다.

상태 그룹에 새 상태가 추가되고 이름이 강조 표시되어 새 이름을 입력할 수 있습니다.

상태를 선택하여 상태 기록 모드로 설정합니다. 문서에서 개체의 모양에 대해 변경한 내용이 선택한 상태에 기록됩니다.

Dd185499.59996960-c66b-4be0-abc9-5509c79f3a5d(ko-kr,Expression.40).png

팁:
상태 및 상태 그룹을 지정할 때는 사용자 정의 컨트롤에 표시할 시각적 상태를 모두 고려한 다음 동시에 표시하지 않을 상태를 확인합니다. 상태 그룹에 있는 상태를 한 번에 하나씩만 표시할 수 있기 때문에 동시에 표시하지 않을 상태는 같은 상태 그룹에 나열되어야 합니다. 예를 들어 다음 그림은 카드 게임의 카드를 나타내는 사용자 정의 컨트롤을 보여 줍니다. MouseInteraction 과 SideDisplayed 의 두 상태 그룹이 정의되어 있습니다. MouseInteraction 상태 그룹에는 동시에 표시되지 않는 상태인 Click , MouseOver 및 Normal 상태가 포함되어 있습니다. SideDisplayed 상태 그룹에는 카드 앞면을 표시하는 상태( FaceUp )와 뒷면을 표시하는 상태( FaceDown )가 포함되어 있습니다. 카드 앞면을 표시하면서 동시에 마우스 포인터를 해당 카드 위로 가져갈 수 있으므로, 이들 상태는 서로 다른 상태 그룹에 속합니다.

상태 및 상태 그룹을 지정할 때는 사용자 정의 컨트롤에 표시할 시각적 상태를 모두 고려한 다음 동시에 표시하지 않을 상태를 확인합니다. 상태 그룹에 있는 상태를 한 번에 하나씩만 표시할 수 있기 때문에 동시에 표시하지 않을 상태는 같은 상태 그룹에 나열되어야 합니다. 예를 들어 다음 그림은 카드 게임의 카드를 나타내는 사용자 정의 컨트롤을 보여 줍니다. MouseInteraction 과 SideDisplayed 의 두 상태 그룹이 정의되어 있습니다. MouseInteraction 상태 그룹에는 동시에 표시되지 않는 상태인 Click , MouseOver 및 Normal 상태가 포함되어 있습니다. SideDisplayed 상태 그룹에는 카드 앞면을 표시하는 상태( FaceUp )와 뒷면을 표시하는 상태( FaceDown )가 포함되어 있습니다. 카드 앞면을 표시하면서 동시에 마우스 포인터를 해당 카드 위로 가져갈 수 있으므로, 이들 상태는 서로 다른 상태 그룹에 속합니다.

Dd185499.4fecf399-1962-4668-86e7-efe1a485cbc1(ko-kr,Expression.40).png

상태 간에 변경할 사용자 정의 컨트롤 전환 시간 설정

상태 그룹에 있는 임의의 두 상태 간에 변경할 사용자 정의 컨트롤의 전환 시간을 설정하려면 기본 전환 텍스트 상자 내부를 클릭하고 새 시간을 입력합니다. 그러면 사용자 정의 컨트롤이 상태 그룹에 있는 임의의 상태 간에 전환하는 데 걸리는 시간이 설정됩니다.
특정 전환의 기본 전환 시간을 다시 정의하려면 상태 옆의 전환 추가 를 클릭한 다음 나타나는 목록에서 특정 전환을 선택하십시오. 다음 그림에서 마우스 포인터로 강조 표시된 목록 항목은 "시작: Click 상태, 끝: 임의의 다른 상태"를 나타냅니다. 여기서 화살표는 "끝"에 해당하고 별표(*)는 "임의의 상태"에 해당합니다.

전환 지속 시간 텍스트 상자 내부를 클릭하고 새 시간을 입력합니다.

문제 해결

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

다음 단계

사용자 정의 컨트롤이 마우스 클릭에 응답하도록 만들 수 있습니다. 자세한 내용은 사용자 상호 작용에 대한 응답의 상태 변경을 참조하십시오.
단추 위로 마우스 포인터를 가져가면 단추가 회전하게 하는 것과 같은 애니메이션을 추가할 수 있습니다. 자세한 내용은 상태 변경 후 재생될 애니메이션 추가을 참조하십시오.
Expression 커뮤니티 웹 사이트 에서 제공되는 "작업 방법(How Do I?)" 비디오 자습서를 통해 상태 및 상태 그룹을 사용하는 실제 시나리오를 참조할 수 있습니다.

다음을 통해 공유