WPF 圆角按钮
本文通过改写Button 控件默认模板，实现自定义样式
一、创建Button 控件
提示：根据需要自行调整大小和位置
<Button Content="Button" HorizontalAlignment="Left" Margin="134,86,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.819,-4.886"/>
二、生成默认模板
1. 选中控件，右击选择“编辑模板”->“编辑副本”，并确定
2. 完成后会生成如下代码
提示：可根据下面备注自行修改，按钮的背景，鼠标移入，鼠标按下的填充色
<UserControl.Resources>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/> <!--按钮静态时背景颜色-->
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/> <!--按钮静态时边框颜色-->
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/> <!--鼠标移入时背景颜色-->
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/> <!--鼠标移入时边框颜色-->
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/> <!--鼠标按下时背景颜色-->
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/> <!--鼠标按下时边框颜色-->
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/> <!--按钮不使用时背景颜色-->
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/> <!--按钮不使用时边框颜色-->
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/> <!--按钮不使用时文字颜色-->
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/> <!--边框宽度，设置为0 即：无边框-->
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<!--触发器：根据依赖属性的值去控制控件的状态-->
<ControlTemplate.Triggers>
<!--默认属性-->
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<!--鼠标移入属性-->
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<!--鼠标按下属性-->
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<!--按钮可用状态属性-->
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
三、修改模板
1. Border为按钮的样式
a. 增加属性 CornerRadius=“5”（值为圆角半径），值可以根据实际定义，如果需要动态变化，则需使用自定义控件，增加 CornerRadius 依赖属性。
<Border x:Name="border" CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
CornerRadius=“5” 效果如下：
CornerRadius=“10”（高度一半） 效果如下：
CornerRadius=“10”（高度一半，宽度一半） ，即圆形按钮，效果如下：
这边定义一个无边框，静态背景为黄绿色，鼠标悬浮为亮绿色，鼠标按下为深绿色的圆形按钮，所有修改项及效果如下：
<SolidColorBrush x:Key="Button.Static.Background" Color="GreenYellow"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="LightGreen"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="Green"/>
<Setter Property="BorderThickness" Value="0"/>
<Border x:Name="border" CornerRadius="25" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<Button Style="{DynamicResource ButtonStyle1}" Content="1" Width="50" Height="50" HorizontalAlignment="Left" Margin="134,86,0,0" VerticalAlignment="Top" RenderTransformOrigin="-1.819,-4.886"/>
总结
通过改写模板修改现有控件，可方便我们使用及操作，不必专门创建自定义控件即可达到使用的效果，后续会持续更新更多的控件改写及自定义控件，不足之处，欢迎大家进行指正.
