WPF样式入门：5分钟学会自定义Button样式

大家好！今天给大家分享一个WPF开发中最常用的技能------自定义控件样式。很多刚接触WPF的同学都觉得界面美化很难，其实掌握了Style的基本用法，你就能轻松打造出专业级的UI界面了！今天我们就从最简单的Button控件开始，手把手教你写出漂亮的按钮样式。

什么是WPF样式？

WPF的Style就像CSS一样，可以让我们统一定义控件的外观。不用每个按钮都单独设置属性，一次定义，处处使用，大大提高开发效率！

第一个Button样式

我们先来看一个最简单的例子。在Window的Resources中定义一个样式：

xml 复制代码

<Window.Resources>    <Style x:Key="MyButtonStyle" TargetType="Button">        <Setter Property="Background" Value="#4A90E2"/>        <Setter Property="Foreground" Value="White"/>        <Setter Property="FontSize" Value="16"/>        <Setter Property="Padding" Value="20,10"/>        <Setter Property="BorderThickness" Value="0"/>        <Setter Property="Cursor" Value="Hand"/>    </Style></Window.Resources>

代码解释：

x:Key：样式的名称，方便引用
TargetType：指定这个样式是给Button用的
Setter：设置属性，Property是属性名，Value是属性值

使用样式：

xml 复制代码

<Button Content="点击我" Style="{StaticResource MyButtonStyle}"/>

是不是很简单？现在你就有了一个蓝色背景、白色文字、圆角的现代化按钮了！

添加鼠标悬停效果

静态的按钮太单调？我们给它加点动态效果！使用Trigger可以让按钮在鼠标悬停时改变样式：

xml 复制代码

<Style x:Key="HoverButtonStyle" TargetType="Button">    <Setter Property="Background" Value="#4A90E2"/>    <Setter Property="Foreground" Value="White"/>    <Setter Property="FontSize" Value="16"/>    <Setter Property="Padding" Value="20,10"/>    <Setter Property="BorderThickness" Value="0"/>
    <!-- 鼠标悬停效果 -->    <Style.Triggers>        <Trigger Property="IsMouseOver" Value="True">            <Setter Property="Background" Value="#357ABD"/>        </Trigger>    </Style.Triggers></Style>

现在当鼠标移到按钮上时，颜色会自动变深，是不是更有交互感了？

圆角按钮样式

想要更现代的圆角按钮？我们需要自定义Template：

xml 复制代码

<Style x:Key="RoundButtonStyle" TargetType="Button">    <Setter Property="Background" Value="#4A90E2"/>    <Setter Property="Foreground" Value="White"/>    <Setter Property="FontSize" Value="16"/>    <Setter Property="Padding" Value="20,10"/>    <Setter Property="BorderThickness" Value="0"/>    <Setter Property="Template">        <Setter.Value>            <ControlTemplate TargetType="Button">                <Border Background="{TemplateBinding Background}"                        CornerRadius="8"                        Padding="{TemplateBinding Padding}">                    <ContentPresenter HorizontalAlignment="Center"                                    VerticalAlignment="Center"/>                </Border>            </ControlTemplate>        </Setter.Value>    </Setter>
    <!-- 悬停效果 -->    <Style.Triggers>        <Trigger Property="IsMouseOver" Value="True">            <Setter Property="Background" Value="#357ABD"/>        </Trigger>    </Style.Triggers></Style>

关键点：

ControlTemplate：自定义控件的模板
Border：用圆角边框包裹内容
CornerRadius：设置圆角半径
TemplateBinding：绑定到控件的属性

实战：创建一套按钮样式

在实际项目中，我们通常会创建多种按钮样式：

xml 复制代码

<Window.Resources>    <!-- 主按钮 -->    <Style x:Key="PrimaryButton" TargetType="Button">        <Setter Property="Background" Value="#4A90E2"/>        <Setter Property="Foreground" Value="White"/>        <Setter Property="Padding" Value="20,10"/>    </Style>
    <!-- 次要按钮 -->    <Style x:Key="SecondaryButton" TargetType="Button">        <Setter Property="Background" Value="#E0E0E0"/>        <Setter Property="Foreground" Value="#333333"/>        <Setter Property="Padding" Value="20,10"/>    </Style>
    <!-- 危险按钮 -->    <Style x:Key="DangerButton" TargetType="Button">        <Setter Property="Background" Value="#E74C3C"/>        <Setter Property="Foreground" Value="White"/>        <Setter Property="Padding" Value="20,10"/>    </Style></Window.Resources>
<!-- 使用 --><StackPanel Margin="20">    <Button Content="确认" Style="{StaticResource PrimaryButton}" Margin="5"/>    <Button Content="取消" Style="{StaticResource SecondaryButton}" Margin="5"/>    <Button Content="删除" Style="{StaticResource DangerButton}" Margin="5"/></StackPanel>

小技巧

1. 全局样式

如果想让所有Button都使用同一个样式，可以不设置x:Key：

xml 复制代码

<Style TargetType="Button">    <!-- 样式定义 --></Style>

样式继承

xml 复制代码

<Style x:Key="LargeButton" TargetType="Button"        BasedOn="{StaticResource MyButtonStyle}">    <Setter Property="FontSize" Value="20"/>    <Setter Property="Padding" Value="30,15"/></Style>

资源字典

项目大了之后，建议把样式放到单独的资源字典文件中：

xml 复制代码

<!-- Styles/ButtonStyles.xaml --><ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Style x:Key="MyButtonStyle" TargetType="Button">        <!-- 样式定义 -->    </Style></ResourceDictionary>

在App.xaml中引用：

xml 复制代码

<Application.Resources>    <ResourceDictionary>        <ResourceDictionary.MergedDictionaries>            <ResourceDictionary Source="Styles/ButtonStyles.xaml"/>        </ResourceDictionary.MergedDictionaries>    </ResourceDictionary></Application.Resources>