Animation inside DataTrigger won't run a second time - wpf

Question

This is the code:
<Grid>
<Ellipse Fill="Turquoise" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Style.Setters>
<Setter Property="Ellipse.RenderTransform">
<Setter.Value>
<TranslateTransform X="0" Y="50"/>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=rectRight, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetProperty="RenderTransform.(TranslateTransform.X)">
<!--<DoubleAnimation To="{Binding Path=Width}" Duration="0:0:1"/>--> <!--Doesn't work inside a Style Trigger-->
<DoubleAnimation To="250" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=rectLeft, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetProperty="RenderTransform.(TranslateTransform.X)">
<DoubleAnimation To="45" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom" Orientation="Horizontal">
<Rectangle Name="rectLeft" Fill="Gray" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Name="rectRight" Fill="Gray" Height="100" Stroke="Black" Width="100" Margin="10"/>
</StackPanel>
</Grid>
The goal is to animate the Ellipse right when hovering over the right rectangle and left when hovering over the left rectangle. What happens is that after hovering over the left one the Ellipse will no longer move right.
What's also weird is that after changing the order of the DataTrigger declarations around, the reverse is the case.
What's going on that prevents the animation from running again?
I can do this a different way using EventTriggers but in my larger scenario I am using DataTriggers and this is where I am flummoxed.
Another thing is that I wanted to Bind the DoubleAnimation.To property to the Width of the Ellipse but apparently you can't do that in Style DataTriggers and I've yet to find a good workaround. Any help is appreciated.

Answer 1

You need to stop the storyboard before you start other one(add names to both the storyboard & stop each of them before the other runs):
<Grid>
<Ellipse Fill="Turquoise" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Style.Setters>
<Setter Property="Ellipse.RenderTransform">
<Setter.Value>
<TranslateTransform X="0" Y="50"/>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=rectRight, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<StopStoryBoard BeginStoryBoardName="Second"/>
<BeginStoryboard x:Name="First">
<Storyboard TargetProperty="RenderTransform.(TranslateTransform.X)">
<!--<DoubleAnimation To="{Binding Path=Width}" Duration="0:0:1"/>--> <!--Doesn't work inside a Style Trigger-->
<DoubleAnimation To="250" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=rectLeft, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<StopStoryBoard BeginStoryBoardName="First"/>
<BeginStoryboard x:Name="Second">
<Storyboard TargetProperty="RenderTransform.(TranslateTransform.X)">
<DoubleAnimation To="45" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom" Orientation="Horizontal">
<Rectangle Name="rectLeft" Fill="Gray" Height="100" Stroke="Black" Width="100" Margin="10"/>
<Rectangle Name="rectRight" Fill="Gray" Height="100" Stroke="Black" Width="100" Margin="10"/>
</StackPanel>
</Grid>