highlight geometry on mouse over

4512
12
09-07-2010 10:04 AM
AgatinoLa_Rosa
Emerging Contributor
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.
0 Kudos
12 Replies
JMcNeil
Deactivated User
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.
0 Kudos
dotMorten_esri
Esri Notable Contributor
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).
0 Kudos
AgatinoLa_Rosa
Emerging Contributor
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.
0 Kudos