topic Re: highlight geometry on mouse over in ArcGIS API for Silverlight Questions

highlight geometry on mouse over

AgatinoLa_Rosa — Tue, 07 Sep 2010 17:04:55 GMT

I am looking for a sample code triggering a color change in a polygon feature of a silverlight map control when passing it over with the mouse. Thanks.

Re: highlight geometry on mouse over

JenniferNery — Tue, 07 Sep 2010 18:34:06 GMT

You can use MouseEnter, MouseLeave events on your GraphicsLayer and mark the e.Graphic.Selected to true/false to select/unselect feature as you hover.

If you do not want to affect the feature's selected property, you can add another GraphicsLayer that will always have one feature. In your MouseEnter, MouseLeave event handlers, instead of setting e.Graphic's selected property, you can simply add e.Graphic to the GraphicsLayer you just created. Be sure that this GraphicsLayer provide a different symbol for the graphic so that it can be identified on hover. You may use a renderer or set symbol on the new graphic instance.

Re: highlight geometry on mouse over

dotMorten_esri — Tue, 07 Sep 2010 20:49:52 GMT

Use the MouseOver state of the graphic.
See: http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#CustomSymbols
3 of the marker symbols has a hover state defined. This is basically just a storyboard you want to trigger when the user hovers over a graphic.

Re: highlight geometry on mouse over

AgatinoLa_Rosa — Thu, 09 Sep 2010 16:16:18 GMT

I have followed your instructions, however when I set the event such as MouseEnter to the graphiclayer I get the following message.

No overload for 'GraphicsLayer_MouseEnter' matches delegate 'MouseEventHandler

I have also tried to add the handler at the Initialize event

((GraphicsLayer)sender).MouseEnter += new GraphicsLayer.MouseEventHandler(GraphicsLayer_MouseEnter);

but no luck. Any suggestion?

Re: highlight geometry on mouse over

JenniferNery — Mon, 13 Sep 2010 02:44:27 GMT

The better solution would be to define visual states as Morten had suggested.

The MouseEnter, MouseLeave events are on the Map.

Re: highlight geometry on mouse over

AgatinoLa_Rosa — Sat, 09 Oct 2010 16:34:16 GMT

Thanks, it has been helpful the following link: http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#CustomSymbols.

However it takes into consideration only MarkerSymbol. Is there any other example using Fill symbols? I would like also to change fill symbol when hovering a polygon. Thanks.

Re: highlight geometry on mouse over

JMcNeil — Sat, 09 Oct 2010 17:25:07 GMT

Take a look at this for fillsymbol

http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#SpatialQuery

Re: highlight geometry on mouse over

AgatinoLa_Rosa — Sun, 10 Oct 2010 13:39:02 GMT

I have seen that example several times checking on query procedures and never focused on the fill symbol I am looking for. Thank you.

Re: highlight geometry on mouse over

AgatinoLa_Rosa — Tue, 12 Oct 2010 12:54:07 GMT

I am not able to see any symbol for the states - normal, mouseover, selection - defined in the xaml. I am still trying to understand how it works. Following used codes, hopefully I get help.

XAML Code:

       <Grid x:Name="MapLayout" Width="750" Height="600" Margin="0,75,0,0">
            <Grid.Resources>
                <esri:FillSymbol x:Key="ResultsFillSymbol">
                    <esri:FillSymbol.ControlTemplate>
                         <ControlTemplate x:Name="CustomMemberTemplate" >
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="#880000FF" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="Brown" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="Orange" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                    </esri:FillSymbol.ControlTemplate>
                </esri:FillSymbol>
            </Grid.Resources>

The cs looks like:

                foreach (Graphic resultingFeature in args.FeatureSet.Features)
                {
                    myGraphicsLayer.Graphics.Add(resultingFeature);
                    resultingFeature.Symbol = (FillSymbol)MapLayout.Resources["ResultsFillSymbol"];
                }

Re: highlight geometry on mouse over

DavidAshton — Sat, 11 Dec 2021 20:35:24 GMT

I am not able to see any symbol for the states - normal, mouseover, selection - defined in the xaml. I am still trying to understand how it works. Following used codes, hopefully I get help.

XAML Code:

       <Grid x:Name="MapLayout" Width="750" Height="600" Margin="0,75,0,0">
            <Grid.Resources>
                <esri:FillSymbol x:Key="ResultsFillSymbol">
                    <esri:FillSymbol.ControlTemplate>
                         <ControlTemplate x:Name="CustomMemberTemplate" >
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="#880000FF" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="Brown" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="Orange" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                    </esri:FillSymbol.ControlTemplate>
                </esri:FillSymbol>
            </Grid.Resources>

The cs looks like:

                foreach (Graphic resultingFeature in args.FeatureSet.Features)
                {
                    myGraphicsLayer.Graphics.Add(resultingFeature);
                    resultingFeature.Symbol = (FillSymbol)MapLayout.Resources["ResultsFillSymbol"];
                }

Alarosa,

We might be dealing with a similar problem. I'm trying to make spatial query work for a point layer and I can't get the markersymbol to show up at all. Maybe if I help you Karma will strike today and I will figure out my problem by solving yours and/or someone like you will help me. Here's my post if you want to check it out and return the favor if I help.

http://forums.arcgis.com/threads/14622-Super-Easy-Point-Graphic

In the mean time here's what I think I know.

In your code behind C# you have this which is working with your xaml storyboard
The FillSymbol is being passed

  GraphicsLayer graphicsLayer = Map.Layers["MySelectionGraphicsLayer"] as GraphicsLayer;

            if (featureSet != null && featureSet.Features.Count > 0)
            {
                foreach (Graphic feature in featureSet.Features)
                {
                    feature.Symbol = LayoutRoot.Resources["ResultsFillSymbol"] as FillSymbol;
                    graphicsLayer.Graphics.Insert(0, feature);
                }
            }

And then here's your Story for you Fill mouse over and out

 <esri:FillSymbol x:Key="ResultsFillSymbol">
                <esri:FillSymbol.ControlTemplate>
                    <ControlTemplate x:Name="CustomPolygonTemplate">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Fill).(Color)"
                                                To="#FFF5FF45" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Fill).(Color)"
                                                To="#8800FFFF" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Fill).(Color)"
                                                To="#8800FFFF" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path x:Name="Element" Stroke="Blue" Fill="#880000FF"
                                StrokeStartLineCap="Round" StrokeThickness="2" 
                                StrokeLineJoin="Round" StrokeEndLineCap="Round" />
                        </Grid>
                    </ControlTemplate>
                </esri:FillSymbol.ControlTemplate>
            </esri:FillSymbol>

In your xaml you should also have

Default fill or initail, which should look like this mine is yellow


            <esri:FillSymbol x:Key="DefaultFillSymbol" >
                <esri:FillSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Path x:Name="Element" IsHitTestVisible="False" Fill="#66FF0000" 
                            Stroke="Red" StrokeThickness="1"/>
                    </ControlTemplate>
                </esri:FillSymbol.ControlTemplate>
            </esri:FillSymbol>

You also need this in your xaml to, in your map declar area ---- Actually I don't think you need this so don't add this...

 <esri:GraphicsLayer ID="MySelectionGraphicsLayer" 
                                    MouseEnter="GraphicsLayer_MouseEnter" 

                                    MouseLeave="GraphicsLayer_MouseLeave" />

Oh one more thing in your code behind, under your Public MainPage you need initialize your DefaultFillSymbol

 _drawSurface = new Draw(Map)
            {
                
                FillSymbol = LayoutRoot.Resources["DefaultFillSymbol"] as FillSymbol
            };

Sorry for all the bad/hack language I barely read code and really haven't mastered the correct terms.

David.

Re: highlight geometry on mouse over

JMcNeil — Sat, 11 Dec 2021 20:35:27 GMT

I am not able to see any symbol for the states - normal, mouseover, selection - defined in the xaml. I am still trying to understand how it works. Following used codes, hopefully I get help.

XAML Code:

       <Grid x:Name="MapLayout" Width="750" Height="600" Margin="0,75,0,0">
            <Grid.Resources>
                <esri:FillSymbol x:Key="ResultsFillSymbol">
                    <esri:FillSymbol.ControlTemplate>
                         <ControlTemplate x:Name="CustomMemberTemplate" >
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="#880000FF" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="Brown" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Member"
                                                        Storyboard.TargetProperty="(Fill).(Color)"
                                                            To="Orange" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                    </esri:FillSymbol.ControlTemplate>
                </esri:FillSymbol>
            </Grid.Resources>

The cs looks like:

                foreach (Graphic resultingFeature in args.FeatureSet.Features)
                {
                    myGraphicsLayer.Graphics.Add(resultingFeature);
                    resultingFeature.Symbol = (FillSymbol)MapLayout.Resources["ResultsFillSymbol"];
                }

Alarosa,

Did you solve your probelm?

I think you need to define your Storyboard.TargetName="Member"

Between your closing </VisualStateManager.VisualStateGroups>

and your closing           </Grid>

And this
<Path x:Name="Member" Stroke="Blue" Fill="Black"
                                StrokeStartLineCap="Round" StrokeThickness="2"
                                StrokeLineJoin="Round" StrokeEndLineCap="Round" />

So it should look like ending FillSymbol template should look like this.


</VisualStateManager.VisualStateGroups>

<Path x:Name="Member" Stroke="Blue" Fill="Black"
                                StrokeStartLineCap="Round" StrokeThickness="2" 
                                StrokeLineJoin="Round" StrokeEndLineCap="Round" />

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

If you are using the spatial query tools with this code you should realize that normal state is the selected color and the selected state is the mouseover.

But I'm not an expert so.......don't take my advice! Get it running and start commenting out visiual states and see what happens.

Re: highlight geometry on mouse over

dotMorten_esri — Wed, 13 Oct 2010 22:03:01 GMT

For line and polygons you should not be putting anything but a "Path" object in your template, and it must have the name "Element". You can place the visual states inside it:
<ControlTemplate>
<Path x:Name="Member" Stroke="Blue" Fill="Black"
StrokeStartLineCap="Round" StrokeThickness="2"
StrokeLineJoin="Round" StrokeEndLineCap="Round" >
<VisualStateManager>
...
</VisualStateManager>
</Path>
</ControlTemplate>

This is a limitation for polygons and polylines (since they are paths and not just any UIElement).

Re: highlight geometry on mouse over

AgatinoLa_Rosa — Thu, 14 Oct 2010 10:02:32 GMT

Thanks Morten. Now the visual states work and I can also play with duration times. I have one more question whenever you can answer.

I have set the duration time of the Normal state to 5 seconds. So when loading the map the fill color goes from the Path fill color to the Normal fill color in 5 seconds. When I hover on a polygon the fill color goes to the MouseOver fill color fine. When I leave this polygon the MouseOver fill color goes to the Normal fill color in 5 seconds too. Is there a way I can set the duration from MouseOver to Normal with a different value?

Thanks.