0

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

在 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”资源。任何想法如何做到这一点？

4

1 回答 1

1

不确定它是否有帮助，但请看一下Igor Ralic 的文章。他有一个详细的示例，说明如何在图钉上添加淡入淡出的动画。

于 2013-07-10T07:24:07.693 回答