트리거 추가 또는 제거

트리거를 사용하여 애니메이션 타임라인을 시작하고 중지하거나 개체의 속성을 변경할 수 있습니다. 다음과 같은 두 가지 형식의 트리거가 있습니다.

• 속성 트리거 - 한 속성(예: IsPressed 속성)의 변경이 다른 속성의 즉각적인 변경을 트리거하거나 애니메이션 타임라인을 통해 점차적인 변경을 트리거합니다. 속성 트리거는 컨트롤의 스타일이나 템플릿에서 설정할 수 있습니다. 공용 컨트롤의 단순한 스타일(simple style)에서 속성 트리거를 설정하는 예는 단순한 스타일의 실습 정보 섹션에서 해당 항목을 참조하십시오.

• 이벤트 트리거 - 이벤트(예: 마우스 Click 이벤트)에서 애니메이션 타임라인을 트리거하는 메커니즘입니다. 이벤트 트리거는 아트보드의 모든 개체, 컨트롤의 스타일 또는 템플릿, 사용자 정의 컨트롤 또는 문서의 루트에서 설정할 수 있습니다. 공용 컨트롤의 단순한 스타일(simple style)에서 이벤트 트리거를 설정하는 예는 단순한 스타일의 실습 정보 섹션에서 해당 항목을 참조하십시오.

자세한 내용은 트리거 개요을 참조하십시오.

[!참고]

트리거는 해당 트리거가 조작하는 애니메이션 타임라인과 같은 범위에서 추가됩니다. 예를 들어 주 문서의 편집 범위에서는 단추의 컨트롤 템플릿에서 애니메이션 타임라인을 시작할 트리거를 설정할 수 없으며, 해당 단추가 문서에 있는 경우에도 마찬가지입니다. 그러나 같은 컨트롤 템플릿에서 애니메이션을 시작할 트리거를 컨트롤 템플릿 내에 설정할 수는 있습니다. 문서에 추가되는 사용자 정의 컨트롤에 포함된 애니메이션인 경우에도 마찬가지입니다.

속성 트리거 추가

1. 개체 및 타임라인에서 스타일이나 템플릿을 수정할 컨트롤을 선택합니다.

2. 개체 메뉴에서 다음 작업 중 하나를 수행합니다.

   • 컨트롤의 스타일을 편집하려면 스타일 편집을 가리킨 다음 복사본 편집을 클릭합니다.

   • 컨트롤의 템플릿을 편집하려면 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 복사본 편집을 클릭합니다.

   Style 리소스 만들기 대화 상자가 나타납니다.

   [!참고]

   스타일과 템플릿에 대한 자세한 내용은 컨트롤 개요의 스타일 및 템플릿 단원을 참조하십시오. 스타일과 템플릿을 비교, 정리한 표가 나와 있습니다.

3. 확인을 클릭하여 대화 상자를 종료하고 스타일이나 템플릿을 열어 편집합니다.

   [!참고]

   이 절차는 속성 트리거 설정에만 초점을 맞춰 매우 간단하게 정리된 것입니다. 스타일과 템플릿의 차이점에 대한 자세한 내용은 컨트롤 개요의 스타일 및 템플릿 단원을 참조하십시오. Style 리소스 만들기 대화 상자의 옵션에 대한 자세한 내용은 스타일 리소스 만들기 및 컨트롤 템플릿 만들기 또는 편집을 참조하십시오.

4. 트리거 아래에는 IsEnabled=True와 같이 컨트롤 상태에 대해 설정된 일부 속성 트리거가 이미 있을 수 있습니다. 선택한 트리거에 적합한 상태가 표시되지 않으면 속성 트리거 추가 단추를 클릭합니다.

   기본 속성 트리거(MinWidth=0)가 편집할 수 있도록 선택된 상태로 추가됩니다. 또한 아트보드에서 트리거 기록 모드가 시작됩니다.

5. 트리거를 활성화할 속성 및 값을 수정하려면 다음 경우 활성화됨 아래의 드롭다운 화살표를 클릭합니다. 예를 들어 확인란 컨트롤의 템플릿을 수정하려면 대상 요소.IsChecked=true를 선택하여 확인란을 선택할 때 트리거가 활성화되도록 할 수 있습니다.

   이제 트리거가 활성화될 때 발생할 액션을 지정할 수 있습니다.

   [!참고]

   대상 요소의 속성을 템플릿에 있는 요소의 이름으로 변경하려면 먼저 개체 및 타임라인에서 요소를 선택해야 합니다.

6. 트리거가 활성화될 때 속성이 변경되도록 하려면 개체 및 타임라인에서 개체를 선택하고 속성 패널에서 속성을 변경하면 됩니다. 트리거 기록 모드가 설정된 동안 수행할 수 있습니다.

   속성 변경 내용이 활성 상태인 경우 속성 아래에 나타납니다.

7. 트리거가 활성화될 때 애니메이션 타임라인을 제어하려면 다음을 활성화할 경우 액션 옆에 있는 새 액션 추가 단추를 클릭합니다.

   • 선택할 수 있는 기존 애니메이션 타임라인이 없으면 타임라인 필요 대화 상자가 열려 새 타임라인을 만들지 여부를 묻습니다. 확인을 클릭한 다음 키 프레임을 설정하고 개체를 수정하여 애니메이션을 만듭니다.

   • 기존 애니메이션 타임라인이 있는 경우에는 기존 타임라인과 새 타임라인을 만드는 옵션이 들어 있는 드롭다운 목록이 표시됩니다.

   타임라인이 다음을 활성화할 경우 액션 아래에 나타나고 Begin으로 설정됩니다.

8. 스타일 또는 템플릿의 편집 범위를 종료하려면 상위 범위로 이동 단추를 클릭합니다. F5 키를 눌러 응용 프로그램을 실행해서 새 트리거를 테스트합니다.

맨 위로 이동

이벤트 트리거 추가

1. 개체 및 타임라인에서, 상호 작용할 때 트리거를 활성화할 개체를 선택합니다. 예를 들어 사용자가 텍스트 상자 위로 마우스 포인터를 이동할 때 트리거가 활성화되도록 하려면 텍스트 상자를 선택합니다.

2. 트리거에서 이벤트 트리거 추가 단추를 클릭합니다.

   • 기본 트리거(When Window.Loaded is raised)가 추가됩니다.

3. 드롭다운 화살표를 클릭하여 트리거를 활성화할 이벤트를 수정합니다. 예를 들어 사용자가 텍스트 상자 위로 마우스 포인터를 이동할 때 트리거가 활성화되도록 하려면 When Window.Loaded is raised를 When textBox.MouseMove is raised로 변경합니다.

   [!참고]

   Window의 이벤트를 템플릿에 있는 요소의 이름으로 변경하려면 먼저 개체 및 타임라인에서 요소를 선택해야 합니다.

4. 트리거가 활성화될 때 애니메이션 타임라인을 제어하려면 When checkBox.MouseMove is raised 옆에 있는 새 액션 추가 단추를 클릭합니다.

   • 선택할 수 있는 기존 애니메이션 타임라인이 없으면 타임라인 필요 대화 상자가 열려 새 타임라인을 만들지 여부를 묻습니다. 확인을 클릭한 다음 키 프레임을 설정하고 개체를 수정하여 애니메이션을 만듭니다.

   • 기존 애니메이션 타임라인이 있는 경우에는 기존 타임라인과 새 타임라인을 만드는 옵션이 들어 있는 드롭다운 목록이 표시됩니다.

   타임라인이 When textBox.MouseMove is raised 아래에 나타나고 Begin으로 설정되어 있습니다.

5. F5 키를 눌러 응용 프로그램을 실행해서 새 트리거를 테스트합니다.

맨 위로 이동

트리거 제거

1. 트리거에서 제거할 트리거를 선택합니다.

   [!참고]

   제거할 트리거가 스타일이나 컨트롤 템플릿에 있으면 해당 스타일이나 템플릿 편집 모드에 있는지 확인하십시오.

2. 트리거 삭제 단추를 클릭합니다.

3. 트리거가 목록에서 제거됩니다.

맨 위로 이동