wpf - Changing the "Hover Area" Shape of a Button -

  <button x:name="listitem_button_play" verticalalignment="center"            style="{staticresource playbuttonstyle}" foreground="{x:null}">           <image source="resources/listitem_button_play.png"/>   </button> 

i have button in datatemplate. applied style remove default hover effect. also, make grow bigger when mouse pointer enter hover area.

    <style x:key="playbuttonstyle" targettype="button">         <setter property="overridesdefaultstyle" value="true"/>         <setter property="margin" value="5"/>         <setter property="template">             <setter.value>                 <controltemplate targettype="button">                     <border x:name="border"                         width="{binding path=actualheight, elementname=border}"                         borderthickness="0"                         cornerradius="{binding path=actualheight, elementname=border}"                          background="{templatebinding background}">                         <contentpresenter horizontalalignment="center" verticalalignment="center" />                     </border>                     <controltemplate.triggers>                         <trigger property="ismouseover" value="true">                             <setter targetname="border" property="borderbrush" value="black" />                         </trigger>                     </controltemplate.triggers>                 </controltemplate>             </setter.value>         </setter>         <setter property="height" value="93"/>         <setter property="width" value="93"/>         <style.triggers>             <trigger property="ismouseover" value="true">                 <trigger.enteractions>                     <beginstoryboard>                         <storyboard>                             <doubleanimation from="93" to="103" storyboard.targetproperty="height" duration="0:0:0.2"/>                             <doubleanimation from="93" to="103" storyboard.targetproperty="width" duration="0:0:0.2"/>                         </storyboard>                     </beginstoryboard>                 </trigger.enteractions>                 <trigger.exitactions>                     <beginstoryboard>                         <storyboard>                             <doubleanimation from="103" to="93" storyboard.targetproperty="height" duration="0:0:0.2"/>                             <doubleanimation from="103" to="93" storyboard.targetproperty="width" duration="0:0:0.2"/>                         </storyboard>                     </beginstoryboard>                 </trigger.exitactions>             </trigger>         </style.triggers>     </style> 

i changed border shape of button follow image (ellipse). not hover area.

after experiments, can conclude although shape of border has changed, shape of hover area still same. red area above hover area.

is there way change hover area shape "play" image ??

avoid things height/width bindings have path itself. relativesource if need, in case none of should necessary. besides, have 2 setter's halfway down height , width hard set already...

i made few minor tweaks should sort out , tests fine on end.

<style x:key="playbuttonstyle" targettype="button">                 <setter property="overridesdefaultstyle" value="true"/>                 <setter property="background" value="purple"/>                 <setter property="margin" value="5"/>                 <setter property="height" value="93"/>                 <setter property="width" value="93"/>                 <setter property="template">                     <setter.value>                         <controltemplate targettype="button">                             <border x:name="border"                                     cornerradius="50"                                     background="{templatebinding background}"                                      borderbrush="{templatebinding borderbrush}"                                      borderthickness="{templatebinding borderthickness}">                                 <contentpresenter horizontalalignment="center" verticalalignment="center" />                             </border>                             <controltemplate.triggers>                                 <trigger property="ismouseover" value="true">                                     <setter targetname="border" property="borderbrush" value="black" />                                 </trigger>                             </controltemplate.triggers>                         </controltemplate>                     </setter.value>                 </setter>                                     <style.triggers>                     <trigger property="ismouseover" value="true">                         <trigger.enteractions>                             <beginstoryboard>                                 <storyboard>                                     <doubleanimation from="93" to="103" storyboard.targetproperty="height" duration="0:0:0.2"/>                                     <doubleanimation from="93" to="103" storyboard.targetproperty="width" duration="0:0:0.2"/>                                 </storyboard>                             </beginstoryboard>                         </trigger.enteractions>                         <trigger.exitactions>                             <beginstoryboard>                                 <storyboard>                                     <doubleanimation from="103" to="93" storyboard.targetproperty="height" duration="0:0:0.2"/>                                     <doubleanimation from="103" to="93" storyboard.targetproperty="width" duration="0:0:0.2"/>                                 </storyboard>                             </beginstoryboard>                         </trigger.exitactions>                     </trigger>                 </style.triggers>             </style>