스토리보드의 실행 시점 제어

아티클
10/11/2017

다음과 같은 방식으로 Microsoft Expression Blend 응용 프로그램에서 스토리보드가 실행되는 시점을 제어할 수 있습니다.

스토리보드를 제어하기 위해 사용할 개체로 동작을 끕니다. ControlStoryboardAction 동작을 사용하거나, 상태를 사용하여 애니메이션을 만드는 경우 GoToStateAction 동작을 사용할 수 있습니다. 자세한 내용은 개체에 동작 추가를 참조하십시오.
단추 클릭과 같은 이벤트가 발생하거나, 스토리보드가 컨트롤 템플릿에 있는 경우 속성이 변경되면 스토리보드를 실행하는 트리거를 만듭니다.

[!참고]

Microsoft Silverlight 프로젝트에서는 트리거를 사용할 수 없습니다.
스토리보드의 Begin 메서드를 호출하는 코드 숨김 파일에 이벤트 처리기 메서드를 만듭니다.

이러한 메서드를 사용하여 스토리보드를 중지, 일시 중지, 다시 시작, 제거하거나 스토리보드의 끝으로 건너뛰는 시점을 제어할 수도 있습니다.

작업하고 있는 범위에 따라 메서드가 약간씩 달라집니다.

[!참고]

다음 절차에서는 비주얼 애니메이션이 있는 스토리보드를 참조하지만 오디오 또는 비디오 스토리보드에도 이 절차를 적용할 수 있습니다. 자세한 내용은 활성 문서에 오디오 또는 비디오 파일 삽입을 참조하십시오.

문서의 주 범위의 스토리보드

스토리보드가 문서의 주 기능이고 문서의 주 범위에 있는 컨트롤과 사용자 간의 상호 작용을 통해 트리거될 경우 문서의 주 범위에 스토리보드를 만듭니다.

이벤트 처리기 메서드를 사용하여 문서의 주 범위에서 스토리보드 제어

열린 스토리보드를 모두 닫습니다. 자세한 내용은 스토리보드 열기 또는 닫기를 참조하십시오.
WPF 프로젝트로 작업하고 있는 경우 스토리보드를 만들 때 Window.Loaded 이벤트에 대해 생성된 기본 트리거를 삭제합니다. 자세한 내용은 트리거 추가 또는 제거를 참조하십시오.
개체 및 타임라인 패널에서 상호 작용할 때 스토리보드를 실행할 개체를 선택합니다. 예를 들어 사용자가 텍스트 블록 위로 포인터를 이동할 때 스토리보드가 실행되도록 하려면 텍스트 블록(TextBlock)을 선택합니다.
속성 패널에서 이벤트 를 클릭합니다. 선택한 요소에 사용할 수 있는 모든 이벤트 목록이 사전순으로 나타납니다.

팁:

이벤트에 대한 간단한 설명을 보려면 이벤트 이름 위로 포인터를 이동합니다. 이벤트를 설명하는 도구 설명이 표시됩니다.
프로그래밍 논리를 추가할 이벤트를 찾습니다(예: MouseEnter 이벤트).
다음 두 가지 방법으로 빈 이벤트 처리기 메서드를 생성할 수 있습니다.
- 이벤트 이름 옆에 있는 텍스트 블록을 두 번 클릭합니다. Expression Blend에서 이벤트 처리기 메서드의 기본 이름이 생성되어 텍스트 블록에 입력되고, 빈 메서드에 대한 코드가 생성됩니다.
- 이벤트 이름 옆에 있는 텍스트 블록에 이름을 입력한 다음 Enter 키를 누르거나 다른 위치를 클릭하여 텍스트 블록 밖으로 포커스를 이동합니다. 이벤트 메서드 이름은 문자로 시작해야 합니다. 코드 숨김 파일에 메서드 이름이 없으면 Expression Blend에서 빈 메서드에 대한 코드를 생성하고 입력된 이름을 사용합니다.
Expression Blend에 코드 숨김 파일이 열리며 빈 이벤트 처리기 메소드에 이 파일이 복사됩니다.
```
private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{

}
```

팁:
이벤트에 대한 간단한 설명을 보려면 이벤트 이름 위로 포인터를 이동합니다. 이벤트를 설명하는 도구 설명이 표시됩니다.

코드 숨김 파일이 열리고 이벤트 처리기 메서드가 붙여 넣어진 상태가 되면, 이벤트 처리기 메서드 안에 다음과 같이 굵게 표시된 코드 줄을 추가할 수 있습니다.

private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
    Storyboard myStoryboard;   
    myStoryboard = (Storyboard)this.Resources["Storyboard1"];   
    myStoryboard.Begin(this);   
}

Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
    Dim myStoryboard As New Storyboard   
    myStoryboard = CType(Me.Resources("Storyboard1"), Storyboard)   
    myStoryboard.Begin(Me)   
End Sub

파일을 모두 저장한 다음 F5 키를 눌러 응용 프로그램을 빌드하고 테스트합니다. 예를 들어 실행 중인 응용 프로그램에서 텍스트 블록 위로 마우스를 이동하여 애니메이션이 시작되는지 확인합니다.

[!참고]

텍스트 블록 위로 마우스를 다시 이동할 때 애니메이션이 시작점으로 돌아가지 않으면 0초 표시에서 키 프레임을 설정하지 않았기 때문일 수 있습니다.

이벤트 트리거를 사용하여 문서의 주 범위에서 스토리보드 제어(WPF만 해당)

Expression Blend에서는 Windows Presentation Foundation (WPF) 프로젝트의 주 문서 범위에서 스토리보드를 만들면 응용 프로그램 창이 로드될 때 스토리보드를 실행하는 새 트리거가 자동으로 만들어집니다. 이 트리거는 트리거 패널에서 볼 수 있습니다.

스토리보드를 만들 때 Expression Blend에서 설정되는 기본 트리거

Cc295328.daa5d5de-713b-4d58-9f98-4ef65b217e9d(KO-KR,Expression.30).png

이 트리거를 유지하면 응용 프로그램을 시작하는 즉시 스토리보드가 실행됩니다. 다음 절차를 사용하여 이 동작을 수정할 수도 있습니다.

열린 스토리보드를 모두 닫습니다. 자세한 내용은 스토리보드 열기 또는 닫기를 참조하십시오.
스토리보드를 만들 때 Window.Loaded 이벤트의 기본 트리거가 만들어졌는데 응용 프로그램을 시작할 때 스토리보드가 실행되지 않도록 하려면 트리거 패널에서 Window.Loaded를 선택합니다. 그렇지 않으면 이벤트 트리거 추가 를 클릭하여 새 기본 이벤트 트리거를 만듭니다.
개체 및 타임라인 패널에서 상호 작용할 때 스토리보드를 실행할 개체를 선택합니다. 예를 들어 사용자가 텍스트 블록 위로 포인터를 이동할 때 스토리보드가 실행되도록 하려면 텍스트 블록(TextBlock)을 선택합니다.
트리거 패널 드롭다운 메뉴를 사용하여 애니메이션을 트리거하는 이벤트(Window.Loaded)를 변경합니다. 예를 들어 When Window.Loaded is raised를 When textblock.MouseEnter is raised로 변경합니다.
이벤트가 트리거되면 발생하는 액션을 정의합니다. 나열된 액션이 없으면 새 액션 추가 를 클릭합니다. 액션은 Storyboard1 같은 스토리보드의 이름으로 설정되어야 하며 Begin 메서드를 호출하고 있어야 합니다. 스토리보드에 사용할 수 있는 메서드를 임의로 선택할 수도 있습니다. 자세한 내용은 트리거 추가 또는 제거를 참조하십시오.

컨트롤 템플릿과 스타일의 스토리보드

컨트롤 템플릿을 수정할 때 속성 트리거나 이벤트 트리거에 액션을 추가하는 경우와 같이 Microsoft Expression Blend에서 스토리보드가 자동으로 만들어지는 경우도 있습니다. 스타일 및 템플릿을 사용하는 방법에 대한 자세한 내용은 템플릿을 지원하는 컨트롤의 스타일 지정을 참조하십시오.

[!참고]

다음 절차는 WPF 프로젝트에 해당되지만 Silverlight 프로젝트의 스토리보드를 제어하려면 상태를 사용해야 합니다. 자세한 내용은 사용자 상호 작용에 대한 응답의 상태 변경 및 상태 변경 후 재생될 애니메이션 추가를 참조하십시오.

템플릿의 범위에서 스토리보드 제어

다음 방법 중 하나를 사용하여 수정할 스타일 또는 템플릿을 엽니다.

[!참고]

스타일 또는 템플릿의 사용 여부를 파악하려면 템플릿을 지원하는 컨트롤의 스타일 지정를 참조하십시오.

[!참고]

패스 개체와 같은 일부 개체에서는 템플릿을 사용할 수 없습니다. Button 또는 RadioButton과 같은 컨트롤에서도 템플릿을 사용할 수 없습니다.
- 새 템플릿을 만들려면 아트보드나 개체 및 타임라인 패널에서 개체를 선택한 다음 개체 메뉴에서 템플릿 편집을 클릭하고 복사본 편집을 선택합니다. Style 리소스 만들기 대화 상자가 나타납니다. 리소스를 정의할 위치를 선택한 다음 확인을 클릭합니다. 자세한 내용은 스타일 만들기를 참조하십시오.
- 새 스타일을 만들려면 아트보드나 개체 및 타임라인 패널에서 개체를 선택한 다음 개체 메뉴에서 스타일 편집을 클릭하고 복사본 편집을 선택합니다. Style 리소스 만들기 대화 상자가 나타납니다. 리소스를 정의할 위치를 선택한 다음 확인을 클릭합니다. 자세한 내용은 스타일 만들기를 참조하십시오.
- 기존 템플릿을 열려면 리소스 패널에서 스타일 옆에 있는 리소스 편집 을 클릭한 다음 개체 및 타임라인 패널에서 Style 요소를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 현재 편집을 선택합니다. 또는 사용자 지정 스타일이 이미 적용된 컨트롤을 선택한 다음 개체 메뉴에서 템플릿 편집을 클릭하고 현재 편집을 선택합니다.
- 기존 스타일을 열려면 리소스 패널에서 스타일 옆에 있는 리소스 편집 을 클릭합니다. 또는 사용자 지정 스타일이 이미 적용된 컨트롤을 선택한 다음 개체 메뉴에서 스타일 편집을 클릭하고 현재 편집을 선택합니다.
- Expression Blend에서 제공되는 단순한 스타일(simple styles) 중 하나를 수정하려면 도구 패널에서 자산 을 클릭하고 스타일 범주를 클릭한 다음 Simple Styles 리소스 사전을 클릭하고 스타일이 미리 지정된 컨트롤을 선택한 다음 아트보드에 그려 리소스 패널에 Simple Styles.xaml 리소스 사전을 표시한 다음 앞에서 설명한 옵션 중 하나를 사용하여 단순한 스타일 또는 템플릿을 엽니다. 현재 프로젝트의 Simple Styles.xaml 리소스 사전을 수정하면 현재 프로젝트에서 다른 프로젝트로 Simple Styles.xaml 파일을 복사하지 않는 한 다른 프로젝트의 Simple Styles.xaml 리소스 사전에 해당 변경 내용이 적용되지 않습니다.
스타일 또는 템플릿의 편집 범위에서 아트보드의 맨 위에 새롭게 표시되는 Expression Blend의 이동 경로 탐색 막대를 확인합니다.

템플릿 편집 모드가 선택된 이동 경로 탐색 막대

이동 경로 탐색 막대에 있는 단추를 클릭하여 템플릿 편집 모드, 스타일 편집 모드 및 선택한 개체의 개체 편집 범위 사이를 간편하게 이동할 수 있습니다. 사용자 지정 스타일 또는 템플릿이 적용된 모든 선택 개체에 대해 이동 경로 탐색 막대가 나타납니다.
개체 및 타임라인 패널에서 새로 만들기를 클릭합니다.

Storyboard 리소스 만들기 대화 상자가 나타납니다.
이름을 입력하고 확인을 클릭합니다. Storyboard 리소스 만들기 대화 상자가 닫히고 Expression Blend가 타임라인 기록 모드로 전환됩니다.
편집 중인 스타일이나 템플릿에서 개체에만 적용되는 몇 가지 애니메이션을 만듭니다.

[!참고]

수정하고 있는 스타일이나 템플릿 외부의 개체에는 애니메이션 효과를 적용할 수 없습니다. 그러나 스타일이나 템플릿의 기존 개체에는 애니메이션 효과를 적용할 수 있습니다. 또한 템플릿을 수정할 때 Template 노드의 항목을 Grid 같은 레이아웃 패널로 그룹화한 다음 애니메이션 효과를 적용할 수 있도록 모눈에 개체를 더 추가할 수 있습니다.

새 스토리보드를 트리거하려면 다음 작업 중 하나를 수행합니다.

기존 속성 트리거에 스토리보드를 추가하려면 트리거 패널에서 트리거를 선택한 다음 트리거 패널의 아래쪽에서, 스토리보드를 실행할 시점(트리거 활성 시 또는 트리거 비활성 시)에 따라 다음을 활성화할 경우 액션 또는 다음을 비활성화할 경우 액션 옆에 있는 새 액션 추가 를 클릭합니다. 트리거가 활성화될 때 실행되는 액션으로 새 스토리보드가 자동으로 추가됩니다.
새 속성 트리거에 스토리보드를 추가하려면 속성 트리거 추가 를 클릭한 다음 트리거 패널의 아래쪽에서 트리거를 기본 대상 요소.IsCancel = False에서 원하는 속성 및 값(예: 대상 요소.IsPressed = True)으로 변경하고 새 액션 추가 를 클릭합니다. 이벤트가 발생할 때 실행되는 액션으로 새 스토리보드가 자동으로 추가됩니다.
새 이벤트 트리거에 스토리보드를 추가하려면 이벤트 트리거 추가 를 클릭한 다음 트리거 패널의 아래쪽에서 트리거를 기본 When 대상 요소.Loaded is raised에서 원하는 이벤트(예: When 대상 요소.Click is raised)로 변경하고 새 액션 추가 를 클릭합니다. 이벤트가 발생할 때 실행되는 액션으로 새 스토리보드가 자동으로 추가됩니다.

중요:
템플릿을 (일반적인 방식으로) 변경하기 전에 항상 기본값 트리거를 선택하여 트리거 기록 모드를 해제해야 합니다. 그렇지 않으면 실수로 기존 트리거를 변경하게 될 수 있습니다.

주의:
스타일 및 템플릿을 수정할 때 스타일이나 템플릿이 적용되는 시스템 컨트롤의 기능이 손상될 수 있습니다. 템플릿을 지원하는 컨트롤의 스타일 지정의 모범 사례 섹션에서 이러한 기능 손상을 피하기 위한 주의 사항을 확인할 수 있습니다.

파일을 모두 저장한 다음 F5 키를 눌러 응용 프로그램을 빌드하고 테스트합니다.

실습 정보: 단추에 애니메이션 추가에서 템플릿 수정에 대한 좀 더 구체적인 예를 참조하십시오.

사용자 정의 컨트롤의 스토리보드

사용자 정의 컨트롤에 스토리보드를 추가하면 해당 개체에 애니메이션 효과를 적용하는 개체와 스토리보드를 하나의 XAML 문서와 코드 숨김 파일로 캡슐화할 수 있습니다. 그런 다음 다른 문서에서 사용자 정의 컨트롤을 여러 차례 인스턴스화할 수 있습니다.

사용자 정의 컨트롤에 포함된 스토리보드 제어

편집할 사용자 정의 컨트롤을 만들고 열려면 다음 작업 중 하나를 수행합니다.
- 기존 개체에서 사용자 정의 컨트롤 만들기.
- 파일 메뉴에서 새 항목을 선택합니다. 새 항목 대화 상자에서 UserControl을 선택하고 이름을 설정한 다음 확인을 클릭합니다.
애니메이션 스토리보드를 만들고 사용자 정의 컨트롤의 일부 개체에 애니메이션 효과를 적용합니다.
이제 "문서의 주 범위의 스토리보드"에서 설명한 작업 중 하나를 사용하여 이벤트 트리거 또는 이벤트 처리기 메서드를 통해 애니메이션을 제어할 수 있습니다.

[!참고]

UserControl로 만들기 명령을 사용하여 개체를 사용자 정의 컨트롤로 변환하기 전에 개체에 이벤트 트리거를 만드는 경우, 사용자 정의 컨트롤의 범위에서 이벤트 트리거를 다시 만들어야 합니다. 사용자 정의 컨트롤의 범위에서 사용할 수 있는 이벤트와 주 문서의 범위에서 사용할 수 있는 이벤트가 다르기 때문입니다. 예를 들어 Storyboard1.Begin과 같은 액션을 사용하여 When UserControl.MouseDown is raised와 같은 이벤트를 구성할 수 있습니다. UserControl로 만들기 명령을 사용하면 리소스와 애니메이션이 새 컨트롤로 리팩터링되므로 다시 만들 필요가 없습니다.

[!참고]

UserControl로 만들기 명령을 사용하여 개체를 사용자 정의 컨트롤로 변환하기 전에 개체의 이벤트 처리기 메서드를 만드는 경우에는 주 문서의 코드 숨김 파일에 있는 이벤트 처리기 메서드 코드가 사용자 정의 컨트롤의 코드 숨김 파일로 이동하지 않습니다. 같은 이벤트 처리기 메서드를 사용하는 다른 개체가 있을 수 있기 때문입니다. 이벤트 처리기 메서드를 복사하여 해당 사용자 정의 컨트롤의 코드 숨김 파일에 붙여 넣을 수 있습니다.

참조

작업

스토리보드 만들기, 수정 또는 삭제

간단한 애니메이션 만들기

다음을 통해 공유