다음을 통해 공유

실습 정보: 비트맵 효과를 사용하여 단추 만들기

  • 아티클

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

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

단추에 비트맵 효과 만들기

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

    Cc295324.alert_tip(ko-kr,Expression.10).gif팁:

    단순한 스타일(simple style) 컨트롤은 자산 라이브러리Cc295324.0224cabd-5da1-4e01-bddd-4a647401a098(ko-kr,Expression.10).png에 있는 컨트롤 탭의 Simple Styles 범주에서 사용할 수 있습니다. 목록에서 원하는 단순한 스타일(simple style) 컨트롤을 선택한 후 아트보드에 그릴 수 있습니다.

  2. 개체 및 타임라인 아래 표시된 단추를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다. SimpleStyles.xaml 리소스 사전을 변경하지 않으려면 템플릿 편집 대신 복사본 편집을 클릭하여 새 템플릿을 만들고 문서에 저장할 수 있습니다. 복사본 만들기에 대한 자세한 내용은 리소스 만들기를 참조하십시오.

    Cc295324.alert_tip(ko-kr,Expression.10).gif팁:

    템플릿 편집 모드를 종료하고 문서 범위로 돌아가려면 상위 범위로 이동Cc295324.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,Expression.10).png 단추를 클릭합니다. 이 단추는 인터랙션 패널의 요소 트리 위에 있습니다.

    기존 템플릿의 템플릿 편집 모드로 돌아가려면 개체 및 타임라인에서 템플릿을 편집하려는 요소를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집을 클릭합니다.

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

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

  5. 모눈에 사각형(Rectangle)을 그린 다음 속성 패널의 브러시에서 Fill 속성을 노랑으로 설정합니다.

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

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

  8. Rectangle을 계속 선택한 상태에서 속성 패널의 모양 아래 고급Cc295324.81e110f1-4068-4299-957d-0693cea95088(ko-kr,Expression.10).png 섹션에서 BitmapEffect 속성을 찾습니다. 드롭다운 화살표를 클릭한 다음 3D 가장자리를 클릭합니다. BevelWidth 속성은 그대로 5로 설정하지만 다른 3D 가장자리 속성은 원하는 효과를 얻을 때까지 변경합니다.

  9. 인터랙션 패널의 트리거에서 IsMouseOver = True 트리거를 클릭하여 트리거 기록을 활성화합니다. 속성 패널에서 BitmapEffect 속성 옆에 있는 드롭다운 화살표를 다시 클릭하고 3D 가장자리를 클릭한 다음 BevelWidth 속성을 10으로 변경합니다.

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

    Cc295324.alert_tip(ko-kr,Expression.10).gif팁:

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

  10. 인터랙션 패널의 트리거에서 IsPressed = True 트리거를 클릭하여 트리거 기록을 활성화한 다음 속성 패널에서 BitmapEffect 속성 옆에 있는 드롭다운 화살표를 다시 클릭하고 3D 가장자리를 클릭한 다음 BevelWidth 속성을 2로 변경합니다.

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

  11. 인터랙션 패널의 트리거에서 기본값을 클릭하여 트리거 기록을 해제합니다.

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

    Cc295324.alert_tip(ko-kr,Expression.10).gif팁:

    비트맵 효과는 하드웨어 가속 기능을 활용하지 않으므로 명시적 값을 설정하는 것이 가장 좋습니다. 이벤트 트리거 및 애니메이션 타임라인을 사용하여 값에 애니메이션 효과를 적용하지 마십시오.

참조

개념

SimpleButton

트리거 추가 또는 제거

트리거 개요

개체에 비트맵 효과 추가