Question

我有点像XAML菜鸟，所以这可能是我很想念的东西......

在Windows Phone 8应用程序中，我有一张地图Pushpin我正试图制作一个非常像池塘中的涟漪效果的动画。我有一个大容器日食和一个日食，它将从0宽度/高度扩展到30宽度/高度（与父日食相同的大小）。

我这样做是为了直观地向用户表明他们的位置正在被积极跟踪，或者刚被接走。

不幸的是，我没有设法使我的动画工作。

<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位于UserControl中，包含我的Windows Phone 7 / Bing地图控件（Windows Phone 8地图控件缺少我需要的一些功能）。

非常感谢任何帮助。谢谢。

更新

我可以添加动画，但不确定如何通过代码应用Storyboard。理想情况下，我想按代码应用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();

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

Answer 1

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

动画XAML Eclipse以进行图钉控制

1 个答案: