How can I create a Mouse Hover State on Silverlight for a Stack Panel?

Question

Hi There,

I am trying to create a mouse hover state which it changes its opacity when a mouse is over the stack panel.

I have created the state, and created a mouse_enter event for the stack panel, and on the code behind cs file, I have the following code on Mouse_Enter event.

MouseOver.Begin();

Where MouseOver is the StoryBoard's name, but when my mouse is hovering over the stack panel or even click on the stack panel, nothing happened, what am I missing?

Thanks

PlayKid

Answer 1

Are you sure that the event is fired (you have wired up the event properly) ? Try checking using a message box or something. (System.Windows.MessageBox.Show())

Are you sure the storyboard works well in other situations (tried it on page load or something?)

If both these work, please explain how you went about adding the event handler.

Answer 2

In my experience, hooking up a Mouse_Enter event to the panel doesn't work because the content inside the panel ends up stealing the event. My usual solution is to set up a transparent target that covers the area that I want mouse events for and keep that item on the top of the visual tree. So the XAML looks something like:

<StackPanel x:Name="ContentPanel" SizeChanged="ContentPanelSizeChanged" >
    < /*Some content here */ >
</StackPanel>
<Canvas x:Name="HitTarget" Mouse_Enter="HitTargetMouseEnter" />

And then the ContentPanelSizeChanged handler sets the size of the HitTarget Canvas to be the actual (rendered) size of the StackPanel. Same thing works for MouseButtonDown events and I would presume it works for MouseWheel events as well. I'd recommend trying Senthil's troubleshooting suggestions, but if you can't get the event to fire at all (which I would presume is the problem), give this a try.

Answer 3

I figured out myself.

With this code:

VisualStateManager.GoToState

Thanks everyone.