Create Buttons With Rounded Corner In WPF

Create Buttons With Rounded Corner In WPF

Mishel Shaji
Mishel Shaji

In this post, we'll learn to create buttons with rounded corners in WPF.

The default button template in WPF has a border. So, we have to change value of the CornerRadius property of the border in the button template.

Single Button With Rounded Corners

If you want rounded corners for a single button, modify the XAML code as shown below.

<Button Content="Button">
	<Button.Resources>
		<Style TargetType="Border">
			<Setter Property="CornerRadius" Value="10"></Setter>
		</Style>
	</Button.Resources>
</Button>

Apply to all Buttons

To apply rounded corners to all buttons in the application, add this style in the App.xaml file in the Application.Resources tag.

<Application.Resources>
    <Style TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="10"
                            Background="DarkGray"
                            BorderThickness="1">
                        <ContentPresenter
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Margin="{TemplateBinding Padding}" ></ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Here is a screenshot of the result.

Happy coding 👍