kdbond

Custom LineSymbol with animation not staying in sync

Discussion created by kdbond on Nov 19, 2012
I have made a custom LineSymbol to use on a graphic layer.  The line symbol animates an arrow on the line.  However, when the map layer changes zoom, the animation stays at the old path.  I have verified that my converter is called and that the values appear to be synced, but the animation will not reflect the new path until the path moves off the screen and then back on screen.  Can someone offer a suggestion on how to force the animation to redraw?  This would be easier if the GraphicElement class would add the path and pathgeometries as attributes on the Symbol itself, instead of injecting the data directly into the Path element named "Element", but I guess we are stuck with that for now.

        <esri:LineSymbol.ControlTemplate>
            <ControlTemplate>
                <Canvas>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Selected">
                            </VisualState>
                            <VisualState x:Name="Unselected"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimation BeginTime="0" Duration="0:0:0.1" Storyboard.TargetName="VisualElement" Storyboard.TargetProperty="(Path.StrokeThickness)" To="5"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation BeginTime="0" Duration="0:0:0.1" Storyboard.TargetName="VisualElement" Storyboard.TargetProperty="(Path.StrokeThickness)" To="10"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path x:Name="Element"/>
                    <Path x:Name="VisualElement" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round"
                          Opacity="0.5" RenderTransformOrigin="2,0" StrokeThickness="5" Stroke="#FF05AA05" Data="{Binding ElementName=Element, Path=Data, Mode=OneWay}">
                        <Path.Effect>
                            <DropShadowEffect/>
                        </Path.Effect>
                    </Path>
                    <Path x:Name="Arrow" Stretch="Fill" Width="16" Height="16" StrokeLineJoin="Miter"
                          Data="M 0 -5 L 10 -5 M 5 0 L 10 -5 L 5 -10"
                          Stroke="Black" StrokeThickness="3">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform X="-8" Y="-8"/>
                                <MatrixTransform>
                                    <MatrixTransform.Matrix>
                                        <Matrix/>
                                    </MatrixTransform.Matrix>
                                </MatrixTransform>
                            </TransformGroup>
                        </Path.RenderTransform>
                        <Path.Triggers>
                            <EventTrigger RoutedEvent="Path.Loaded">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <MatrixAnimationUsingPath
                                                                  Storyboard.TargetName="Arrow"
                                                                  Storyboard.TargetProperty="RenderTransform.Children[1].Matrix"
                                                                  DoesRotateWithTangent="True"
                                                                  Duration="0:0:5"
                                                                  BeginTime="0:0:0"
                                                                  RepeatBehavior="Forever">
                                            <MatrixAnimationUsingPath.PathGeometry>
                                                <Binding ElementName="Element" Path="Data" Converter="{StaticResource pathGeomConverter}" Mode="OneWay"
                                                         diag:PresentationTraceSources.TraceLevel="High"/>
                                            </MatrixAnimationUsingPath.PathGeometry>
                                        </MatrixAnimationUsingPath>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Path.Triggers>
                    </Path>
                </Canvas>
            </ControlTemplate>
        </esri:LineSymbol.ControlTemplate>
    </esri:LineSymbol>

Outcomes