WPF 按钮样式

it2022-05-09  30

项目中用到的WPF 按钮样式,,,

<!--定义按钮样式--><Style TargetType="Button"><Setter Property="Foreground" Value="Black"/><!--修改模板属性--><Setter Property="Template"><Setter.Value><!--控件模板--><ControlTemplate TargetType="Button"><!--背景色--><Border x:Name="back" Opacity="0.8" CornerRadius="3"><Border.BitmapEffect><OuterGlowBitmapEffect Opacity="0.7" GlowSize="0" GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}"/></Border.BitmapEffect><Border.Background><LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5"><GradientBrush.GradientStops><GradientStopCollection><GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/><GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/><GradientStop Color="#FFF" Offset="1"/></GradientStopCollection></GradientBrush.GradientStops></LinearGradientBrush></Border.Background><!--前景色及边框--><Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555"><Border.Background><LinearGradientBrush StartPoint="0,0" EndPoint="0,1"><GradientBrush.GradientStops><GradientStopCollection><GradientStop Color="#6FFF" Offset="0.5"/><GradientStop Color="#1111" Offset="0.51"/></GradientStopCollection></GradientBrush.GradientStops></LinearGradientBrush></Border.Background><!--按钮内容--><ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"><ContentPresenter.BitmapEffect><DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3"/></ContentPresenter.BitmapEffect></ContentPresenter></Border></Border><!--触发器--><ControlTemplate.Triggers><!--鼠标移入移出--><Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation To="6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/><ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/><ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/><ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/><ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger><!--按钮按下弹起--><Trigger Property="IsPressed" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation To="3" Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/><ColorAnimation To="#3AAA" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/><ColorAnimation To="#2111" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/><ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/><ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger><!--按钮失效--><Trigger Property="IsEnabled" Value="False"><Setter Property="Foreground" Value="#B444"/><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation To="0" Duration="0:0:0.3" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/><DoubleAnimation To="1" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)"/><DoubleAnimation To="-135" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)"/><ColorAnimation To="#FFF" Duration="0:0:0.3" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)"/><ColorAnimation To="#D555" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"/><ColorAnimation To="#CEEE" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/><ColorAnimation To="#CDDD" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/><DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)"/><DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)"/><ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)"/><ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"/><ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/><ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!--定义按钮样式--><Style x:Key="buttonTemplate" TargetType="Button"><!--修改模板属性--><Setter Property="Template"><Setter.Value><!--控件模板--><ControlTemplate TargetType="Button"><!--只有Grid才能装下这么多Child--><Grid><!--带特效的底层背景--><Border x:Name="back" Opacity="0.8" CornerRadius="2"><Border.BitmapEffect><OuterGlowBitmapEffect Opacity="0.8" GlowSize="0" GlowColor="Red"/></Border.BitmapEffect><Ellipse Width="49" Height="49"><Ellipse.Fill> Red</Ellipse.Fill></Ellipse><!--按钮呈圆形--></Border><Ellipse x:Name="outerCircle" Width="50" Height="50"><Ellipse.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="0,1"><GradientStop Offset="0" Color="DarkOliveGreen"/><GradientStop Offset="1" Color="Azure"/></LinearGradientBrush></Ellipse.Fill></Ellipse><Ellipse Width="40" Height="40"><Ellipse.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="0,1"><GradientStop Offset="0" Color="White"/><GradientStop Offset="1" Color="Transparent"/></LinearGradientBrush></Ellipse.Fill></Ellipse><!--按钮内容--><Border><TextBlock x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}"></TextBlock></Border></Grid><!--触发器--><ControlTemplate.Triggers><Trigger Property="Button.IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation To="10" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/><ColorAnimation To="#4FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/><ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/></Storyboard></BeginStoryboard></Trigger.EnterActions><Trigger.ExitActions><BeginStoryboard><Storyboard><DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)"/><ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/><ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="outerCircle" Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"/></Storyboard></BeginStoryboard></Trigger.ExitActions></Trigger><Trigger Property="Button.IsPressed" Value="True"><Setter Property="RenderTransform"><Setter.Value><ScaleTransform ScaleX=".9" ScaleY=".9"/></Setter.Value></Setter><Setter Property="RenderTransformOrigin" Value=".5,.5"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

按钮样式

APP

 

<Application x:Class="AgingLife.App" 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:vm="clr-namespace:AgingLife.ViewModel" xmlns:v="clr-namespace:AgingLife.View" mc:Ignorable="d" StartupUri="MainWindow.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="style/ALListBoxStyle.xaml"/><ResourceDictionary Source="style/ALTabControlStyle.xaml"/><ResourceDictionary Source="style/ALButtonStyle.xaml"/></ResourceDictionary.MergedDictionaries><!--Global View Model Locator--><vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True"/><DataTemplate DataType="{x:Type vm:AllocationViewModel}"><v:AllocationView></v:AllocationView></DataTemplate><DataTemplate DataType="{x:Type vm:CoolingConViewModel}"><v:CoolingConView></v:CoolingConView></DataTemplate><DataTemplate DataType="{x:Type vm:HardwareconViewModel}"><v:HardwareconView></v:HardwareconView></DataTemplate><DataTemplate DataType="{x:Type vm:TemperatureBoxViewModel}"><v:TemperatureBoxView></v:TemperatureBoxView></DataTemplate></ResourceDictionary></Application.Resources></Application>

<ResourceDictionary Source="style/ALButtonStyle.xaml"/> 为引用样式文件...

转载于:https://www.cnblogs.com/hengbo/archive/2011/11/02/2232564.html

相关资源:好看的WPF自定义按钮样式(绝对不亏)

最新回复(0)