FeatureLayer marker symbols using images for select and unselect

[HugoCardenas]

Is there a way to display a feature layer marker with an image (.png) and be able to use another image as a symbol when "Selected"?

I have a feature service layer which is a point feature.  When it is displayed, I use a renderer to display the points with a .png image --> this works fine:


Renderer="{StaticResource SelectRenderer}"

where the "SelectRenderer" is defined as follows:

      <esri:SimpleRenderer x:Key="SelectRenderer">
        <esri:SimpleRenderer.Symbol>
          <esri:SimpleMarkerSymbol>
            <esri:SimpleMarkerSymbol.ControlTemplate>
              <ControlTemplate>
               <Image x:Name="Element" Source="watersmall.png">
                <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup x:Name="SelectionStates">
                    <VisualState x:Name="Unselected" />
                      <VisualState x:Name="Selected">

Take a look at the line "<Image x:Name="Element" Source="watersmall.png">".  All my points are drawn using this image as symbol.  This is fine.

The problem:
When I click a marker on the map or a FeatureDataGrid row, the marker on the map is supposed to highlight using a different image which I have.  I don't know how to do it; hence, the incomplete "SelectRenderer" definition.  Would you complete for me, assuming that my other image is called "mySelection.png"?

The rendered does it well, if I use an ellipse, but I am bound to use an image as symbol for the selected feature.

Thanks in advance!
Hugo.

[JMcNeil]

Hugo,

As far as I know, you can't change the value of the Source property on the Image element by using the VisualStateManager. However, you can just add two Image elements to the ControlTemplate: one for the Normal state and one for the Selected and MouseOver state, and use DoubleAnimation and  put in KeyFrame Animation...set the base opacity to 0 and then fade in the respective one image you need when it is called for.

This will work for you, I gave it a test and it fires perfectly you might just want to speed up the switch in and out. 

    <!-- Jays marker (IMAGE Point) Symbol action-->

            <esri:SimpleMarkerSymbol x:Key="SelectRenderer">
                <esri:SimpleMarkerSymbol.ControlTemplate>
                    <ControlTemplate>


                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImagePDF" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImageExcel" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>


                                    </VisualState>

                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>

                                            
                                            
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImageExcel" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImagePDF" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                           

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImageExcel" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImagePDF" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Grid>
                                <Image x:Name="ImageExcel" Source="Images/Excel.png" Stretch="None" />
                                <Image x:Name="ImagePDF" Source="Images/pdf.png" Stretch="None" />
                                
                            </Grid>

                        </Grid>
                    </ControlTemplate>
                </esri:SimpleMarkerSymbol.ControlTemplate>
            </esri:SimpleMarkerSymbol>


   

            <!--  End Jays marker  (IMAGE Point) Symbol action-->

In my example my image pdf.png is my starter image so you would use your watersmall.png and when the point is moused over or the record is selected in the featuregrid the image changes to Excel.png so here you would drop your image named mySelection.png

J. Mc

[AgiskaRachmadani]

Esrijay,

Thanks very much for your idea, i have tried it and it's worked.

But, i have trouble for PictureFillSymbol, Can you give me example same as above(using PictureFillSymbol)?

I want when the query is started and the results will showing frame with picture.

I have tried, but the problem is when i tried to show the image and the image not showed, and so i was googling but i can't find the tutorial.

I hope you can help me about this. Please, ;-).


Thanks.

Respeto.

[HugoCardenas]

Jay,
Thanks a lot!
I works really well.  This is good work!  I am sure many ESRI users out there will be using this code you have put together.  I will keep your comment lines in my code, as a tribute to you....

To use the code with the renderer for a Feature Service layer, just add the following two lines at the beginning and end of Jay's code:

<esri:SimpleRenderer x:Key="SelectRenderer">
     <esri:SimpleRenderer.Symbol>
        ...Jay's code starts here....
        ...
        ...Jay's code ends here....
     </esri:SimpleRenderer.Symbol>
</esri:SimpleRenderer>

Then, set the "Renderer" property of the FeatureLayer as follows:

Renderer="{StaticResource SelectRenderer}"

¡Muchísimas gracias, amigo Jay!

Hugo.

[JMcNeil]

Agiska,

I'm not entirely sure what you mean when you are referring to the "PictureFillSymbol."  The code I wrote uses images so it is using pictures but I'm guessing you want to take this same concept for markers(points) and apply it to polygons(Fill).  I'm not sure you can do a straight conversion but if you wanted to try all you would need to use replace esri:SimpleMarkerSymbol  with esri:FillSymbol and then I would change the images Stretch Property from None to UniformToFill so Stretch="UniformToFill" so you code would look like this

<esri:FillSymbol x:Key="SelectFillRenderer">
                <esri:FillSymbol.ControlTemplate>
                    <ControlTemplate>


                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImagePDF" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImageExcel" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>


                                    </VisualState>

                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>



                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImageExcel" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImagePDF" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Selected">
                                        <Storyboard>


                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImageExcel" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ImagePDF" Storyboard.TargetProperty="Opacity">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Grid>
                                <Image x:Name="ImageExcel" Source="Images/Excel.png" Stretch="UniformToFill" />
                                <Image x:Name="ImagePDF" Source="Images/pdf.png" Stretch="UniformToFill" />

                            </Grid>

                        </Grid>
                    </ControlTemplate>
                </esri:FillSymbol.ControlTemplate>
            </esri:FillSymbol>

If you have crazy shape polys and your picture/image isn't completed colored (for example you boarder is transparent or something) then this probably won't look that clean.  I didn't give this a shot so I'm not standing by look and feel but I'm sure it should work. 

IF this is what you are after you should look at the example in the interactive sdk

Look at the example
http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#VideoFills

Basically it is doing a query on the western states so if you mouse over any  of them it will play a video.  You could do the same thing and replace the video feed with your icon/picture/image.  All the states are being queried and begin the video when the mouseover event fires so this is all happening in code behind but if you look at the California video notice it is happening in the XAML.  Take a close look at the XAML and you see they set the small things like the green board and it's thickness.      IF you take my example above I would try to take the esri example and add some flare like a boarder or something....just a thought.

Jay