[C#/WPF] 버튼 모서리 둥글게 만들기

이번 포스팅에서는 버튼(Button)의 모서리를 둥글게 만드는 법에 대해 써보도록 하겠습니다.

 

WPF에서 버튼을 처음 생성시, 초기 모서리값은 0으로 각진 형태입니다. 이때, 모서리를 둥글게 해주는 속성이 있는데요 바로 'CornerRadius' 입니다. 이 속성은 속성창에서는 찾아볼 수 없기 때문에 xaml에서 코드로 작성해서 값을 설정해주어야 합니다.

---

우선, 버튼을 하나 생성해줍니다.

이제 xaml에서 해당 버튼에 대한 CornerRadius 속성값을 설정해주도록 하겠습니다.

 

<Button>에 <Button.Resources> 태그를 추가하고 태그 안에 TargetType을 모서리로 지정해줍니다. 그리고 Property를 CornerRadius로 설정하고 값을 입력해주면

아래 사진과 같이 모서리가 둥글어진 것을 확인할 수 있습니다.

이렇게 하나의 버튼에 대한 속성을 변경할 때는 해당 버튼에 바로 CornerRadius의 속성을 추가해주면 되지만, 만약 버튼 여러개에 같은 속성값을 주기 위해 모든 버튼에 ConerRadius에 대한 코드를 쓰게 된다면

위 사진처럼  동일한 코드의 반복돼서 쓰여져 코드의 길이가 꽤 늘어난 것을 확인할 수 있습니다.

 

그래서 같은 속성을 가진 도구를 여러개 생성하고 싶으면 해당 도구의 디자인을 미리 설정해주면 아래 사진처럼 보다 깔끔하게 코드를 작성할 수 있습니다.

추가로 CornerRadius뿐만 아니라 다른 속성값도 설정해보았습니다.

 

+ 마찬가지로 ToggleButton도 ' Style TargetType = "{ x: ToggleButton }" '로만 수정해주면 Button 같이 동일하게 적용할 수 있습니다.

 

작성한 xaml 전체 코드입니다.

<Window x:Class="Example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Example"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Width" Value="180"/>
            <Setter Property="Height" Value="160"/>
            <Setter Property="FontFamily" Value="/Example;component/Font/#KNPS Kkomi"/>
            <Setter Property="FontSize" Value="35"/>
            <Setter Property="Background" Value="#FFDFE4E0"/>
            <Style.Resources>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="CornerRadius" Value="20"/>
                </Style>
            </Style.Resources>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Button1" HorizontalAlignment="Left" Margin="191,30,0,0" VerticalAlignment="Top"/>
        <Button Content="Button2" HorizontalAlignment="Left" Margin="191,234,0,0" VerticalAlignment="Top"/>
        <Button Content="Button3" HorizontalAlignment="Left" Margin="440,30,0,0" VerticalAlignment="Top"/>
        <Button Content="Button4" HorizontalAlignment="Left" Margin="440,234,0,0" VerticalAlignment="Top"/>
    </Grid>
</Window>