[C#, WPF] 버튼 모서리 둥글게 만드는 방법 (원형 버튼)

 

C#, WPF 기본 버튼의 스타일은 모서리가 네모 모양인데, 이를 둥글게 또는 원형 버튼으로 만드는 방법에 대해서 알아보도록 할게요.

 

 

XAML에서 다음과 같이 코드를 수정하면 버튼의 모서리를 둥글게 만들 수 있어요.

 

- 일반 버튼

 

<Button Width="100" Height="30" Content="일반 버튼"/>

 

- 모서리가 둥근 버튼

 

<Button Width="100" Height="30" Content="모서리 둥근 버튼">
   <Button.Resources>
      <Style TargetType="Border">
         <Setter Property="CornerRadius" Value="5"/>
      </Style>
   </Button.Resources>
</Button>

 

- 타원형의 버튼

 

<Button Width="100" Height="30" Content="원 버튼">
   <Button.Resources>
      <Style TargetType="Border">
         <Setter Property="CornerRadius" Value="50"/>
      </Style>
   </Button.Resources>
</Button>

 

CornerRadius의 Value의 숫자가 높을 수록 모서리가 둥글해지는 것을 확인할 수 있으며, 이를 통해 원형 모양의 버튼도 만들 수 있어요.

 

- 전체 소스 코드

 

<StackPanel Orientation="Horizontal" Margin="20" VerticalAlignment="Top">
        <Button Width="100" Height="30" Content="일반 버튼"/>

        <Grid Width="10"/>

        <Button Width="100" Height="30" Content="모서리 둥근 버튼">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="5"/>
                </Style>
            </Button.Resources>
        </Button>


        <Grid Width="10"/>

        <Button Width="100" Height="30" Content="원 버튼">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="50"/>
                </Style>
            </Button.Resources>
        </Button>
</StackPanel>

---

스타일 적용 시에는 모든 버튼 또는 해당 스타일을 적용한 버튼에 일괄 적용도 가능해요.

 

아래 스타일 적용 시에는 마우스 포인트가 버튼 위에 올라가면 나오는 마우스 오버 효과 등은 별도로 정의를 해줘야 하는니 참고하세요. (버튼 클릭 이벤트 등은 정상적으로 동작)

 

- 스타일 코드

 

  <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border CornerRadius="5" BorderBrush="DarkGray" Background="{TemplateBinding Background}" BorderThickness="1">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="RoundButtonStyleBorderBrushRed" TargetType="Button">
            <Setter Property="Background" Value="LightGray"/>
            <Setter Property="Foreground" Value="Black" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border CornerRadius="5" BorderBrush="Red" Background="{TemplateBinding Background}" BorderThickness="1">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <StackPanel Orientation="Horizontal" Margin="20" VerticalAlignment="Top">
        <Button Width="100" Height="30" Content="일반 버튼"/>

        <Grid Width="10"/>
        <Button Width="100" Height="30" Content="스타일 적용"
                Style="{StaticResource RoundButtonStyleBorderBrushRed}"/>
    </StackPanel>

 

- 마우스 오버 색상 지정 코드

  (Background의 Value을 원하는 색상으로 변경)

 

<Style.Triggers>
   <Trigger Property="IsMouseOver" Value="True" >
      <Setter Property="Background" Value="#FF81C2E8" />
   </Trigger>
</Style.Triggers>

 

그럼 이상으로 포스팅을 마치며 오늘도 즐프하세요.