WPF 如何修改button圆角(经典)

2024-02-11码农

本人想设置Button为圆角，奈何搜索百度，找到的全是坑爹答案，现总结如下：

1. 需要添加button 的template.

2. 设置border的时候，必须要设置background, 否则会提示content 被多次使用。

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

我们只需要在XAML中给他添加几行代码就可以做成圆角形状。

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

属性解析：
BorderThickness ：边框的大小
BorderBrush ：边框的颜色
CornerRadius ：圆角的大小
Background ：背景颜色 "{TemplateBinding Background}" ：这个就是使用上面 <Button> 的Background属性值作为他的值
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/> ：文字垂直居中对齐

加个渐变色

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

如图：

项目实例：

把样式和空间模板放到资源中，然后去引用

<Windowx: 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 >< stylex:Key="dgButton"TargetType="Button" ><SetterProperty="FontSize"Value="40"/><SetterProperty="Content"Value="按钮"/><SetterProperty="Foreground"Value="White"/><SetterProperty="Background"><Setter.Value><LinearGradientBrushEndPoint="1,1"StartPoint="0,0"><GradientStopColor="#FFC564B8"Offset="0"/><GradientStopColor="#FFF57A7A"Offset="1"/></LinearGradientBrush></Setter.Value></Setter></ style ><ControlTemplatex:Key="buttonTemplate"TargetType="Button" ><BorderBorderThickness="1"CornerRadius="30"Background="{TemplateBinding Background}"><ContentPresenterVerticalAlignment="Center"HorizontalAlignment="Center"/></Border><ControlTemplate.Triggers ><TriggerProperty="Button.IsMouseOver"Value="True"><SetterProperty="Button.Background"Value="blue"/></Trigger ></ControlTemplate.Triggers ></ControlTemplate ></ResourceDictionary ></Window.Resources ><Grid><ButtonHeight="200"HorizontalAlignment="Center"Name="button1"VerticalAlignment="Center"Width="400" style ="{StaticResource dgButton}"Template="{StaticResource buttonTemplate}"/></Grid></Window>

鼠标放到按钮上以后按钮呈现蓝色