Change background color of node on mouse over

What is the best way to change the background color of a node when the user hovers the mouse over the node. I assume you’d use some sort of combination of the Mouse_Enter and Mouse_Leave events, but what would you put in them?



Thanks!

The solution actually has nothing to do with GoXam. Just use the VisualStateManager to define animations that happen on visual state changes.

Consider: mouseover styling
Or: hover button images

Okay, I looked at the mouseover styling link, but I’m not sure where to assign the link to the visual state manager. I’ve got a DataTemplate, and then inside that I’ve got a go:SpotPanel, and inside that, I’ve got a go:NodePanel, and inside that, I’ve got a Path (which is where I’ve specified the fill color) and a TextBlock for displaying the node’s content.



When I try this:

















<go:SpotPanel Style="{StaticResource SpotPanelStyle}" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"

MouseLeftButtonUp=“Node_MouseLeftButtonUp”>

<go:NodePanel Sizing=“Auto” go:SpotPanel.Main=“True”>

go:NodePanel.Triggers







</go:NodePanel.Triggers>

<Path x:Name=“Shape” Style="{StaticResource NodeShapeStyle}"

Fill="{Binding Path=Data.Type, Converter={StaticResource nodeTypeBrushConverter}}"

go:NodePanel.Figure="{Binding Path=Data.Service.Layer, Converter={StaticResource intShapeConverter}}"/>



</go:NodePanel>

</go:SpotPanel>







I get a cryptic error message, “Error HRESULT E_FAIL has been returned from a call to a COM component”. If I take out the go:NodePanel.Triggers tag, then the error goes away, but I don’t get my color’s changed either. If it makes a difference, I’m using silverlight.

Actually, it makes a lot of difference which platform you’re on. What you wrote won’t work in Silverlight.

I suggest you read about the VisualStateManager.

Although it isn’t necessary, you might find it simpler to experiment by not using GoXam, nor even a DataTemplate. Just get the effects you want on a Rectangle that you have defined in a Grid on your page.

Once you get it working, you can transfer it to work in a DataTemplate used in a regular control, such as a ListBox.

Finally, you can apply it to an element in a Diagram.NodeTemplate.

Okay, thanks. Looks like I’ve got some homework to do… :-)