i want change combobox arrow color while mouse over. found little squesre around arrow , change while mouse overis true:
<trigger property="uielement.ismouseover" value="true"> <setter property="panel.background" targetname="buttonborder" value="white"/> </trigger> 
mouse over false:
<trigger property="uielement.ismouseover" value="false"> <setter property="panel.background" targetname="buttonborder" value="transparent"/> </trigger> 
edit
<controltemplate targettype="togglebutton" x:key="comboboxtogglebuttontemplate"> <grid> <grid.columndefinitions> <columndefinition /> <columndefinition width="20" /> </grid.columndefinitions> <border grid.columnspan="2" name="border" borderbrush="{staticresource comboboxnormalborderbrush}" cornerradius="0" borderthickness="1, 1, 1, 1" background="transparent" /> <border grid.column="1" margin="1, 1, 1, 1" borderbrush="#444" name="buttonborder" cornerradius="0, 0, 0, 0" borderthickness="0, 0, 0, 0" background="#ff998f8f" /> <path name="arrow" grid.column="1" data="m0,0 l0,2 l4,6 l8,2 l8,0 l4,4 z" horizontalalignment="center" fill="#444" verticalalignment="center" /> </grid> <controltemplate.triggers> <trigger property="uielement.ismouseover" value="true"> <setter property="panel.background" targetname="buttonborder" value="transparent"/> <setter property="shape.fill" targetname="arrow" value="gainsboro"/> </trigger> <trigger property="uielement.ismouseover" value="false"> <setter property="panel.background" targetname="buttonborder" value="transparent"/> <setter property="shape.fill" targetname="arrow" value="gray"/> </trigger> <trigger property="togglebutton.ischecked" value="true"> <setter property="panel.background" targetname="buttonborder" value="whitesmoke"/> <setter property="shape.fill" targetname="arrow" value="#ff8d979e"/> </trigger> <trigger property="uielement.isenabled" value="false"> <setter property="panel.background" targetname="border" value="{staticresource comboboxdisabledbackgroundbrush}"/> <setter property="panel.background" targetname="buttonborder" value="{staticresource comboboxdisabledbackgroundbrush}"/> <setter property="border.borderbrush" targetname="buttonborder" value="{staticresource comboboxdisabledborderbrush}"/> <setter property="textelement.foreground" value="{staticresource comboboxdisabledforegroundbrush}"/> <setter property="shape.fill" targetname="arrow" value="#999"/> </trigger> </controltemplate.triggers> </controltemplate> <style targettype="{x:type combobox}" > <setter property="uielement.snapstodevicepixels" value="true"/> <setter property="frameworkelement.overridesdefaultstyle" value="true"/> <setter property="scrollviewer.horizontalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.verticalscrollbarvisibility" value="auto"/> <setter property="scrollviewer.cancontentscroll" value="true"/> <setter property="textelement.foreground" value="black"/> <setter property="frameworkelement.focusvisualstyle" value="{x:null}"/> <setter property="control.template"> <setter.value> <controltemplate targettype="combobox"> <grid> <togglebutton name="togglebutton" grid.column="2" clickmode="press" focusable="false" ischecked="{binding path=isdropdownopen, relativesource={relativesource templatedparent}, mode=twoway}" template="{staticresource comboboxtogglebuttontemplate}"/> <contentpresenter name="contentsite" margin="5, 3, 23, 3" ishittestvisible="false" horizontalalignment="left" verticalalignment="center" content="{templatebinding combobox.selectionboxitem}" contenttemplate="{templatebinding combobox.selectionboxitemtemplate}" contenttemplateselector="{templatebinding itemtemplateselector}"/> <textbox name="part_editabletextbox" margin="3, 3, 23, 3" isreadonly="{templatebinding isreadonly}" visibility="hidden" background="transparent" horizontalalignment="left" verticalalignment="center" focusable="true" > <textbox.template> <controltemplate targettype="textbox" > <border name="part_contenthost" focusable="false" /> </controltemplate> </textbox.template> </textbox> <!-- popup showing items --> <popup name="popup" placement="bottom" focusable="false" allowstransparency="true" isopen="{templatebinding combobox.isdropdownopen}" popupanimation="slide" > <grid name="dropdown" snapstodevicepixels="true" minwidth="{templatebinding frameworkelement.actualwidth}" maxheight="{templatebinding combobox.maxdropdownheight}"> <border name="dropdownborder" background="transparent" margin="0, 1, 0, 0" cornerradius="0" borderthickness="1,1,1,1" borderbrush="{staticresource comboboxnormalborderbrush}"/> <scrollviewer margin="4" snapstodevicepixels="true"> <itemspresenter keyboardnavigation.directionalnavigation="contained" /> </scrollviewer> </grid> </popup> </grid> <controltemplate.triggers> <trigger property="itemscontrol.hasitems" value="false"> <setter property="frameworkelement.minheight" targetname="dropdownborder" value="95"/> </trigger> <trigger property="uielement.isenabled" value="false"> <setter property="textelement.foreground" value="{staticresource comboboxdisabledforegroundbrush}"/> </trigger> <trigger property="itemscontrol.isgrouping" value="true"> <setter property="scrollviewer.cancontentscroll" value="false"/> </trigger> <trigger property="combobox.iseditable" value="true"> <setter property="keyboardnavigation.istabstop" value="false"/> <setter property="uielement.visibility" targetname="part_editabletextbox" value="visible"/> <setter property="uielement.visibility" targetname="contentsite" value="hidden"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <!-- endregion -->
btw want change border color mouse over
what need right click combobox , choose edit template -> edit copy (which give entire template combobox) need find "comboboxtogglebutton" template, , find path inside it, can change color or replace different vector if wanted to).
Comments
Post a Comment