c# - Silverlight; Change Grid's background on mouseover -

c# - Silverlight; Change Grid's background on mouseover -

simply want alter grid's background color (in silverlight) when mouse enters , reset when mouse leaves. tried different ways no success. here have tried:

1: using eventtriggers:

<grid.triggers> <eventtrigger routedevent="mouseenter"> <beginstoryboard storyboard="{staticresouce mouseenter}"/> </eventtrigger> </grid.triggers>

this doesn't work , say:

the fellow member "ismouseover" not recognized or not accessible

2. using style.triggers

i tried setting simple triggers in style targettype="grid" in silverlight seems there no way create style.triggers in xaml. here code:

<grid.style> <style targettype="grid"> <style.triggers> </style.triggers> </style> </grid.style>

but says:

the attachable property 'triggers' not found in type 'style'.

3. using interaction libraries

i used interactivity.dll , interaction.dll didnt' work too.

can help how alter grid background when mouse enters in silverlight?

there 3 possible solutions:

first solution: using visualsates: changing background on mouseover in silverlight can done via visualstates. here example:

<usercontrol class="myusercontrolwithvisualstates"> <grid x:name="rootgrid" background="uglyred"> <visualstatemanager.visualstategroups> <visualstategroup x:name="commonstates"> <visualstate x:name="normal"/> <visualstate x:name="disabled"/> <visualstate x:name="mouseover"> <storyboard> <coloranimation to="green" storyboard.targetproperty="(background).(solidcolorbrush.color)" storyboard.targetname="rootgrid"/> </storyboard> </visualstate> </visualstategroup> <visualstategroup x:name="focusstates"> <visualstate x:name="focused"/> <visualstate x:name="unfocused"/> </visualstategroup> </visualstatemanager.visualstategroups> <othergridcontent ... /> </grid> </usercontrol>

and code behind:

public partial class myusercontrolwithvisualstates : usercontrol { private bool m_ismouseover; public myusercontrolwithvisualstates() { initializecomponent(); rootgrid.mouseenter += onrootgridmouseenter; rootgrid.mouseleave += onrootgridmouseleave; } private void updatevisualstates() { if ( m_ismouseover ) visualstatemanager.gotostate( this, "mouseover", true ); else visualstatemanager.gotostate( this, "normal", true ); } private void onrootgridmouseleave( object sender, mouseeventargs e ) { m_ismouseover = false; updatevisualstates(); } private void onrootgridmouseenter( object sender, mouseeventargs e ) { m_ismouseover = true; updatevisualstates(); } }

second solution: changing properties via codebehind: mouseenter , mouseleave event handlers can alter grid's background color.

public partial class myusercontrol : usercontrol { private bool m_ismouseover; public myusercontrol() { initializecomponent(); rootgrid.mouseenter += onrootgridmouseenter; rootgrid.mouseleave += onrootgridmouseleave; } private void updatebackground() { if (m_ismouseover) ((solidcolorbrush) rootgrid.background).color = colors.red; else ((solidcolorbrush) rootgrid.background).color = colors.green; } private void onrootgridmouseleave( object sender, mouseeventargs e ) { m_ismouseover = false; updatebackground(); } private void onrootgridmouseenter( object sender, mouseeventargs e ) { m_ismouseover = true; updatebackground(); } }

third solution: using triggers , actions in xaml:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

<grid x:name="thegrid" background="blue"> <grid.resources> <solidcolorbrush x:key="mouseoverbrush" color="green"/> <solidcolorbrush x:key="normalbrush" color="red"/> </grid.resources> <i:interaction.triggers> <i:eventtrigger eventname="mouseenter" sourcename="thegrid"> <ei:changepropertyaction targetname="thegrid" propertyname="background" value="{staticresource mouseoverbrush}"/> </i:eventtrigger> <i:eventtrigger eventname="mouseleave" sourcename="thegrid"> <ei:changepropertyaction targetname="thegrid" propertyname="background" value="{staticresource normalbrush}"/> </i:eventtrigger> </i:interaction.triggers> </grid>

c# silverlight triggers grid routedevent