SimpleButton

아티클
10/11/2017

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

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

SimpleButton 컨트롤의 아트보드 보기

Cc295207.de21bfee-f104-48ff-9f8a-b6cbf92a9fa7(ko-kr,Expression.40).png

컨트롤 템플릿 분석

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

Grid 레이아웃 패널 단추 내에 여러 자식 개체를 넣을 때 사용됩니다. 또한 Grid 를 사용하면 템플릿에 더 많은 개체를 쉽게 추가할 수 있습니다. 예를 들어 루트 개체가 Border 이고 다른 개체를 추가하려는 경우 Border 는 자식을 하나만 가질 수 있기 때문에 ContentPresenter 개체가 다른 개체로 바뀝니다.
Border 개체 이 템플릿이 적용되는 단추 컨트롤의 BorderThickness 속성에 템플릿 바인딩할 수 있는 BorderThickness 속성이 들어 있기 때문에 사용됩니다.
ContentPresenter 이 템플릿이 적용되는 단추의 Content 속성을 표시하는데 사용됩니다. 단추의 콘텐츠를 표시하려면 이 개체가 있어야 합니다.

속성 트리거 사용

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 트리거 패널의 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 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 상태를 사용할 수도 있습니다.

참조 항목

작업

실습 정보: 효과를 사용하여 단추 스타일 지정
실습 정보: 단추에 애니메이션 추가
실습 정보: 롤오버 단추 만들기

다음을 통해 공유