Select to view content in your preferred language

Fill Symbol and Map Zoom Animation Help

990
2
04-29-2010 01:37 PM
BrandonCopeland
Emerging Contributor
I am attempting to design a custom fill symbol that, on selected, will raise and leave a semi-transparent shadow in the original location. The goal is a "popping out" effect when selected.

My strategy was to create a second path in addition to the "Element" path and bind its data property to the "Element" path's data property. Now both have the same geometry, I can do whatever animation to the "Element" path on selected, and this second path would serve as the shadow.

Works great, except... The second (shadow) path does not re-size like other graphic elements during the map zoom animation. ie. All other elements will scale larger on map zoom in and the shadow path will remain the same size. I don't see any property differences between my new path and the Element path (thanks Silverlight Spy ;)). Can anyone provide any insight? Thanks in advance.

Here's the xaml. A value converter is needed for the binding. 2 paths can't share the same geometry, so the new path geometry must be created by copying properties from the first. I've included this as an attachment (had to change to .txt).


<Converter:PathConverter x:Key="PathConverter"/>

<esriSymbols:FillSymbol x:Key="ServiceSymbol">
        <esriSymbols:FillSymbol.ControlTemplate>
            <ControlTemplate>
                <Grid x:Name="RootElement">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="00:00:00.2"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="-8" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Element"/>
                                    <ColorAnimation Duration="0" To="Yellow" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Element"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unselected" />
                        </VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Path Fill="#FF353535" StrokeThickness="0" Opacity="0.65" Data="{Binding Data, Converter={StaticResource PathConverter}, ElementName=Element}"/>
                    <Path x:Name="Element" Stroke="#FF6C5D28" RenderTransformOrigin="0.5,0.5" Fill="#FFE8DC94">
                        <Path.RenderTransform>
                            <CompositeTransform/>
                        </Path.RenderTransform>
                    </Path>
                </Grid>
            </ControlTemplate>
        </esriSymbols:FillSymbol.ControlTemplate>
    </esriSymbols:FillSymbol>
0 Kudos
2 Replies
BrandonCopeland
Emerging Contributor
Upload screen capture of the issue as well...
0 Kudos
BrandonCopeland
Emerging Contributor
Got it! Wasn't setting PathGeometry.Transform. Setting in value converter did the trick.

PathGeometry oldGeometry = (System.Windows.Media.PathGeometry)value;
PathGeometry pg = new PathGeometry {Transform = oldGeometry.Transform};
0 Kudos