我试图为按钮内的图像设置动画。然而,经过尝试和许多错误后,我似乎无法自己解决这个问题。
我发现有几个线程与我的解决方案很接近,比如这个线程,这类似于我正在做的事情: How to affect child control properties from a style
但是,我试图为图像添加动画效果。
这是我的xaml设计:
<Button Name="dbButton" Style="{StaticResource imgButton}" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Click="DatabaseButton_Click" HorizontalAlignment="Center" Margin="300,0,0,0" VerticalAlignment="Bottom" ToolTip="View Database">
<Image Source="{StaticResource img_database}" Height="100" Width="100"/>
</Button>
这就是我试图建立的风格:
<Style x:Key="imgButton" TargetType="{x:Type Button}">
<!--start of image child style-->
<Style.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform
x:Name="imgScale"
CenterX="50"
CenterY="50"
ScaleX="1"
ScaleY="1"/>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<!--end of image child style-->
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="tmpltButton">
<Grid>
<ContentPresenter x:Name="ButtonContent"
Opacity=".7"
Content="{Binding Path=Content,
RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="center"
VerticalAlignment="center">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource HoverOut}"/>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource HoverIn}"/>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.LostFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource HoverOut}"/>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.GotFocus">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource HoverIn}"/>
</EventTrigger.Actions>
</EventTrigger>
这是HoverIn和HoverOut动画:
<Storyboard x:Key="HoverOut" Duration="00:00:00.250">
<DoubleAnimation
BeginTime="00:00:00"
To="1"
Storyboard.TargetName="imgScale"
Storyboard.TargetProperty="ScaleX"/>
<DoubleAnimation
BeginTime="00:00:00"
To="1"
Storyboard.TargetName="imgScale"
Storyboard.TargetProperty="ScaleY"/>
</Storyboard>
<Storyboard x:Key="HoverIn" Duration="00:00:00.250">
<DoubleAnimation
BeginTime="00:00:00"
To="1.5"
Storyboard.TargetName="imgScale"
Storyboard.TargetProperty="ScaleX"/>
<DoubleAnimation
BeginTime="00:00:00"
To="1.5"
Storyboard.TargetName="imgScale"
Storyboard.TargetProperty="ScaleY"/>
</Storyboard>
我正在关注这个学习风格的资源: http://www.codeproject.com/Articles/85896/WPF-Customize-your-Application-with-Styles-and-C