Animation not work on Ellipse - xaml

Question

I am trying to animate an ellipse which will grow bigger on State Changes.
I can't seem to get the transition working on Width and Height.
Note that if I change the TargetProperty to (FrameworkElement.RenderTransform).(CompositeTransform.TranslateX), the transition applies.
Here's the ControlTemplate I used:
<Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ControlStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ClosedToOpened"
From="Closed" To="Opened"
GeneratedDuration="0:0:0.5">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Bubble">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="10" EasingFunction="{StaticResource EaseOutQuintic}" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50" EasingFunction="{StaticResource EaseOutQuintic}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="Bubble">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="10" EasingFunction="{StaticResource EaseOutQuintic}" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50" EasingFunction="{StaticResource EaseOutQuintic}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OpenedToClosed"
From="Opened" To="Closed"
GeneratedDuration="0:0:0.5">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Bubble">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="50" EasingFunction="{StaticResource EaseOutQuintic}" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="10" EasingFunction="{StaticResource EaseOutQuintic}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="Bubble">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="50" EasingFunction="{StaticResource EaseOutQuintic}" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="10" EasingFunction="{StaticResource EaseOutQuintic}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualStateGroup.States>
<VisualState x:Name="Opened">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Width" Duration="0" To="50" />
<DoubleAnimation Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Height" Duration="0" To="50" />
</Storyboard>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Width" Duration="0" To="10" />
<DoubleAnimation Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Height" Duration="0" To="10" />
</Storyboard>
</VisualState>
</VisualStateGroup.States>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="Bubble" Width="10" Height="10" Fill="Black" />
</Border>
How do I get the transition working?
(I tried ScaleX/Y but it gives a pixel-Ly result when animating)

Answer 1

Your animation is a dependent animation, by default, the animation system won't run a dependent animation. To enable your animation, you need set the EnableDependentAnimation property of the animation object to True.
In WinRT, there are two kinds of animations: Dependent and independent animations.
An animation is independent if it has any of these characteristics:
The Duration of the animation is 0 seconds (see Caution)
The animation targets UIElement.Opacity
The animation targets a sub-property value of these UIElement properties: RenderTransform, Projection, Clip
The animation targets Canvas.Left or Canvas.Top
The animation targets a Brush value and uses a SolidColorBrush, animating its Color
The animation is an ObjectAnimationUsingKeyFrames
If your animation doesn't meet these criteria, it's probably a dependent animation.
To make your transition working, you can change your code like following:
<Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ControlStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ClosedToOpened"
From="Closed"
GeneratedDuration="0:0:0.5"
To="Opened">
<Storyboard>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Width">
<EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0" Value="10" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0.5" Value="50" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Height">
<EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0" Value="10" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0.5" Value="50" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="OpenedToClosed"
From="Opened"
GeneratedDuration="0:0:0.5"
To="Closed">
<Storyboard>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Width">
<EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0" Value="50" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0.5" Value="10" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Height">
<EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0" Value="50" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0.5" Value="10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
...
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Border>