<Window x:Class="WpfApplication4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> <Window.Resources> <!--定义按钮样式--> <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> <Rectangle Width="49" Height="49"> <Rectangle.Fill> Red </Rectangle.Fill> </Rectangle> <!--按钮呈矩形--> </Border> <Rectangle x:Name="outerCircle" Width="50" Height="50"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="DarkOliveGreen"/> <GradientStop Offset="1" Color="Azure"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Width="40" Height="40"> <Rectangle.Fill> <ImageBrush Stretch="Fill" ImageSource="/WpfApplication4;component/Images/png-0095.png" /> </Rectangle.Fill> </Rectangle> <!--按钮内容--> <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> </Window.Resources> <Grid> <Button Content="Button" Style="{StaticResource buttonTemplate}" Height="105" HorizontalAlignment="Left" Margin="153,108,0,0" Name="button1" VerticalAlignment="Top" Width="201"> </Button> </Grid> </Window>