私はXAML初心者なので、これはおそらく私が見逃している非常に単純なものです...
Windows Phone 8 アプリでは、池のさざなみのような効果でアニメーション化しようとしているマップ プッシュピンがあります。私は大きなコンテナの日食と、幅/高さ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 は、Windows Phone 7 / Bing マップ コントロールを収容する UserControl 内にあります (Windows Phone 8 マップ コントロールには、必要な機能がいくつかありません)。
どんな助けでも大歓迎です。ありがとうございました。
アップデート
アニメーションを追加できますが、コードでストーリーボードを適用する方法がわかりません。理想的には、さまざまな状況に合わせていくつかを定義したいので、ストーリーボードをコードで適用したいと思います。
更新された 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();
ストーリーボード変数が null です。「LocateStoryboard」リソースを掘り下げるには、ControlTemplate 構造を掘り下げる必要があるようです。これを行う方法はありますか?