실습 정보: 단추에 애니메이션 추가
.png "This page applies to WPF projects only")
SimpleButton은 상태 변경 시 애니메이션 효과를 적용하는 대신 브러시 리소스를 설정합니다. Microsoft Expression Blend에서는 브러시 리소스에서 색으로 애니메이션 효과를 적용할 수 없습니다. 다음 절차에서는 속성 트리거를 사용하여 애니메이션 타임라인을 시작하는 다른 방법을 설명합니다.
단추에 애니메이션 효과 적용
Expression Blend의 아트보드에 SimpleButton 개체를 그립니다.
.gif "팁")
팁:단순한 스타일 컨트롤은 자산 패널의 스타일 범주에 단순한 스타일에서 이용할 수 있습니다. 목록에서 원하는 단순한 스타일(simple style) 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.
개체 및 타임라인에서 단추를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다. SimpleStyles.xaml 리소스 사전을 변경하지 않으려면 현재 템플릿 편집 대신 복사본 편집을 클릭하여 새 템플릿을 만들고 문서에 저장할 수 있습니다.
복사본 만들기에 대한 자세한 내용은 리소스 만들기를 참조하십시오.
팁:템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 상위 범위로 이동
.png "Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png")
을 클릭합니다. 개체 및 타임라인 패널의 개체 트리 위에 있습니다.기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인 패널에서 템플릿을 편집하려는 템플릿의 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.
컨트롤 템플릿의 편집 범위에서 Grid의 Border 자식 개체를 삭제합니다.
자식 개체를 추가할 수 있도록 Grid 개체를 두 번 클릭하여 활성화합니다.
모눈에 사각형
.png "Cc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(KO-KR,Expression.30).png")
을 그립니다.Rectangle 개체를 마우스 오른쪽 단추로 클릭하고 순서 지정을 가리킨 다음 맨 뒤로 보내기를 클릭하여 ContentPresenter 개체 뒤로 레이어를 지정합니다.
속성 패널의 브러시에서 사각형의 Fill 속성에 새 값을 설정합니다. 이렇게 하면 단추의 기본 색이 설정됩니다.
팁:원본 템플릿의 Border 자식 개체에서는 템플릿이 적용되는 컨트롤의 Background 속성에 템플릿의 Fill 속성을 바인딩하는 데 템플릿 바인딩을 사용했습니다 템플릿 전체에 개체 속성이 적용되도록 템플릿 바인딩을 사용할 수 있으므로 다른 배경 색상을 가지지만 동일한 템플릿을 계속 사용하는 여러 개의 단추를 만들 수 있습니다. 그러나 템플릿 바인딩된 속성에서 특정 색상으로 애니메이션 효과를 적용할 수는 없으므로 템플릿에서 Fill 속성에 기본 색을 설정합니다.
트리거 패널에서 IsMouseOver = True 트리거를 클릭하여 트리거 기록을 활성화합니다. 그런 다음 다음을 활성화할 경우 액션 옆에 있는 새 액션 추가
.png "Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(KO-KR,Expression.30).png")
를 클릭하여 애니메이션 타임라인을 추가합니다. 단추 위로 포인터를 이동할 때 트리거하려는 타임라인이 없으면 타임라인 필요 창이 나타납니다. 확인을 클릭하여 새 타임라인을 만들고 기록을 시작합니다.팁:트리거 및 액션을 모두 표시하려면 트리거 패널의 창을 조정해야 할 수 있습니다. 마우스를 사용하여 창의 크기를 조정합니다.
개체 및 타임라인 패널에서 플레이헤드
.png "Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(KO-KR,Expression.30).png")
를 1초로 이동한 다음 속성 패널의 브러시에서 Fill 속성에 새 값을 설정합니다.Fill 속성을 변경하는 즉시 타임라인에 키 프레임
.png "Cc294783.fa3c696d-5463-4000-8a6b-650fe6759bf7(KO-KR,Expression.30).png")
이 나타납니다. 0초에서 키 프레임을 설정하지 않아도 됩니다. 단추 위로 포인터를 이동하면 이전 채우기에서 1초에 설정된 채우기로 애니메이션 효과가 적용됩니다.트리거 패널에서 IsMouseOver = True 트리거를 다시 클릭하여 애니메이션 타임라인을 종료하고 트리거 기록 모드로 돌아갑니다. 다음을 비활성화할 경우 액션 옆에 있는 새 액션 추가
를 클릭합니다. 단추 밖으로 포인터를 이동하여 실행될 애니메이션 타임라인을 만들거나 선택합니다. 예를 들어 이전 타임라인을 사용할 수 있지만 타임라인에 대해 Stop 메서드를 선택합니다.원하는 경우 트리거 패널에서 다른 상태에 대한 애니메이션 타임라인을 만들 수 있습니다.
응용 프로그램을 테스트(F5 키)하여 결과를 확인합니다.