c# - How does one make a transparent portion of a button clickable in WPF? -


i have bunch of toolstrip buttons transparent backgrounds in wpf. when user mouses on outside of button, nothing happens, because part of button transparent. once user mouses on 1 of non-transparent areas of button, "hover" behavior changes border , background color. background no longer transparent, hover behavior continues larger area before. transparent areas of button behave if button non-transparent there.

that is, have behavior button unselected despite mouse being inside button area:

bad behavior

and i'm trying button selected if user has not moused on foreground "white" part of button:

good behavior

i tried setting ishittestvisible on button itself, didn't seem make difference.

is there way ask wpf consider transparent areas of button significant?

xaml looks this:

<button style="{staticresource maintoolstripbuttonstyle}" margin="5,0,0,0" tooltip="{staticresource openbuttontext}" automationproperties.name="{staticresource openbuttontext}" command="{staticresource open}" content="{staticresource openicon}" />  <style x:key="maintoolstripbuttonstyle" targettype="button">     <setter property="width" value="24" />     <setter property="height" value="24" />     <setter property="background" value="{x:null}" />     <setter property="foreground" value="white" />     <setter property="padding" value="0" />     <!-- if users want use keyboard navigation, use menu instead. -->     <setter property="istabstop" value="false" />     <setter property="focusable" value="false"/>     <setter property="template">         <setter.value>             <controltemplate targettype="{x:type button}">                 <border name="border"               borderthickness="1"               borderbrush="{x:null}">                     <contentpresenter horizontalalignment="center"                           verticalalignment="center"                            recognizesaccesskey="true" />                 </border>                 <controltemplate.triggers>                     <!-- low contrast triggers selection / focus / enabled: -->                     <multidatatrigger>                         <multidatatrigger.conditions>                             <condition binding="{binding source={x:static vvm:systemparametersbindingtarget.instance}, path=highcontrast}" value="false" />                             <condition binding="{binding relativesource={relativesource self}, path=ismouseover}" value="true" />                             <condition binding="{binding relativesource={relativesource self}, path=isenabled}" value="true" />                         </multidatatrigger.conditions>                         <setter targetname="border"                   property="background"                   value="{staticresource hottoolbarbuttonbrush}" />                         <setter targetname="border"                   property="borderbrush"                   value="{staticresource hottoolbarbuttonborderbrush}" />                     </multidatatrigger>                      <multidatatrigger>                         <multidatatrigger.conditions>                             <condition binding="{binding source={x:static vvm:systemparametersbindingtarget.instance}, path=highcontrast}" value="false" />                             <condition binding="{binding relativesource={relativesource self}, path=isenabled}" value="false" />                         </multidatatrigger.conditions>                         <setter property="foreground"                   value="{staticresource disabledtoolbarbuttonbrush}" />                     </multidatatrigger>                      <!-- high contrast triggers omitted -->                 </controltemplate.triggers>             </controltemplate>         </setter.value>     </setter> </style>   

replace

<setter property="background" value="{x:null}" /> 

by

<setter property="background" value="transparent" /> 

and use background property in controltemplate:

<controltemplate targettype="{x:type button}">     <border name="border" background="{templatebinding background}" ...>         ...     </border> </controltemplate> 

Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

node.js - How to abort query on demand using Neo4j drivers -