실습 정보: 효과를 사용하여 단추 스타일 지정
.png "This page applies to WPF projects only")
Microsoft Expression Blend에서는 속성 트리거를 사용하여 사용자 상호 작용에 따라 단추의 모양을 변경할 뿐만 아니라 각 상태에 효과를 적용할 수도 있습니다.
단추에 효과 만들기
Expression Blend의 아트보드에 SimpleButton 개체를 그립니다.
.gif "팁")
팁:단순한 스타일 컨트롤은 자산 패널의 스타일 범주에 있는 단순한 스타일에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.
개체 및 타임라인에서 단추를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다. SimpleStyles.xaml 리소스 사전을 변경하지 않으려면 현재 템플릿 편집 대신 복사본 편집을 클릭하여 새 템플릿을 만들고 문서에 저장할 수 있습니다.
복사본 만들기에 대한 자세한 내용은 리소스 만들기를 참조하십시오.
팁:템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 상위 범위로 이동
.png "Cc295324.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(KO-KR,Expression.30).png")
을 클릭합니다. 개체 및 타임라인 패널의 개체 트리 위에 있습니다.기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인 패널에서 템플릿을 편집하려는 개체를 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 가리킨 다음 현재 템플릿 편집을 클릭합니다.
컨트롤 템플릿의 편집 범위에서 Grid 개체의 Border 자식 개체를 삭제합니다.
자식 개체를 추가할 수 있도록 Grid 개체를 두 번 클릭하여 활성화합니다.
모눈에 Rectangle 개체를 그린 다음 속성 패널의 브러시에서 Fill 속성을 노랑으로 설정합니다.
Rectangle 개체를 마우스 오른쪽 단추로 클릭하고 순서 지정을 가리킨 다음 맨 뒤로 보내기를 클릭하여 ContentPresenter 개체 뒤로 레이어를 지정합니다.
사각형의 왼쪽 위 모퉁이 바깥쪽에 있는 두 개의 핸들 중 하나 위로 포인터를 이동하면 나타나는 표시기
.png "Cc295324.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(KO-KR,Expression.30).png")
를 사용하거나 속성 패널의 모양에서 RadiusX 및 RadiusY 속성을 사용하여 Rectangle 개체의 가장자리를 둥글게 만듭니다.자산 패널의 효과 범주에서 DropShadowEffect 개체를 Rectangle 개체 위에 끌어 놓습니다.
그림자가 자식 개체로서 Rectangle 개체에 추가됩니다.
개체 및 타임라인 패널에서 DropShadowEffect를 선택한 상태로 속성 패널에서 효과의 속성을 조정합니다. ShadowDepth 속성을 20으로 설정합니다.
트리거 패널에서 IsMouseOver = True 트리거를 클릭하여 트리거 기록을 활성화합니다. 속성 패널에서 ShadowDepth 속성을 25로 설정합니다.
트리거 패널에서 활성 상태인 경우 속성 아래에 새 줄이 나타나 단추 위로 마우스를 이동할 때 발생할 속성 변경을 반영합니다.
팁:트리거 및 작업을 모두 표시하려면 트리거 패널의 창을 조정해야 할 수 있습니다. 마우스를 사용하여 창의 크기를 조정합니다.
트리거 패널에서 IsMouseOver = True 트리거를 클릭하여 트리거 기록을 활성화합니다. 속성 패널에서 ShadowDepth 속성을 10으로 설정합니다.
트리거 패널에서 활성 상태인 경우 속성 아래에 새 줄이 나타나 실행 중인 응용 프로그램에서 단추를 클릭할 때 발생하는 속성 변경을 반영합니다.
트리거 패널의 기본값을 클릭하여 트리거 기록을 해제합니다.
응용 프로그램을 테스트(F5 키)하여 작용 중인 효과를 확인합니다.