다음을 통해 공유


실습 정보: 단추에 애니메이션 추가

이 페이지는 WPF 프로젝트에만 적용됨

SimpleButton 스타일은 상태 변경 시 애니메이션 효과를 적용하는 대신 브러시 리소스를 설정합니다. Microsoft Expression Blend에서는 브러시 리소스에서 색으로 애니메이션 효과를 적용할 수 없습니다. 다음 절차에서는 속성 트리거를 사용하여 애니메이션 타임라인을 시작하는 다른 방법을 설명합니다.

단추에 애니메이션 효과 적용

  1. Expression Blend의 아트보드에 SimpleButton 개체를 그립니다.

    tip note팁:

    단순한 스타일 컨트롤은 자산 패널의 스타일 범주에 단순한 스타일에서 이용할 수 있습니다. 목록에서 원하는 단순한 스타일(simple style) 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.

  2. 개체 및 타임라인에서 단추를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다. SimpleStyles.xaml 리소스 사전을 변경하지 않으려면 현재 템플릿 편집 대신 복사본 편집을 클릭하여 새 템플릿을 만들고 문서에 저장할 수 있습니다.

    복사본 만들기에 대한 자세한 내용은 리소스 만들기를 참조하십시오.

    tip note팁:

    템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 범위를 {0}(으)로 되돌립니다.Cc294783.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,Expression.40).png를 클릭합니다. 이 옵션은 개체 및 타임라인 패널의 개체 트리 위에 있습니다.

    기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인 패널에서 템플릿을 편집하려는 템플릿의 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.

  3. 컨트롤 템플릿의 편집 범위에서 GridBorder 자식 개체를 삭제합니다.

  4. 자식 개체를 추가할 수 있도록 Grid 개체를 두 번 클릭하여 활성화합니다.

  5. 모눈에 RectangleCc294783.ae750268-92e8-403a-9e07-b662da4e9e1e(ko-kr,Expression.40).png을 그립니다.

  6. Rectangle 개체를 마우스 오른쪽 단추로 클릭하고 순서 지정을 가리킨 다음 맨 뒤로 보내기를 클릭하여 ContentPresenter 개체 뒤로 레이어를 지정합니다.

  7. 속성 패널의 브러시에서 사각형의 Fill 속성에 새 값을 설정합니다. 이렇게 하면 단추의 기본 색이 설정됩니다.

    tip note팁:

    원본 템플릿의 Border 자식 개체에서는 템플릿이 적용되는 컨트롤의 Background 속성에 템플릿의 Fill 속성을 바인딩하는 데 템플릿 바인딩을 사용했습니다 템플릿 전체에 개체 속성이 적용되도록 템플릿 바인딩을 사용할 수 있으므로 다른 배경 색상을 가지지만 동일한 템플릿을 계속 사용하는 여러 개의 단추를 만들 수 있습니다. 그러나 템플릿 바인딩된 속성에서 특정 색상으로 애니메이션 효과를 적용할 수는 없으므로 템플릿에서 Fill 속성에 기본 색을 설정합니다.

  8. 트리거 패널에서 IsMouseOver = True 트리거를 클릭하여 트리거 기록을 활성화합니다. 그런 다음 다음을 활성화할 경우 액션 옆에 있는 새 액션 추가Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ko-kr,Expression.40).png를 클릭하여 애니메이션 타임라인을 추가합니다. 단추 위로 포인터를 이동할 때 트리거하려는 타임라인이 없으면 타임라인 필요 창이 나타납니다. 확인을 클릭하여 새 타임라인을 만들고 기록을 시작합니다.

    tip note팁:

    트리거 및 액션을 모두 표시하려면 트리거 패널의 창을 조정해야 할 수 있습니다. 마우스를 사용하여 창의 크기를 조정합니다.

  9. 개체 및 타임라인 패널에서 플레이헤드 Cc294783.5626c9eb-40bb-450a-9ca1-3678e5abe429(ko-kr,Expression.40).png를 1초로 이동한 다음 속성 패널의 브러시에서 Fill 속성에 새 값을 설정합니다.

    Fill 속성을 변경하는 즉시 타임라인에 키 프레임 Cc294783.fa3c696d-5463-4000-8a6b-650fe6759bf7(ko-kr,Expression.40).png이 나타납니다. 0초에서 키 프레임을 설정하지 않아도 됩니다. 단추 위로 포인터를 이동하면 이전 채우기에서 1초에 설정된 채우기로 애니메이션 효과가 적용됩니다.

  10. 트리거 패널에서 IsMouseOver = True 트리거를 다시 클릭하여 애니메이션 타임라인을 종료하고 트리거 기록 모드로 돌아갑니다. 다음을 비활성화할 경우 액션 옆에 있는 새 액션 추가Cc294783.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ko-kr,Expression.40).png를 클릭합니다. 단추 밖으로 포인터를 이동하여 실행될 애니메이션 타임라인을 만들거나 선택합니다. 예를 들어 이전 타임라인을 사용할 수 있지만 타임라인에 대해 Stop 메서드를 선택합니다.

  11. 원하는 경우 트리거 패널에서 다른 상태에 대한 애니메이션 타임라인을 만들 수 있습니다.

  12. 응용 프로그램을 테스트(F5 키)하여 결과를 확인합니다.

참조 항목

작업

WPF 컨트롤에서 트리거 추가 또는 제거
간단한 애니메이션 만들기

개념

SimpleButton
트리거를 사용하여 WPF 컨트롤의 동작 정의

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.