为 Pushpin 控件制作 XAML Eclipse 动画

Question

我有点 XAML 菜鸟，所以这可能是我想念的非常简单的东西......

在一个 Windows Phone 8 应用程序中，我有一个地图图钉，我正在尝试用一种非常类似于池塘中涟漪的效果来制作动画。我有一个大型容器 eclipse 和一个子 eclipse，它将从 0 宽度/高度扩展到 30 宽度/高度（与父 eclipse 的大小相同）。

我这样做是为了向用户直观地表明他们的位置正在被主动跟踪，或者刚刚被拾取。

很遗憾，我的动画无法正常工作。

<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>

以防万一 - 此 ControlTemplate 位于包含我的 Windows Phone 7 / Bing 地图控件的 UserControl 中（Windows Phone 8 地图控件缺少我需要的一些功能）。

任何帮助将不胜感激。谢谢。

更新

我可以添加动画，但不确定如何通过代码应用情节提要。理想情况下，我想通过代码应用 Storyboard，因为我想为不同的情况定义一对。

这是更新后的 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>

附带说明：我之前在创建动画时遇到了问题，因为我不知道如果您直接调整 XAML 代码，Blend 不会记录更改。您需要找出各种属性控件并在那里设置所有内容。

这是我试图用来启动动画的代码：

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();

情节提要变量为空。看来我需要深入研究 ControlTemplate 结构以深入挖掘“LocateStoryboard”资源。任何想法如何做到这一点？

Answer 1

不确定它是否有帮助，但看看article by Igor Ralic here... 他有一个详细的例子，说明如何在图钉上添加淡入淡出动画。