模仿迅雷和腾讯电脑管家,鼠标移动到关闭按钮上时,产生的动画效果
xaml代码:
<Window x:Class="TkHost.Views.ImageButtonView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowStartupLocation="CenterScreen" Title="ImageButtonView" Height="300" Width="300"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" > <Image Width="32" Height="32" Source="/Images/close.png" ToolTip="关闭" MouseLeftButtonDown="Image_MouseLeftButtonDown"> <Image.RenderTransform> <RotateTransform x:Name="imgTransform" CenterX="15" CenterY="15" Angle="0"/> </Image.RenderTransform> <Image.Triggers> <EventTrigger RoutedEvent="Image.MouseEnter"> <BeginStoryboard HandoffBehavior="Compose"> <Storyboard> <DoubleAnimation Storyboard.TargetName="imgTransform" Storyboard.TargetProperty="Angle" By="90" Duration="0:0:.2" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Image.MouseLeave"> <BeginStoryboard HandoffBehavior="Compose"> <Storyboard > <DoubleAnimation Storyboard.TargetName="imgTransform" Storyboard.TargetProperty="Angle" By="-90" Duration="0:0:.2" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Image.Triggers> </Image> </StackPanel> </Grid> </Window>
cs代码:
public partial class ImageButtonView : Window { public ImageButtonView() { InitializeComponent(); } private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { MessageBox.Show("你好啊"); } }