Visual Feedback for custom button in WPF -

i have custom button in main window have ability provide visual feedback user when clicked, , when mouse hovers on it. use radialgrandientbrush color button. continue using in these events, don't know how implement inside trigger.

here current code:

   <button width="100"         height="100" click="button_click_1">         <button.template>             <controltemplate targettype="button">                 <grid>                     <ellipse stroke="black"                          strokethickness="1">                         <ellipse.fill>                             <radialgradientbrush>                                 <gradientstop offset="0"                                           color="white" />                                 <gradientstop offset="1"                                           color="lightskyblue" />                                 <gradientstop offset="1"                                           color="lightskyblue" />                                 <radialgradientbrush.transform>                                     <transformgroup>                                         <scaletransform scaley="0.65" />                                     </transformgroup>                                 </radialgradientbrush.transform>                             </radialgradientbrush>                         </ellipse.fill>                     </ellipse>                     <contentpresenter horizontalalignment="center"                                   verticalalignment="center"/>                 </grid>                 <controltemplate.triggers>                     <trigger property="ismouseover" value="true">                         <!--- need use radialgradientbrush again -->                         <setter ........ />                     </trigger>                 </controltemplate.triggers>             </controltemplate>         </button.template>     </button>  </window> 

how use brush, such radialgradientbrush setter, inside trigger?

thank you.

you can name ellipse in control template using x:name , access using targetname property on setter in triggers section.

sample code below:

<button width="100"         height="100" >         <button.template>             <controltemplate targettype="button">                 <grid>                     <ellipse stroke="black" x:name="ellipse"                          strokethickness="1">                         <ellipse.fill>                             <radialgradientbrush>                                 <gradientstop offset="0"                                           color="white" />                                 <gradientstop offset="1"                                           color="lightskyblue" />                                 <gradientstop offset="1"                                           color="lightskyblue" />                                 <radialgradientbrush.transform>                                     <transformgroup>                                         <scaletransform scaley="0.65" />                                     </transformgroup>                                 </radialgradientbrush.transform>                             </radialgradientbrush>                         </ellipse.fill>                     </ellipse>                     <contentpresenter horizontalalignment="center"                                   verticalalignment="center"/>                 </grid>                 <controltemplate.triggers>                     <trigger property="ismouseover" value="true">                             <setter targetname="ellipse" property="fill">                                 <setter.value>                                 <radialgradientbrush>                                 <gradientstop offset="0"                                           color="white" />                                 <gradientstop offset="1"                                           color="lightgreen" />                                 <gradientstop offset="1"                                           color="green" />                                 <radialgradientbrush.transform>                                     <transformgroup>                                         <scaletransform scaley="0.65" />                                     </transformgroup>                                 </radialgradientbrush.transform>                             </radialgradientbrush>                                 </setter.value>                             </setter>                     </trigger>                 </controltemplate.triggers>             </controltemplate>         </button.template>     </button> 

ideally, should use visualstatemanager achieve this.

refer msdn walkthrough customizing appearance of button using controltemplate , visualstatemanager