nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

highlight geometry on mouse over

AgatinoLa_Rosa

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.

Vind meer berichten getagd met

Accepted answers

All comments

AgatinoLa_Rosa

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.

SomeGISGuy

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).

JMcNeil

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.

DavidAshton

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.

AgatinoLa_Rosa

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"];
                }

AgatinoLa_Rosa

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

JMcNeil

Take a look at this for fillsymbol

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

AgatinoLa_Rosa

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.

JenniferNery

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

The MouseEnter, MouseLeave events are on the Map.

AgatinoLa_Rosa

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?

SomeGISGuy

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.

JenniferNery

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.