실습 정보: 롤오버 단추 만들기(Blend에서 WPF 지원)
.png "JJ170580.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(ko-kr,VS.120).png")
롤오버 효과는 단추 템플릿에서 사용자 상호 작용에 따라 단추의 모양을 변경하여 만들 수 있습니다. 애니메이션 타임라인을 트리거하거나 속성 변경을 트리거하여 롤오버 효과를 생성하는 대신, 다음 절차를 사용하여 각 단추의 상태를 나타내는 여러 Grid 패널을 만든 다음 각 Grid 패널의 Visibility 속성을 전환할 수 있습니다.
단추에 롤오버 효과 만들기
아트보드에 SimpleButton을 그립니다.
팁
자산 패널
.png "JJ170580.0d8b8d29-1af9-418f-8741-be3097d76eab(ko-kr,VS.120).png")
에 있는 스타일 범주의 단순한 스타일 아래에서 간단한 스타일 컨트롤을 사용할 수 있습니다.목록에서 원하는 단순한 스타일(simple style) 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.개체 및 타임라인 패널에서 Button 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 항목 편집을 클릭합니다. SimpleStyles.xaml 리소스 사전을 변경하지 않으려면 현재 템플릿 편집 대신 복사본 편집을 클릭하여 새 템플릿을 만들고 문서에 저장할 수 있습니다.
복사본 만들기에 대한 자세한 내용은 Blend에서 템플릿 만들기 또는 수정를 참조하십시오.
팁
템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 범위 반환
.png "JJ170580.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,VS.120).png")
를 클릭합니다. 이 옵션은 개체 및 타임라인패널의 개체 트리 위에 있습니다.기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인 패널에서 템플릿을 편집하려는 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.
컨트롤 템플릿의 편집 범위에서 Grid의 Border 자식 개체를 삭제합니다.
자식 개체를 추가할 수 있도록 Grid 개체를 클릭하여 활성화합니다.
도구 모음에서 Grid 컨트롤
.png "JJ170580.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ko-kr,VS.120).png")
세 개를 템플릿의 루트 Grid 개체에 추가합니다. 새 Grid 개체가 부모 Grid 개체를 채우도록 하려면 새 개체를 선택하고 개체 메뉴에서 자동 크기 조정을 가리킨 다음 Fill을 클릭합니다.ContentPresenter 개체를 마우스 오른쪽 단추로 클릭하고 순서 지정을 가리킨 다음 맨 앞으로 가져오기를 클릭하여 새 Grid 개체 앞으로 ContentPresenter 개체의 레이어를 지정합니다.
개체 및 타임라인 패널에서 새 모눈 개체를 각각 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 클릭하여 각 개체의 이름을 "Default", "Pressed" 및 "MouseOver"로 바꿉니다.
트리거 동작을 설정하려면 트리거당 하나의 모눈 개체만 표시되도록 해야 합니다. 예를 들어 트리거 패널에서 기본값을 선택한 상태에서 Ctrl 키를 누른 채로 Pressed 및 MouseOver 그리드 개체를 클릭하여 해당 개체를 선택합니다. 그런 다음 속성 패널의 모양에서 Visibility 속성을 Hidden으로 설정합니다.
트리거 패널에서 IsMouseOver = True를 클릭하고 Pressed 및 Default 모눈 개체를 선택한 다음 속성 패널의 모양에서 Visibility 속성을 Hidden으로 설정합니다. MouseOver 모눈 개체를 선택하고 Visibility 속성을 Visible로 설정합니다.
마지막으로 트리거 패널의 IsPressed = True를 선택한 상태에서 MouseOver 및 Default 모눈 개체를 선택한 다음 속성 패널의 모양에서 Visibility 속성을 Hidden으로 설정합니다. Pressed 모눈 개체를 선택하고 Visibility 속성을 Visible로 설정합니다.
이제 원하는 방법으로 모눈 개체를 디자인하여 트리거 패널에서 선택한 여러 조건에 따라 표시할 수 있습니다.
그리기 도구와 애니메이션 타임라인을 사용하여 단추에 고유한 동작을 만들 수 있습니다.
자세한 내용은 Blend의 Drawing 개체 및 개체에 애니메이션 적용를 참조하십시오.
개체 및 타임라인 패널에서 다른 그리드 개체 옆에 있는 숨기기/표시
.png "JJ170580.3df73f86-a06e-4df8-b696-261c23fac3cc(ko-kr,VS.120).png")
를 클릭하면 다른 그리드 개체를 표시하지 않고 그리드 개체 중 하나를 디자인할 수 있습니다.응용 프로그램을 테스트(F5 키)하여 결과를 확인합니다.