[WPF/XAML] 둥근 테두리 버튼 만들기

 

 

비주얼 스튜디오 버전 16.11.7

대상 프레임 워크 .NET Core 3.1

기준으로 작성된 글입니다.

 

---

 

 

 

버튼의 리소스를 이용해 모서리를 둥글게 만들 수 있습니다.

Value에 적절한 값을 넣어 사용하면 됩니다.

 

<Button>
	<Button.Resources>
    	<Style TargetType="Border">
        	<Setter Property="CornerRadius" Value="숫자"/>
        </Style>
    </Button.Resources>
</Button>

 

 

 

 

아래는 Value 값을 바꾸어가며 테스트하는 코드입니다.

 

 

 

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>


        <!--둥근 테두리 버튼 (0)-->
        <Button Grid.Column="1" Content="둥근 테두리 버튼 (10)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="10"/>
                </Style>
            </Button.Resources>
        </Button>


        <!--둥근 테두리 버튼 (10)-->
        <Button Content="둥근 테두리 버튼 (0)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="0"/>
                </Style>
            </Button.Resources>
        </Button>

        
        <!--둥근 테두리 버튼 (20)-->
        <Button Grid.Column="2" Content="둥근 테두리 버튼 (20)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="20"/>
                </Style>
            </Button.Resources>
        </Button>


        <!--둥근 테두리 버튼 (30)-->
        <Button Grid.Row="1" Content="둥근 테두리 버튼 (30)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="30"/>
                </Style>
            </Button.Resources>
        </Button>

        
        <!--둥근 테두리 버튼 (50)-->
        <Button Grid.Column="1" Grid.Row="1" Content="둥근 테두리 버튼 (50)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="50"/>
                </Style>
            </Button.Resources>
        </Button>

        <!--둥근 테두리 버튼 (80)-->
        <Button Grid.Column="2" Grid.Row="1" Content="둥근 테두리 버튼 (80)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="80"/>
                </Style>
            </Button.Resources>
        </Button>


        <!--둥근 테두리 버튼 (120)-->
        <Button Grid.Row="2" Content="둥근 테두리 버튼 (120)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="100"/>
                </Style>
            </Button.Resources>
        </Button>


        <!--둥근 테두리 버튼 (150)-->
        <Button Grid.Column="1" Grid.Row="2" Content="둥근 테두리 버튼 (150)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="150"/>
                </Style>
            </Button.Resources>
        </Button>


        <!--둥근 테두리 버튼 (200)-->
        <Button Grid.Column="2" Grid.Row="2" Content="둥근 테두리 버튼 (200)" Margin="10">
            <Button.Resources>
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="200"/>
                </Style>
            </Button.Resources>
        </Button>

    </Grid>
</Window>

 

 

 

---

 

공부한 내용을 복습/기록하기 위해 작성한 글이므로 내용에 오류가 있을 수 있습니다.