Create Buttons With Rounded Corner In WPF
WPF .NET

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>

🚀 Pro-Tip: Don't Forget Hover and Click Effects!

When you completely override a ControlTemplate as shown above, you lose the default Windows hover and click animations. To bring your rounded buttons to life, add Triggers inside your global template to handle user interaction:

<ControlTemplate TargetType="Button">
    <Border x:Name="ButtonBorder" CornerRadius="8" Background="#007ACC" BorderThickness="0">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    
    <!-- Add interactivity -->
    <ControlTemplate.Triggers>
        <!-- Hover State -->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="ButtonBorder" Property="Background" Value="#1C97EA"/>
        </Trigger>
        <!-- Pressed State -->
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="ButtonBorder" Property="Background" Value="#005A9E"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Using these methods, you can easily shift your WPF application's UI from a legacy, boxy appearance to a sleek, modern design.

You might also like