[C# WPF] Button Style Custom 방법

WPF의 기본적인 버튼 스타일을 Custom하는 방법에 대해 포스팅 할께요.

 

일반적으로 WPF의 기본 Form들은 마이크로소프트에서 제공하는 기본 스타일이 적용돼 있습니다. 이를 확인하려면 해당 마이크로소프트의(https://docs.microsoft.com/ko-kr/dotnet/framework/wpf/controls/control-styles-and-templates) 문서를 확인해서 여기에 해당하는 스타일을 수정해주셔야 합니다.

 

일반적으로 WPF는 MVVM 패턴에 최적화하기 위해 만들어졌다고 생각합니다. 간단하게 화면과 동작의 의존성을 최대한 분리했습니다. 종종 화면에서도 동작을 제어할 수 있지만 되도록 동작은 ViewModel에서 하는 것이 유지 보수 측면에서도 더 나을 것이라 생각합니다.

 

기본적으로 Style은 해당 Form안에서 바로 지정하는 방법과 Style 파일을 만들어서 관리하는 방법이 있습니다. 시행 착오를 겪으면서 제가 생각한 가장 좋은 방법은 App에 Base Style을 넣고 해당 View의 상단에서 해당 버튼들의 Style을 재정의하는 것이 코드의 가독성 및 나중에 코드 재활용 측면에서 가장 좋은 방법인 것 같습니다.

 

먼저 App.xaml에 해당 Style을 넣어주세요.

<Style x:Key="BasedButtonStyle" TargetType="{x:Type Button}">
  <Setter Property="Cursor" Value="Hand" />
  <Setter Property="Background" Value="Aquamarine" />
  <Setter Property="Foreground" Value="Black" />
  <Setter Property="HorizontalAlignment" Value="Stretch" />
  <Setter Property="HorizontalContentAlignment" Value="Center" />
  <Setter Property="VerticalAlignment" Value="Stretch" />
  <Setter Property="VerticalContentAlignment" Value="Center" />
  <Setter Property="BorderBrush" Value="Transparent" />
</Style>

 

이렇게 하시면 해당 Key값에 해당하는 Style을 쓰실 수 있습니다. 그 뒤 MainWindow에서는 다시 한번 스타일을 정의하면 됩니다.

<Window.Resources>
  <Style x:Key="ButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BasedButtonStyle}">
    <Setter Property="Width" Value="150" />
    <Setter Property="Height" Value="120" />
    <Setter Property="Background" Value="Coral" />
    <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Red" />
        <Setter Property="Foreground" Value="Yellow" />
      </Trigger>
    </Style.Triggers>
  </Style>
</Window.Resources>

 

Window.Resources에서 BasedOn이라는 속성이 기존 App에서 정의한 Style을 가져온 다음 다시 한번 스타일을 정의하는 방식입니다. 이렇게 하면 App에서 정의한 속성을 그대로 가져온 다음 변경하고 싶은 부분만 변경하면 됩니다.

 

화면으로 차이를 보고 싶으면 아래와 같이 버튼을 생성하면

좌측의 버튼과 우측의 버튼이 다르다는 것을 확인하실 수 있습니다.  :)

<Grid>
  <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    <Button Command="{Binding ButtonCmd}" Style="{StaticResource BasedButtonStyle}" Content="AppButton" />
    <Button Command="{Binding ButtonCmd}" Style="{StaticResource ButtonStyle}" Content="MainButton" />
  </StackPanel>
</Grid>

 

이렇게 각각의 Form들을 Custom하기 위해선 마이크로소프트에서 제공하는 문서를 보고 수정하시면 됩니다.

기본적인 애니메이션 효과나 그라데이션의 경우는 ControlTemplate을 이용하여 속성 자체를 재정의하면 해당 효과를 없앨 수 있습니다.