0

私は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 構造を掘り下げる必要があるようです。これを行う方法はありますか?

4

1 に答える 1