Animate an XAML Eclipse for Pushpin control - xaml

Question

I'm a bit a of XAML noob so this is probably something very simple I'm missing...
In a Windows Phone 8 app I have a map Pushpin I'm trying to animate with an effect very much like ripples in a pond. I have a large container eclipse and a child eclipse that will expand from 0 width/height to 30 width/height (the same size as the parent eclipse).
I'm doing this to visually indicate to the user that their location is actively being tracked, or just been picked up.
Unfortunately I've not managed to get my animation working.
<ControlTemplate x:Key="UserLocationPushpinControlTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="34" Height="34">
<Grid.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation
Storyboard.TargetName="Animated"
Storyboard.TargetProperty="Width"
From="0" To="30" Duration="0:0:1" AutoReverse="False"
RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="Animated"
Storyboard.TargetProperty="Height"
From="0" To="30" Duration="0:0:1" AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</Grid.Resources>
<Grid MinHeight="30" MinWidth="30">
<Ellipse x:Name="Parent" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="30"
Height="30"
Stroke="White"
StrokeThickness="3"
Fill="{StaticResource PrimaryColorBrush}"/>
<Ellipse x:Name="Animated" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="0"
Height="0"
Stroke="White"
StrokeThickness="2"/>
</Grid>
</Grid>
</ControlTemplate>
Just in case it's relevant - this ControlTemplate is within a UserControl housing my Windows Phone 7 / Bing map control (the Windows Phone 8 map control is lacking some functionality I require).
Any help would be greatly appreciated. Thank you.
Update
I can add an animation, but am not sure how to apply the Storyboard via code. Ideally I'd like to apply the Storyboard by code as I'd like to define a couple for different circumstances.
Here's the updated XAML:
<ControlTemplate x:Key="UserLocationPushpinControlTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="34" Height="34">
<Grid.Resources>
<Storyboard x:Name="LocateStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="AnimatedEllipse" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="30"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="AnimatedEllipse" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="30"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid MinHeight="30" MinWidth="30">
<Ellipse x:Name="ParentEllipse" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="30"
Height="30"
Stroke="White"
StrokeThickness="3"
Fill="{StaticResource PrimaryColorBrush}"/>
<Ellipse x:Name="AnimatedEllipse" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="0"
Height="0"
Stroke="White"
StrokeThickness="2"/>
</Grid>
</Grid>
</ControlTemplate>
As a side note: I had issues creating the animation before as I was unaware that Blend does not record changes if you're tweaking the XAML code directly. You need to seek out the various property controls and set everything there.
This is the code I was trying to use to start the animation:
Pushpin pushpin = new Pushpin();
pushpin.Tag = PIN_TAG;
pushpin.Location = ViewModel.Location;
pushpin.Template = (ControlTemplate)Resources["UserLocationPushpinControlTemplate"];
pushpin.PositionOrigin = PositionOrigin.Center;
MapBase.Children.Add(pushpin);
Storyboard animation = (Storyboard)pushpin.Resources["LocateStoryboard"];
animation.Begin();
The storyboard variable is null. It seems I need to delve in to the ControlTemplate structure to dig down to the "LocateStoryboard" resource. Any ideas how to do this?

Answer 1

Not sure if it can help, but take a look at the article by Igor Ralic here... He has a detailed example on how to add a fade in animation on pushpins.