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

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

1. 需要添加button 的template.

2. 设置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>#FFDDDDDD</Border.Background>

 <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>

</Border> </ControlTemplate> </Button.Template> </Button>

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

<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属性值作为他的值
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>：文字垂直居中对齐

加个渐变色

<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> </Style > <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"/> </Trigger > </ControlTemplate.Triggers > </ControlTemplate > </ResourceDictionary > </Window.Resources > <Grid>

 <Button Height="200" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center" Width="400" Style ="{StaticResource dgButton}" Template="{StaticResource buttonTemplate}"/>

</Grid></Window>

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

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。