topic Re: Using Viewer's default selection animation in ArcGIS Viewer for Silverlight Questions

Using Viewer's default selection animation

FrancoisPelletier1 — Wed, 05 Jun 2013 18:30:51 GMT

Hi,

Ok here's the thing. In our application, we programmatically generate some GraphicsLayer that we add dynamically to the map. We use Renderers to display custom symbols. Everything works great up to this point.

Here's the problem... When selecting a feature from one of those GraphicsLayer, there is no graphic animation to indicate that the feature is selected ! The feature is selected but the graphic symbol remain unchanged, making it almost impossible for a user to know if it really is selected or not... We did found a way to create a custom animation when selecting a feature but we haven't found a way to use the default "orange-yellow halo" animation.

How can we use this default selection animation for a dynamically generated GraphicsLayer ??

Thanks

Simplified example:

[HTML]
<esri:MarkerSymbol x:Key="Symbol" OffsetX="9" OffsetY="9">
   <esri:MarkerSymbol.ControlTemplate>
      <ControlTemplate>
         <Ellipse x:Name="ellipse" Fill="DarkBlue" Width="18" Height="18" Stroke="Black">
            <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="SelectionStates">
                  <VisualState x:Name="Unselected" />
                  <VisualState x:Name="Selected">
                     <Storyboard>
                        <ColorAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="Cyan" Duration="00:00:0.25"/>
                     </Storyboard>
                  </VisualState>
               </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
         </Ellipse>
      </ControlTemplate>
    </esri:MarkerSymbol.ControlTemplate>
</esri:MarkerSymbol>

<esri:SimpleRenderer x:Key="SimpleRenderer" Symbol="{StaticResource Symbol}" />[/HTML]

var layer = new GraphicsLayer();
layer.Renderer = SimpleRenderer;
MapApplication.Current.Map.Layers.Add(layer);

Re: Using Viewer's default selection animation

BrianLeroux — Sat, 11 Dec 2021 23:08:32 GMT

I ran into the same issue so I did my best to re-create the animation. I also enhanced my symbols a bit by adding a labels when hovering.

<esri:MarkerSymbol x:Name="CustomStrobeMarkerSymbol">
                <esri:MarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Canvas>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Selected">
                                        <Storyboard RepeatBehavior="1x">
                                            <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" From="1" To="6" Duration="00:00:00.5" />
                                            <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" From="1" To="6" Duration="00:00:00.5" />
                                            <DoubleAnimation BeginTime="0" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)" From="1" To="1" Duration="00:00:01" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unselected" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="labelOnHover" 
                            Storyboard.TargetProperty="Visibility" 
                            Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation From="0" To="1" Storyboard.TargetName="labelOnHover" 
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:.25" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal" />
                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            
                            <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" RenderTransformOrigin="0.5,0.5" x:Name="ellipse" IsHitTestVisible="False">
                                <Ellipse.RenderTransform>
                                    <ScaleTransform />
                                </Ellipse.RenderTransform>
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Color="#8DFFFF00" />
                                        <GradientStop Color="#8DFFFF00" Offset=".4" />
                                        <GradientStop Color="#8DFF7600" Offset=".8" />
                                        <GradientStop Color="#00FF7600" Offset="1" />
                                        <!--<GradientStop Color="#00FF0000" Offset="1" />-->
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" Fill="#FFFF0000" x:Name="ellipse1" />
                            <Grid Margin="8,-8,0,0" x:Name="labelOnHover" Visibility="Collapsed"
                        HorizontalAlignment="Left" VerticalAlignment="Top" >
                                <!--Text halo using a white blurred text-->
                                <TextBlock Foreground="White" FontWeight="Bold" Text="{Binding Attributes[POLICY_NO]}" >
                    <TextBlock.Effect>
                              <BlurEffect Radius="5" />
                    </TextBlock.Effect>
                                </TextBlock>
                                <!--Text-->
                                <TextBlock Foreground="Black" FontWeight="Bold" Text="{Binding Attributes[POLICY_NO]}" />
                            </Grid>

                        </Canvas>
                    </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
                
            </esri:MarkerSymbol>