문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

실습 정보: 효과를 사용하여 단추 스타일 지정(Blend에서 WPF 지원)

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

Blend for Visual Studio에서는 속성 트리거를 사용하여 사용자 상호 작용에 따라 단추의 모양을 변경할 뿐만 아니라 각 상태에 효과를 적용할 수도 있습니다.

단추에 효과 만들기

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

    팁

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

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

    복사본 만들기에 대한 자세한 내용은 Blend에서 개체 복사, 잘라내기, 붙여넣기 또는 삭제를 참조하십시오.

    팁

    템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 개체 및 타임라인 패널의 개체 트리 위에 있는 JJ170893.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,VS.120).png범위 반환 을 클릭합니다.

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

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

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

  5. 모눈에 Rectangle 개체를 그린 다음 속성 패널의 브러시 아래에서 Fill 속성을 노랑으로 설정합니다.

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

  7. 사각형의 왼쪽 위 모퉁이 바깥쪽에 있는 두 개의 핸들 중 하나 위로 포인터를 이동하면 나타나는 표시기(Adorner)JJ170893.8ff4c5e0-3b7f-49d7-97cb-ad373c3a7fe7(ko-kr,VS.120).png를 사용하거나 속성 패널의 모양에서 RadiusXRadiusY 속성을 사용하여 Rectangle 개체의 가장자리를 둥글게 만듭니다.

  8. 자산 패널의 효과 범주에서 DropShadowEffect 개체를 Rectangle 개체로 끕니다.

    그림자가 자식 개체로 Rectangle 개체에 추가됩니다.

  9. 개체 및 타임라인 패널에서 DropShadowEffect를 선택한 다음 속성 패널에서 효과의 속성을 조정합니다. ShadowDepth 속성을 20으로 설정합니다.

  10. 트리거 패널에서 IsMouseOver = True 트리거를 클릭하여 트리거 기록을 활성화합니다. 속성 패널에서 ShadowDepth 속성을 25로 설정합니다.

    트리거 패널에서 활성 상태인 경우 속성 아래에 새 줄이 나타나 단추 위로 마우스를 이동할 때 발생할 속성 변경을 반영합니다.

    팁

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

  11. 트리거 패널에서 IsPressed = True 트리거를 클릭하여 트리거 기록을 활성화합니다. 속성 패널에서 ShadowDepth 속성을 10로 설정합니다.

    트리거 패널에서 활성 상태인 경우 속성 아래에 새 줄이 나타나 실행 중인 응용 프로그램에서 단추를 클릭할 때 발생하는 속성 변경을 반영합니다.

  12. 트리거 패널의 기본값을 클릭하여 트리거 기록을 해제합니다.

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

표시: