다음을 통해 공유

실습 정보: 롤오버 단추 만들기

  • 아티클

Cc294737.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(ko-kr,Expression.40).png

롤오버 효과는 단추 템플릿에서 사용자 상호 작용에 따라 단추의 모양을 변경하여 만들 수 있습니다. 애니메이션 타임라인을 트리거하거나 속성 변경을 트리거하여 롤오버 효과를 생성하는 대신, 다음 절차를 사용하여 각 단추의 상태를 나타내는 여러 Grid 패널을 만든 다음 각 Grid 패널의 Visibility 속성을 전환할 수 있습니다.

단추에 롤오버 효과 만들기

  1. 아트보드에 SimpleButton 을 그립니다.

    tip note팁:

    단순한 스타일 컨트롤은 자산 패널 Cc294737.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,Expression.40).png의 스타일 범주에 있는 단순한 스타일에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.

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

    복사본 만들기에 대한 자세한 내용은 템플릿 만들기 또는 수정를 참조하십시오.

    tip note팁:

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

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

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

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

  5. 도구 모음에서 Grid 컨트롤 Cc294737.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ko-kr,Expression.40).png 세 개를 템플릿의 루트 Grid 개체에 추가합니다. 새 Grid 개체가 부모 Grid 개체를 채우도록 하려면 새 개체를 선택하고 개체 메뉴에서 자동 크기 조정을 가리킨 다음 Fill 을 클릭합니다.

  6. ContentPresenter 개체를 마우스 오른쪽 단추로 클릭하고 순서 지정을 가리킨 다음 맨 앞으로 가져오기를 클릭하여 새 Grid 개체 앞으로 ContentPresenter 개체의 레이어를 지정합니다.

  7. 개체 및 타임라인 패널에서 새 모눈 개체를 각각 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 클릭하여 각 개체의 이름을 "Default", "Pressed" 및 "MouseOver"로 바꿉니다.

  8. 트리거 동작을 설정하려면 트리거당 하나의 모눈 개체만 표시되도록 해야 합니다. 예를 들어 트리거 패널에서 기본값을 선택한 상태에서 Ctrl 키를 누른 채로 Pressed 및 MouseOver 모눈 개체를 클릭하여 해당 개체를 선택합니다. 그런 다음 속성 패널의 모양에서 Visibility 속성을 Hidden 으로 설정합니다.

  9. 트리거 패널에서 IsMouseOver = True 를 클릭하고 Pressed 및 Default 모눈 개체를 선택한 다음 속성 패널의 모양에서 Visibility 속성을 Hidden 으로 설정합니다. MouseOver 모눈 개체를 선택하고 Visibility 속성을 Visible 로 설정합니다.

  10. 마지막으로 트리거 패널의 IsPressed = True 를 선택한 상태에서 MouseOver 및 Default 모눈 개체를 선택한 다음 속성 패널의 모양에서 Visibility 속성을 Hidden 으로 설정합니다. Pressed 모눈 개체를 선택하고 Visibility 속성을 Visible 로 설정합니다.

  11. 이제 원하는 방법으로 모눈 개체를 디자인하여 트리거 패널에서 선택한 여러 조건에 따라 표시할 수 있습니다.

    그리기 도구와 애니메이션 타임라인을 사용하여 단추에 고유한 동작을 만들 수 있습니다.

    자세한 내용은 개체 그리기 및 개체에 애니메이션 적용을 참조하십시오.

    개체 및 타임라인 패널에서 다른 모눈 개체 옆에 있는 숨기기/표시Cc294737.3df73f86-a06e-4df8-b696-261c23fac3cc(ko-kr,Expression.40).png를 클릭하면 다른 모눈 개체를 표시하지 않고 모눈 개체 중 하나를 디자인할 수 있습니다.

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

참조 항목

개념

SimpleButton

Copyright ⓒ 2011 by Microsoft Corporation. All rights reserved.