Share via

SimpleButton

  • 아티클

This page applies to WPF projects only

단추는 Click 이벤트에 응답하는 콘텐츠 컨트롤입니다. Microsoft Expression Blend에서는 단추를 두 번 클릭한 후 요소를 그려 단추에 콘텐츠를 넣을 수 있습니다. 단추에 여러 요소를 넣으려면 먼저 Grid나 Canvas 같은 레이아웃 패널을 추가해야 합니다. 기본적으로 단추에도 텍스트가 표시되며, 단추를 마우스 오른쪽 단추로 클릭한 다음 텍스트 편집을 클릭하여 텍스트를 편집할 수 있습니다.

SimpleButton 컨트롤의 아트보드 보기

Cc295207.de21bfee-f104-48ff-9f8a-b6cbf92a9fa7(KO-KR,Expression.30).png

컨트롤 템플릿 분석

SimpleButton 컨트롤 템플릿은 다음 항목으로 구성됩니다.

  • Grid 레이아웃 패널 단추 내에 여러 자식 요소를 넣는 데 사용됩니다. 또한 Grid를 사용하면 템플릿에 더 많은 요소를 손쉽게 추가할 수 있습니다. 예를 들어 루트 요소가 Border인 경우 다른 요소를 추가하려고 하면 Border 요소는 자식을 하나만 가질 수 있기 때문에 ContentPresenter 요소가 다른 요소로 바뀝니다.

  • Border 요소 템플릿이 적용되는 단추 컨트롤의 BorderThickness 속성에 템플릿 바인딩할 수 있는 BorderThickness 속성이 들어 있어서 사용됩니다.

  • ContentPresenter 템플릿이 적용되는 단추의 Content 속성을 표시하는 데 사용됩니다. 단추의 콘텐츠를 표시하려면 이 요소가 있어야 합니다.

    개체 보기: SimpleButton 컨트롤의 기본 파트(템플릿)

    Cc295207.10b2afc9-ea71-4980-bbc6-5a78e0a4d2c4(KO-KR,Expression.30).png

속성 트리거 사용

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 트리거 패널의 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 SimpleButton 템플릿에서 IsMouseOver 속성이 True가 되면 Border 요소의 배경색이 MouseOverBrush 리소스로 변경됩니다.

브러시 사용

SimpleButton 템플릿에서는 SimpleStyles.xaml 리소스 사전의 다음과 같은 브러시 리소스가 사용됩니다.

  • Background 속성은 활성화된 트리거가 없는 경우에는 NormalBrush를, IsMouseOver가 True인 경우에는 MouseOverBrush를, IsPressed가 True인 경우에는 PressedBrush를, IsEnabled가 False인 경우에는 DisabledBackgroundBrush를 사용하여 설정됩니다.

  • Border 속성은 활성화된 트리거가 없는 경우에는 NormalBorderBrush를, IsKeyboardFocused가 True인 경우에는 DefaultBorderBrush를, IsPressed가 True인 경우에는 PressedBorderBrush를, IsEnabled가 False인 경우에는 DisabledBorderBrush를 사용하여 설정됩니다.

  • Foreground 속성은 IsEnabled가 False인 경우 DisabledForegroundBrush를 사용하여 설정됩니다.

모범 사례 및 디자인 지침

  • 일반적으로 디자이너가 컨트롤에 시각적 요소를 더 추가할 수 있도록 하려면 템플릿의 루트로 Grid 컨트롤을 사용합니다. 기본적으로 Expression Blend에서는 Grid 컨트롤과 같은 레이아웃 패널을 찾아 활성화함으로써 아트보드에 추가되는 새 요소가 해당 레이아웃 패널의 자식 요소가 되도록 합니다.

  • 속성 트리거는 단추 클릭과 같은 사용자 액션에 따라 컨트롤의 모양을 변경하는 데 사용됩니다. 하나의 속성 트리거(예: IsPressed 상태의 경우)와 동일한 작업을 수행하려면 이벤트 트리거는 두 개(예: MouseDown 및 MouseUp 이벤트)가 필요하기 때문에 속성 트리거가 이벤트 트리거보다 기본 설정됩니다. 그러나 이벤트 트리거를 사용하면 보다 복잡한 컨트롤의 애니메이션 타임라인을 시작할 수 있습니다.

  • 일반적으로는 IsMouseOver, IsPressed 및 IsEnabled(False) 상태에서 브러시나 시각적 변경을 설정하려고 합니다. 컨트롤 주위에 점선을 표시하는 데 일반적으로 사용되는 IsKeyboardFocused 상태를 사용할 수도 있습니다.

참조

작업

실습 정보: 효과를 사용하여 단추 스타일 지정

실습 정보: 단추에 애니메이션 추가

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