WPF-按钮美化

女爷i 2021-12-20 04:15 723阅读 0赞

## 　　我们不多哔哔，先放图： ##

![1699486-20190527161453388-1302609105.png][]

## 美化按钮背景： ##

当我们用系统默认的按钮风格似乎太老套，而且不太美观，某些情况下我们需要对按钮进行美化和重绘，只有这样才能满足我们的需要

## 按钮美化思维引导： ##

![1699486-20190527162401224-1266568176.png][]

图中1 为控件Border

途中2 为ContentPresenter（也可以用TextBook）

由此可见 按钮时有 Border+ContentPresenter组成的

那么我们可以进行按钮重绘

1 <Style  TargetType="{x:Type Button}">
     2     <Setter Property="Template">
     3             <Setter.Value>
     4                 <ControlTemplate TargetType="{x:Type Button}">
     5                     <Border x:Name="border" CornerRadius="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
     6                         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
     7                     </Border>
     8 　　　　　　　　　</ControlTemplate>
     9             </Setter.Value>
    10         </Setter>
    11 </Style>

若想将按钮进一步美化就可以配合触发器使用（该按钮风格为默认）

1 <Style  TargetType="{x:Type Button}">
     2         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
     3         <Setter Property="Background" Value="#FFFFFF"/>
     4         <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
     5         <Setter Property="Foreground" Value="Black"/>
     6         <Setter Property="BorderThickness" Value="1"/>
     7         <Setter Property="HorizontalContentAlignment" Value="Center"/>
     8         <Setter Property="VerticalContentAlignment" Value="Center"/>
     9         <Setter Property="Cursor" Value="Hand"/>
    10         <Setter Property="FontSize" Value="23"/>
    11         <Setter Property="Height" Value="40"/>
    12         <Setter Property="Padding" Value="1"/>
    13         <Setter Property="Template">
    14             <Setter.Value>
    15                 <ControlTemplate TargetType="{x:Type Button}">
    16                     <Border x:Name="border" CornerRadius="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
    17                         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    18                     </Border>
    19                     <ControlTemplate.Triggers>
    20                         <Trigger Property="IsDefaulted" Value="true">
    21                             <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    22                         </Trigger>
    23                         <Trigger Property="IsMouseOver" Value="true">
    24                             <Setter Property="Foreground" Value="#037C72"/>
    25                             <Setter Property="BorderBrush" TargetName="border" Value="#037C72"/>
    26                         </Trigger>
    27                         <Trigger Property="IsPressed" Value="true">
    28                             <Setter Property="Foreground"  Value="#32AA9F"/>
    29                             <Setter Property="BorderBrush" TargetName="border" Value="#037C72"/>
    30                         </Trigger>
    31                         <Trigger Property="IsEnabled" Value="false">
    32                             <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
    33                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
    34                             <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
    35                         </Trigger>
    36                     </ControlTemplate.Triggers>
    37                 </ControlTemplate>
    38             </Setter.Value>
    39         </Setter>
    40         <Setter Property="FontFamily" Value="/MESToolIntegration;component/Fonts/#iconfont"/>
    41     </Style>

其他按钮风格为

1 <Style x:Key="GreenButtonStyle" TargetType="{x:Type Button}">
      2         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
      3         <Setter Property="Background" Value="#32AA9F"/>
      4         <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
      5         <Setter Property="Foreground" Value="#FFFFFF"/>
      6         <Setter Property="BorderThickness" Value="1"/>
      7         <Setter Property="HorizontalContentAlignment" Value="Center"/>
      8         <Setter Property="VerticalContentAlignment" Value="Center"/>
      9         <Setter Property="Cursor" Value="Hand"/>
     10         <Setter Property="FontSize" Value="23"/>
     11         <Setter Property="Height" Value="40"/>
     12         <Setter Property="Padding" Value="1"/>
     13         <Setter Property="Template">
     14             <Setter.Value>
     15                 <ControlTemplate TargetType="{x:Type Button}">
     16                     <Border x:Name="border" CornerRadius="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
     17                         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
     18                     </Border>
     19                     <ControlTemplate.Triggers>
     20                         <Trigger Property="IsDefaulted" Value="true">
     21                             <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
     22                         </Trigger>
     23                         <Trigger Property="IsMouseOver" Value="true">
     24                             <Setter Property="Background" TargetName="border" Value="#037C72"/>
     25                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
     26                         </Trigger>
     27                         <Trigger Property="IsPressed" Value="true">
     28                             <Setter Property="Background" TargetName="border" Value="#32AA9F"/>
     29                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
     30                         </Trigger>
     31                         <Trigger Property="IsEnabled" Value="false">
     32                             <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
     33                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
     34                             <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
     35                         </Trigger>
     36                     </ControlTemplate.Triggers>
     37                 </ControlTemplate>
     38             </Setter.Value>
     39         </Setter>
     40         <Setter Property="FontFamily" Value="/MESToolIntegration;component/Fonts/#iconfont"/>
     41     </Style>
     42     <Style x:Key="RedButtonStyle" TargetType="{x:Type Button}">
     43         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
     44         <Setter Property="Background" Value="#FFFF3C33"/>
     45         <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
     46         <Setter Property="Foreground" Value="#FFFBEEEE"/>
     47         <Setter Property="BorderThickness" Value="1"/>
     48         <Setter Property="HorizontalContentAlignment" Value="Center"/>
     49         <Setter Property="VerticalContentAlignment" Value="Center"/>
     50         <Setter Property="Cursor" Value="Hand"/>
     51         <Setter Property="FontSize" Value="23"/>
     52         <Setter Property="Height" Value="40"/>
     53         <Setter Property="Padding" Value="1"/>
     54         <Setter Property="Template">
     55             <Setter.Value>
     56                 <ControlTemplate TargetType="{x:Type Button}">
     57                     <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="3">
     58                         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
     59                     </Border>
     60                     <ControlTemplate.Triggers>
     61                         <Trigger Property="IsDefaulted" Value="true">
     62                             <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
     63                         </Trigger>
     64                         <Trigger Property="IsMouseOver" Value="true">
     65                             <Setter Property="Background" TargetName="border" Value="#FC754B"/>
     66                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
     67                         </Trigger>
     68                         <Trigger Property="IsPressed" Value="true">
     69                             <Setter Property="Background" TargetName="border" Value="#FFFF3C33"/>
     70                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
     71                         </Trigger>
     72                         <Trigger Property="IsEnabled" Value="false">
     73                             <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
     74                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
     75                             <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
     76                         </Trigger>
     77                     </ControlTemplate.Triggers>
     78                 </ControlTemplate>
     79             </Setter.Value>
     80         </Setter>
     81         <Setter Property="FontFamily" Value="/MESToolIntegration;component/Fonts/#iconfont"/>
     82         <Setter Property="VerticalAlignment" Value="Stretch"/>
     83     </Style>
     84     <Style x:Key="BlueButtonStyle" TargetType="{x:Type Button}">
     85         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
     86         <Setter Property="Background" Value="#FF4AB2FF"/>
     87         <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
     88         <Setter Property="Foreground" Value="White"/>
     89         <Setter Property="BorderThickness" Value="1"/>
     90         <Setter Property="HorizontalContentAlignment" Value="Center"/>
     91         <Setter Property="VerticalContentAlignment" Value="Center"/>
     92         <Setter Property="Cursor" Value="Hand"/>
     93         <Setter Property="FontSize" Value="23"/>
     94         <Setter Property="Height" Value="40"/>
     95         <Setter Property="Padding" Value="1"/>
     96         <Setter Property="Template">
     97             <Setter.Value>
     98                 <ControlTemplate TargetType="{x:Type Button}">
     99                     <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="3">
    100                         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    101                     </Border>
    102                     <ControlTemplate.Triggers>
    103                         <Trigger Property="IsDefaulted" Value="true">
    104                             <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    105                         </Trigger>
    106                         <Trigger Property="IsMouseOver" Value="true">
    107                             <Setter Property="Background" TargetName="border" Value="#6EC1FF"/>
    108                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
    109                         </Trigger>
    110                         <Trigger Property="IsPressed" Value="true">
    111                             <Setter Property="Background" TargetName="border" Value="#4AB2FF"/>
    112                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
    113                         </Trigger>
    114                         <Trigger Property="IsEnabled" Value="false">
    115                             <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
    116                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
    117                             <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
    118                         </Trigger>
    119                     </ControlTemplate.Triggers>
    120                 </ControlTemplate>
    121             </Setter.Value>
    122         </Setter>
    123         <Setter Property="FontFamily" Value="/MESToolIntegration;component/Fonts/#iconfont"/>
    124     </Style>
    125     <Style x:Key="YellowButtonStyle" TargetType="{x:Type Button}">
    126         <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    127         <Setter Property="Background" Value="#FFFFB800"/>
    128         <Setter Property="BorderBrush" Value="{x:Null}"/>
    129         <Setter Property="Foreground" Value="White"/>
    130         <Setter Property="BorderThickness" Value="0"/>
    131         <Setter Property="HorizontalContentAlignment" Value="Center"/>
    132         <Setter Property="VerticalContentAlignment" Value="Center"/>
    133         <Setter Property="Cursor" Value="Hand"/>
    134         <Setter Property="FontSize" Value="23"/>
    135         <Setter Property="Height" Value="40"/>
    136         <Setter Property="Padding" Value="1"/>
    137         <Setter Property="Template">
    138             <Setter.Value>
    139                 <ControlTemplate TargetType="{x:Type Button}">
    140                     <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="3">
    141                         <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    142                     </Border>
    143                     <ControlTemplate.Triggers>
    144                         <Trigger Property="IsDefaulted" Value="true">
    145                             <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    146                         </Trigger>
    147                         <Trigger Property="IsMouseOver" Value="true">
    148                             <Setter Property="Background" TargetName="border" Value="#FFC632"/>
    149                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
    150                         </Trigger>
    151                         <Trigger Property="IsPressed" Value="true">
    152                             <Setter Property="Background" TargetName="border" Value="#FFFFB800"/>
    153                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
    154                         </Trigger>
    155                         <Trigger Property="IsEnabled" Value="false">
    156                             <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
    157                             <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
    158                             <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
    159                         </Trigger>
    160                     </ControlTemplate.Triggers>
    161                 </ControlTemplate>
    162             </Setter.Value>
    163         </Setter>
    164         <Setter Property="FontFamily" Value="/MESToolIntegration;component/Fonts/#iconfont"/>
    165     </Style>

转载于:https://www.cnblogs.com/ShyFrog/p/10931481.html

[1699486-20190527161453388-1302609105.png]: /images/20211220/7eec52ba9b3442f8b7f5f605cd575f46.png
[1699486-20190527162401224-1266568176.png]: /images/20211220/dd5ae689c52f4ffbb0fd25766e0a11cd.png