WPF-按鈕美化

時間 2019-12-07

標籤 wpf 按鈕美化简体版

原文原文鏈接

　　咱們很少嗶嗶，先放圖：

美化按鈕背景：

　　當咱們用系統默認的按鈕風格彷佛太老套，並且不太美觀，某些狀況下咱們須要對按鈕進行美化和重繪，只有這樣才能知足咱們的須要spa

按鈕美化思惟引導：

圖中1 爲控件Bordercode

途中2 爲ContentPresenter（也能夠用TextBook）component

因而可知按鈕時有 Border+ContentPresenter組成的blog

那麼咱們能夠進行按鈕重繪get

 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>

若想將按鈕進一步美化就能夠配合觸發器使用（該按鈕風格爲默認）it

 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>

其餘按鈕風格爲io

  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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。