在WPF应用程序中,我创建了3种不同的自定义切换按钮样式。我想在按钮悬停时添加彩色动画,因此使用事件触发器和彩色动画情节提要板,这就是我所做的;
顺便说一句,每种切换按钮样式都有一个图像。
切换按钮样式
<Style x:Key="ExeatKey" TargetType="ToggleButton">
<Setter Property="Foreground" Value="#B2B2B2"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Margin" Value="0 0 0 0"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid Margin="0 0 0 0" VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Margin="0 10 0 30">
<!--Image Change Colour Trigger-->
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=takeExeatBtn, Path=IsChecked}" Value="True">
<Setter Property="Source" Value="/Images/Others/Button Icons/ex_blu.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=takeExeatBtn, Path=IsChecked}" Value="False">
<Setter Property="Source" Value="/Images/Others/Button Icons/ex_gray.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Text="Take An Exeat" TextAlignment="Center" FontSize="20" Margin="0 58 0 0" FontWeight="SemiBold"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#BCD0E8" Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Transparent" Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="#BCD0E8"/>
<Setter Property="Foreground" Value="#5050EA"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Cursor" Value="Arrow"/>
<Setter Property="Background" Value="#BCD0E8"/>
<Setter Property="Foreground" Value="#7878FF"/>
</Trigger>
</Style.Triggers>
</Style>
现在自然而然地,我认为这可以工作,但是每当鼠标进入时它都不会动画,只有MouseLeave
可以工作。
我在代码中错过了什么?