silverlight - ToggleButton Control VisualStateManager: Handling Multiple Hover States -

in reference previous question had (silverlight mvvm confusion: updating image based on state) started new approach. left existing question because didn't want sure new approach correct answer (i still welcome comments on original problem).

if read previous question, please feel free skip paragraph: i'm trying build control provides functionality similar audio play button. when app in "play" mode, app should display "pause.png" image. when it's paused, should display "play.png" image. there 2 additional images account either state when user hovers on control (e.g., "play_hover.png" , "pause_hover.png"). state determined isplaying property in view model.

i decide use togglebutton determine image display based on current status. remember, when isplaying false, play button displayed , when it's true, pause button displayed. such, came following xaml. works except hovers:

<usercontrol x:class="foo.barmycontrol"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     xmlns:i="clr-namespace:system.windows.interactivity;assembly=system.windows.interactivity"     mc:ignorable="d"     d:designheight="100" d:designwidth="200">     <usercontrol.resources>         <style x:key="mybuttonstyle" targettype="togglebutton">             <setter property="isenabled" value="true"/>             <setter property="istabstop" value="true"/>             <setter property="background" value="#ffa9a9a9"/>             <setter property="foreground" value="#ff000000"/>             <setter property="minwidth" value="5"/>             <setter property="minheight" value="5"/>             <setter property="margin" value="0"/>             <setter property="horizontalalignment" value="left" />             <setter property="horizontalcontentalignment" value="center"/>             <setter property="verticalalignment" value="top" />             <setter property="verticalcontentalignment" value="center"/>             <setter property="cursor" value="hand"/>             <setter property="template">                 <setter.value>                     <controltemplate targettype="togglebutton">                         <grid>                             <visualstatemanager.visualstategroups>                                 <visualstategroup x:name="checkstates">                                     <visualstate x:name="checked">                                         <storyboard>                                             <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="pause">                                                 <discreteobjectkeyframe keytime="0">                                                     <discreteobjectkeyframe.value>                                                         <visibility>visible</visibility>                                                     </discreteobjectkeyframe.value>                                                 </discreteobjectkeyframe>                                             </objectanimationusingkeyframes>                                             <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="play">                                                 <discreteobjectkeyframe keytime="0">                                                     <discreteobjectkeyframe.value>                                                         <visibility>collapsed</visibility>                                                     </discreteobjectkeyframe.value>                                                 </discreteobjectkeyframe>                                             </objectanimationusingkeyframes>                                         </storyboard>                                     </visualstate>                                     <visualstate x:name="unchecked">                                         <storyboard>                                             <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="play">                                                 <discreteobjectkeyframe keytime="0">                                                     <discreteobjectkeyframe.value>                                                         <visibility>visible</visibility>                                                     </discreteobjectkeyframe.value>                                                 </discreteobjectkeyframe>                                             </objectanimationusingkeyframes>                                             <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="pause">                                                 <discreteobjectkeyframe keytime="0">                                                     <discreteobjectkeyframe.value>                                                         <visibility>collapsed</visibility>                                                     </discreteobjectkeyframe.value>                                                 </discreteobjectkeyframe>                                             </objectanimationusingkeyframes>                                         </storyboard>                                     </visualstate>                                     <visualstate x:name="indeterminate" />                                 </visualstategroup>                             </visualstatemanager.visualstategroups>                             <image x:name="play" source="/foo.bar;component/resources/icons/bar/play.png" />                             <image x:name="pause" source="/foo.bar;component/resources/icons/bar/pause.png" visibility="collapsed" />                             <image x:name="playhover" source="/foo.bar;component/resources/icons/bar/play_hover.png" visibility="collapsed" />                             <image x:name="pausehover" source="/foo.bar;component/resources/icons/bar/pause_hover.png" visibility="collapsed" />                         </grid>                     </controltemplate>                 </setter.value>             </setter>         </style>     </usercontrol.resources>     <grid x:name="layoutroot" background="white">         <togglebutton style="{staticresource mybuttonstyle}" ischecked="{binding liveenabled}" command="{binding changestatus}" height="30" width="30" />     </grid> </usercontrol>

how have different hover images both states? if add hover state commonstates group, i'll able account hover of 1 of states (checked or unchecked).

with togglebutton not possible have different hover / mouse on state common button. common states normal (what initally see), mouseover,pressed , disabled

the other states related checked, unchecked or intermediate. here have done can set different images etc various state. mouseover though roll common state.

if have have funcionality create own custom control , handle mouseover animation based upon active state. require more code on back-end need redefine button class object , insert testing various states allow set animation play each state. done don't know if worth effort.