Triggers behavior with actions - wpf

Question

please look at this xaml code:
<Style x:Key="WowButton" TargetType="Button" >
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="300"></Setter>
<Setter Property="FontSize" Value="30"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Width" Value="150"></Setter>
<Setter Property="FontSize" Value="25"></Setter>
</Trigger>
<EventTrigger RoutedEvent="Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Width"
From="300" To="500 ">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
From="0" To="360" RepeatBehavior="1x">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
I used this style on a button in the Main Window.
How is that that when I leave the button it rotates and it's width is getting smaller, but after I click on it - it's width doesn't change back?

Answer 1

From MSDN:
In some cases, it might appear that you can't change the value of a
property after it has been animated.
You can solve this by adding new Storyboards to change Width property:
<Style x:Key="WowButton" TargetType="Button" >
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="FontSize" Value="30"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="Yellow"></Setter>
<Setter Property="Width" Value="150"></Setter>
<Setter Property="FontSize" Value="25"></Setter>
</Trigger>
<EventTrigger RoutedEvent="Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.25" Storyboard.TargetProperty="Width"
From="300" To="500 ">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetProperty="Width" From="150" To="300"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
From="0" To="360" RepeatBehavior="1x">
</DoubleAnimation>
<DoubleAnimation Duration="0:0:0" Storyboard.TargetProperty="Width" From="300" To="150 "/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>

Answer 2

Unlike Trigger's basic setter's, Storyboard's do not get an auto RemoveStoryboard call to remove them.
Thus it's upto you to get rid of them when they do not apply anymore. If you were using a Trigger then you can use Trigger.EnterActions and Trigger.ExitActions to do the apply and remove of Storyboard's. This does not exist for EventTrigger's.
In your case Just remove the click Storyboard on the MouseLeave event and vice-versa.
something like: (note we have added a x:Name for the BeginStoryboard's)
<Style x:Key="WowButton"
TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Width"
Value="300" />
<Setter Property="FontSize"
Value="30" />
<Setter Property="FontWeight"
Value="Bold" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="False">
<Setter Property="Background"
Value="Yellow" />
<Setter Property="Width"
Value="150" />
<Setter Property="FontSize"
Value="25" />
</Trigger>
<EventTrigger RoutedEvent="Click">
<BeginStoryboard x:Name="clickStoryboard">
<Storyboard>
<DoubleAnimation Duration="0:0:0.25"
From="300"
Storyboard.TargetProperty="Width"
To="500 " />
</Storyboard>
</BeginStoryboard>
<RemoveStoryboard BeginStoryboardName="leaveStoryboard" />
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard x:Name="leaveStoryboard">
<Storyboard>
<DoubleAnimation Duration="0:0:2"
From="0"
RepeatBehavior="1x"
Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)"
To="360" />
</Storyboard>
</BeginStoryboard>
<RemoveStoryboard BeginStoryboardName="clickStoryboard" />
</EventTrigger>
</Style.Triggers>
</Style>
You don't have to create new Storyboard's to remove old one's. Just use RemoveStoryboard's appropriately to get rid of em.