wpf - Change MenuItem header and icon based on viewmodel property binding -

i cannot figure out how this, , 1 think pretty simple.

i have menuitem that's part of contextmenu. have binding boolean property on viewmodel. depending on state of property, want menuitem's header text , icon change.

i use ivalueconverter this, i'm sure there more elegant solution using datatemplate , triggers. can't figure out proper markup.

the code worked (snipped below) has 2 problems: 1 headertemplate doesn't appear contain icon, menuitems's text contains icon (normally icon appears on in left hand section - see image , compare copy , clear menuitems). additionally, clicking menuitem doesn't trigger datatemplate changes (note command works, viewmodel binding in fact toggle true/false state).

   <contextmenu>             <menuitem command="{binding source={x:static cmd:commands.pausecommand}}"                       commandparameter="{binding}">                 <menuitem.headertemplate>                     <datatemplate>                         <stackpanel orientation="horizontal">                             <image x:name="img" source="../icons/pause.png"/>                             <textblock x:name="txt" text="pause"/>                         </stackpanel>                         <datatemplate.triggers>                             <datatrigger binding="{binding ispaused}" value="true" >                                 <setter property="image.source" value="../icons/play.png" targetname="img"/>                                 <setter property="text" value="play" targetname="txt"/>                             </datatrigger>                         </datatemplate.triggers>                     </datatemplate>                 </menuitem.headertemplate>             </menuitem> 

you mean this? dont make things harder ;)

<contextmenu>                         <menuitem command="{binding source={x:static cmd:commands.pausecommand}}"                   commandparameter="{binding}">                             <menuitem.style>                                 <style targettype="menuitem">                                     <setter property="icon" value="../icons/play.png>"></setter>                                     <style.triggers>                                         <datatrigger binding="{binding ispaused, mode=oneway}" value="true">                                             <setter property="icon" value="../icons/pause.png"></setter>                                         </datatrigger>                                     </style.triggers>                                 </style>                             </menuitem.style>                         </menuitem>                     </contextmenu>