WPF 修改 Button 圆角的四种经典实现方案

时间：2026-08-27 | 作者：游戏探长 | 阅读：0

前言

在使用 WPF 开发桌面应用时，UI 的美观性是提升用户体验的重要一环。而 Button 作为最常用的控件之一，其默认样式往往无法满足现代设计需求，尤其是圆角按钮已成为主流设计趋势。

然而，许多初学者在尝试设置 WPF Button 为圆角时，常常会遇到各种问题，例如搜索到的教程不完整、代码无效，甚至导致布局错误。

本文基于实际开发经验，系统性地总结了如何正确实现 WPF 中 Button 的圆角效果，并提供从基础实现到项目级复用的完整解决方案，帮助开发者避开常见“坑点”，高效实现美观的圆角按钮。

为什么不能直接设置 CornerRadius？

WPF的Button控件并未直接将CornerRadius属性暴露出来。这是由于Button属于复合控件，其外观是由ControlTemplate来进行定义的。所以，如果想要对其形状进行修改（比如实现圆角效果），就必须通过重写它的Template来达成。

方法一：直接在 Button 中设置 Template（快速实现）

最直接的方法是在 XAML 中为 Button 添加 ControlTemplate，通过 Border 包裹 ContentPresenter 并设置 CornerRadius 实现圆角。

注意：在 Border 中必须显式设置 Background，否则会提示“Content 被多次使用”的错误。

<Button Grid.Row="3" Grid.Column="2" Content="取消" Margin="30,40,200,40" >
    <Button.Template >
        <ControlTemplate TargetType="{x:Type Button}" >
            <Border BorderBrush="{TemplateBinding Control.BorderBrush}" 
                    BorderThickness="1" 
                    CornerRadius="7,7,7,7">
                <Border.Background>#FFDDDDDDBorder.Background>
                <ContentPresenter Content="{TemplateBinding ContentControl.Content}" 
                                  HorizontalAlignment="Center" 
                                  VerticalAlignment="Center" />
            Border>
        ControlTemplate>
    Button.Template>
Button>

方法二：简化写法，使用 TemplateBinding 绑定背景

更灵活的方式是使用 {TemplateBinding Background}，这样可以在 Button 上直接设置 Background，而无需在 Template 内硬编码。

<Button x:Name="button" Content="按钮" FontSize="40" BorderThickness="0" 
        HorizontalAlignment="Left" Margin="25,58,0,0" VerticalAlignment="Top" 
        Width="472" Height="200" Foreground="White">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border BorderThickness="1" 
                    BorderBrush="Black" 
                    CornerRadius="30" 
                    Background="{TemplateBinding Background}">
                <ContentPresenter VerticalAlignment="Center" 
                                  HorizontalAlignment="Center"/>
            Border>
        ControlTemplate>
    Button.Template>
Button>

属性解析

BorderThickness：边框的大小
BorderBrush：边框的颜色
CornerRadius：圆角的大小（值越大，圆角越明显）
Background="{TemplateBinding Background}"：使用 Button 自身的 Background 属性值作为背景
：确保按钮内容（如文本）居中显示

方法三：添加渐变色背景

WPF 支持丰富的画刷，我们可以为按钮添加线性渐变背景，使界面更具视觉吸引力。

<Button x:Name="button" Content="按钮" FontSize="40" BorderThickness="0" 
        HorizontalAlignment="Left" Margin="25,58,0,0" VerticalAlignment="Top" 
        Width="472" Height="200" Foreground="White">
    <Button.Background>
        <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="#FFC564B8" Offset="0"/>
            <GradientStop Color="#FFF57A7A" Offset="1"/>
        LinearGradientBrush>
    Button.Background>
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border BorderThickness="1" CornerRadius="30" 
                    Background="{TemplateBinding Background}">
                <ContentPresenter VerticalAlignment="Center" 
                                  HorizontalAlignment="Center"/>
            Border>
        ControlTemplate>
    Button.Template>
Button>

方法四：项目级复用 —— 将样式与模板放入资源字典

在实际项目中，我们通常会将按钮样式和模板提取到资源中，实现统一管理和复用。

<Window x:Class="WpfApp18.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:WpfApp18"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources >
        <ResourceDictionary >
            
            <Style x:Key="dgButton" TargetType="Button" >
                <Setter Property="FontSize" Value="40"/>
                <Setter Property="Content" Value="按钮"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                            <GradientStop Color="#FFC564B8" Offset="0"/>
                            <GradientStop Color="#FFF57A7A" Offset="1"/>
                        LinearGradientBrush>
                    Setter.Value>
                Setter>
            
            
            
            <ControlTemplate x:Key="buttonTemplate" TargetType="Button" >
                <Border BorderThickness="1" CornerRadius="30" 
                        Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" 
                                      HorizontalAlignment="Center"/>
                Border>
                <ControlTemplate.Triggers >
                    
                    <Trigger Property="Button.IsMouseOver" Value="True">
                        <Setter Property="Button.Background" Value="blue"/>
                    
                
            
        
    
    
    <Grid>
        <Button Height="200" HorizontalAlignment="Center" Name="button1" 
                VerticalAlignment="Center" Width="400" 
                Style="{StaticResource dgButton}" 
                Template="{StaticResource buttonTemplate}"/>
    Grid>
Window>