c# - Silverlight MVVM Confusion: Updating Image Based on State -

i'm developing silverlight application , i'm trying stick mvvm principals, i'm running problems changing source of image based on state of property in viewmodel. intents , purposes, can think of functionality i'm implementing play/pause button audio app. when in "play" mode, isactive true in viewmodel , "pause.png" image on button should displayed. when paused, isactive false in viewmodel , "play.png" displayed on button. naturally, there 2 additional images handle when mouse hovers on button.

i thought use style trigger, apparently they're not supported in silverlight. i've been reviewing forum post question similar mine it's suggested use visualstatemanager. while might changing image hover/normal states, part missing (or i'm not understanding) how work state set via view model. post seems apply events rather properties of view model. having said that, haven't completed normal/hover affects, either.

below silverlight 4 xaml. should noted i'm working mvvm light.

<usercontrol x:class="foo.bar.myusercontrol"     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="button">             <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="button">                         <grid>                             <image source="/foo.bar;component/resources/icons/bar/play.png">                                 <visualstatemanager.visualstategroups>                                     <visualstategroup x:name="active">                                         <visualstate x:name="mouseover">                                             <storyboard>                                                 <objectanimationusingkeyframes storyboard.targetproperty="source" storyboard.targetname="/foo.bar;component/resources/icons/bar/play_hover.png" />                                             </storyboard>                                         </visualstate>                                     </visualstategroup>                                 </visualstatemanager.visualstategroups>                             </image>                         </grid>                     </controltemplate>                 </setter.value>             </setter>         </style>     </usercontrol.resources>     <grid x:name="layoutroot" background="white">         <button style="{staticresource mybuttonstyle}" command="{binding changestatus}" height="30" width="30" />     </grid> </usercontrol>

what proper way update images on buttons state determined view model?

a simple way, bind isactive , isnotactive boolean property on vm visibility on 2 image controls inside content of button.

you have use booleantovisiblityconverter, of course.

second thought: bind isactive isenabled on button , make style show proper image. not sure if limitation mention in silverlight might prevent this.