[WPF] Material Design Button 종류 및 Style 적용-1부

Material Design 라이브러리는 아래와 같이 다양한 Button을 제공한다. 버튼의 종류에는 무엇이 있으며 각각의 버튼 기능은 어떻게 다른지 확인해보자. 버튼의 기본, Light, Dark, Accent 색상은 ResourceDiretory에 정의된 색상에 따른다. 색상 정의하는 방법은 WPF Material Design 설치 하는 법 포스팅의 4.1~4.3에 있는 색상 정의하는 법을 참고하도록 한다.

FloatingActionButton이란 화면 가장 위에 떠다니는 원형 버튼을 의미한다. 주로 가장 주요한 작업을 수행하기 위한 버튼으로 사용되며, 아이콘 모양으로 표시한다. 메인 기능에 사용하기 때문에 다수의 FloatingActionButton(FAB)을 사용하는 것을 권장하지 않는다. Button의 Style 속성에 스타일 이름을 정의하고, 아이콘 이름은 Material Design 아이콘 사이트를 참고하여 사용한다.

이미지	스타일 이름
	MaterialDesignFloatingActionMiniLightButton
	MaterialDesignFloatingActionMiniButton
	MaterialDesignFloatingActionMiniDarkButton
	MaterialDesignFloatingActionMiniAccentButton
	MaterialDesignFloatingActionLightButton
	MaterialDesignFloatingActionButton
	MaterialDesignFloatingActionDarkButton
	MaterialDesignFloatingActionAccentButton

<Button Style="{StaticResource 스타일 이름}">
  <materialDesign:PackIcon Kind="아이콘 이름"
    Height="{StaticResource IconSize}"
    Width="{StaticResource IconSize}" />
</Button>

RaisedButton이란 버튼에 입체 효과(그림자, 그라데이션등)를 주어 사용자가 버튼임을 인식할 수 있도록 한 버튼이다. 버튼을 눌렀을 때 버튼이 들어가는 느낌이 나고, 버튼을 떼었을 때 버튼이 나오는 느낌이 난다.

이미지	스타일 이름
	MaterialDesignRaisedLightButton
	MaterialDesignRaisedButton
	MaterialDesignRaisedDarkButton
	MaterialDesignRaisedAccentButton

<Button Style="{StaticResource 스타일 이름}"
  Width="{StaticResource ButtonWidth}"
  Content="_LIGHT" />

Badge가 달린 Button이란 버튼 위에 작은 아이콘이나 텍스트를 표시하는 버튼이다. 예를 들어 메세지 알림 갯수나 장바구니 갯수를 표현할 때 주로 사용된다. Badged를 먼저 선언 한 후에 Button을 선언하고, Badge속성에 글 또는 아이콘은 아래의 표를 참고하여 삽입한다.

이미지	Badge 속성
	Badge=”3″
	Badge=”{materialDesign:PackIcon Heart}”

<materialDesign:Badged Badge="글 또는 아이콘 이름">
  <Button Content="MAIL" />
</materialDesign:Badged>

IconButton이란 버튼을 아이콘으로 나타낸 버튼이다. 버튼을 배치할 공간이 충분하지 않을 때 아이콘 버튼이 사용되며, 아이콘 모양만 보았을 때 사용자는 어떠한 기능인지 이해할 수 있어야 한다. Kind 속성에 입력되는 아이콘 이름은 Material Design 아이콘 사이트를 참고하여 사용한다.

이미지	스타일 이름
	MaterialDesignIconButton

<Button Style="{StaticResource 스타일 이름}">
  <materialDesign:PackIcon Kind="아이콘 이름" />
</Button>

Material Design에서 Ripple속성이란 Button을 눌렀을 때 원형으로 퍼져나가는 속성을 말한다. 사용자는 버튼을 눌렀음을 알 수 있고 버튼 누른 위치도 알 수 있다. 눌렀을 때의 Ripple 효과 색상은 materialDesign:RippleAssist.Feedback속성에서 컬러를 정의하고 반투명으로 표시된다.

<Button materialDesign:RippleAssist.Feedback="#DD000000" Content="CUSTOM RIPPLE" />

RepeatButton이란 버튼을 누르는 동안 계속 이벤트가 발생하는 버튼이다. 예를 들어 버튼을 계속 누르는 동안 음량을 높이거나 낮추는 경우에 사용된다. 버튼 컨트롤 이름이 RepeatButton이고, 버튼의 모양은 일반 버튼 모양과 같다.

이미지	컨트롤 이름
	RepeatButton

<RepeatButton Width="{StaticResource ButtonWidth}" Content="REPEAT" />

FlatButton이란 버튼에 입체 효과(그림자, 그라데이션등)가 없는 단순한 버튼이다. 기본 요소인 배경 색, 글자 폰트등을 변경하여 사용한다.

이미지	스타일 이름
	MaterialDesignFlatButton
	MaterialDesignFlatLightBgButton
	MaterialDesignFlatMidBgButton
	MaterialDesignFlatDarkBgButton
	MaterialDesignFlatAccentBgButton

<Button Style="{StaticResource 스타일 이름}" Content="Okay" />

OutlineButton이란 버튼에 외각 테두리가 있는 버튼이다.

이미지	스타일 이름
	MaterialDesignOutlinedButton

<Button Style="{StaticResource 스타일 이름}" Content="LEARN MORE" />