c# - Change background of part of toolbar -
how can change background of marked element(part of toolbar, in xaml)? 
<toolbar grid.column="1" x:name="additionalmodulebuttonsstackpanel" background="{x:null}"/> i not know how element called. need make background transparent.
according this answer,
the overflow button unfortunately has fixed background.
that means must supply entire template. here style of toolbar (long know...), make sure include in xaml (i added window.resources):
resource:
<window.resources> <lineargradientbrush x:key="toolbarhorizontalbackground" endpoint="0,1" startpoint="0,0"> <gradientstop color="#e2e0db" offset="0"/> <gradientstop color="#eae8e4" offset="0.5"/> <gradientstop color="#d5d2ca" offset="0.9"/> <gradientstop color="#dbd8d1" offset="1"/> </lineargradientbrush> <lineargradientbrush x:key="toolbartogglebuttonverticalbackground" endpoint="1,0" startpoint="0,0"> <gradientstop color="#e6e6e6" offset="0"/> <gradientstop color="#d2d2d2" offset="0.5"/> <gradientstop color="#808080" offset="1"/> </lineargradientbrush> <solidcolorbrush x:key="toolbarbuttonhover" color="#b6bdd2"/> <solidcolorbrush x:key="toolbargripper" color="#a0a0a0"/> <style x:key="toolbarverticaloverflowbuttonstyle" targettype="{x:type togglebutton}"> <setter property="background" value="{staticresource toolbartogglebuttonverticalbackground}"/> <setter property="minheight" value="0"/> <setter property="minwidth" value="0"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <border x:name="bd" background="{templatebinding background}" cornerradius="0,0,3,3" snapstodevicepixels="true"> <canvas horizontalalignment="right" height="6" margin="2,7,2,2" snapstodevicepixels="true" verticalalignment="bottom" width="7"> <path data="m 1.5 1 l 1.5 6" stroke="white"/> <path data="m 0.5 0 l 0.5 5" stroke="{templatebinding foreground}"/> <path data="m 3.5 0.5 l 7 3.5 l 4 6.5 z" fill="white"/> <path data="m 3 -0.5 l 6 2.5 l 3 5.5 z" fill="{templatebinding foreground}"/> </canvas> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="background" targetname="bd" value="{staticresource toolbarbuttonhover}"/> </trigger> <trigger property="iskeyboardfocused" value="true"> <setter property="background" targetname="bd" value="{staticresource toolbarbuttonhover}"/> </trigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="{staticresource toolbargripper}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <style.triggers> <datatrigger binding="{binding source={x:static systemparameters.highcontrast}}" value="true"> <setter property="background" value="{dynamicresource {x:static systemcolors.controlbrushkey}}"/> </datatrigger> </style.triggers> </style> <lineargradientbrush x:key="toolbarverticalbackground" endpoint="1,0" startpoint="0,0"> <gradientstop color="#e2e0db" offset="0"/> <gradientstop color="#eae8e4" offset="0.5"/> <gradientstop color="#d5d2ca" offset="0.9"/> <gradientstop color="#dbd8d1" offset="1"/> </lineargradientbrush> <lineargradientbrush x:key="toolbartogglebuttonhorizontalbackground" endpoint="0,1" startpoint="0,0"> <gradientstop color="#e6e6e6" offset="0"/> <gradientstop color="#d2d2d2" offset="0.5"/> <gradientstop color="#808080" offset="1"/> </lineargradientbrush> <style x:key="toolbarhorizontaloverflowbuttonstyle" targettype="{x:type togglebutton}"> <setter property="background" value="{staticresource toolbartogglebuttonhorizontalbackground}"/> <setter property="minheight" value="0"/> <setter property="minwidth" value="0"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <border x:name="bd" background="{templatebinding background}" cornerradius="0,3,3,0" snapstodevicepixels="true"> <canvas horizontalalignment="right" height="7" margin="7,2,2,2" snapstodevicepixels="true" verticalalignment="bottom" width="6"> <path data="m 1 1.5 l 6 1.5" stroke="white"/> <path data="m 0 0.5 l 5 0.5" stroke="{templatebinding foreground}"/> <path data="m 0.5 4 l 6.5 4 l 3.5 7 z" fill="white"/> <path data="m -0.5 3 l 5.5 3 l 2.5 6 z" fill="{templatebinding foreground}"/> </canvas> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="background" targetname="bd" value="{staticresource toolbarbuttonhover}"/> </trigger> <trigger property="iskeyboardfocused" value="true"> <setter property="background" targetname="bd" value="{staticresource toolbarbuttonhover}"/> </trigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="{staticresource toolbargripper}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <style.triggers> <datatrigger binding="{binding source={x:static systemparameters.highcontrast}}" value="true"> <setter property="background" value="{dynamicresource {x:static systemcolors.controlbrushkey}}"/> </datatrigger> </style.triggers> </style> <solidcolorbrush x:key="toolbarmenuborder" color="#666666"/> <solidcolorbrush x:key="toolbarsubmenubackground" color="#f9f8f7"/> <style x:key="toolbarthumbstyle" targettype="{x:type thumb}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type thumb}"> <border background="transparent" padding="{templatebinding padding}" snapstodevicepixels="true"> <rectangle> <rectangle.fill> <drawingbrush tilemode="tile" viewbox="0,0,4,4" viewport="0,0,4,4" viewportunits="absolute" viewboxunits="absolute"> <drawingbrush.drawing> <drawinggroup> <geometrydrawing brush="white" geometry="m 1 1 l 1 3 l 3 3 l 3 1 z"/> <geometrydrawing brush="{staticresource toolbargripper}" geometry="m 0 0 l 0 2 l 2 2 l 2 0 z"/> </drawinggroup> </drawingbrush.drawing> </drawingbrush> </rectangle.fill> </rectangle> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="cursor" value="sizeall"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <style x:key="toolbarmainpanelborderstyle" targettype="{x:type border}"> <setter property="margin" value="0,0,11,0"/> <setter property="cornerradius" value="3,3,3,3"/> <style.triggers> <datatrigger binding="{binding source={x:static systemparameters.highcontrast}}" value="true"> <setter property="cornerradius" value="0,0,0,0"/> </datatrigger> </style.triggers> </style> <style x:key="toolbarstyle1" targettype="{x:type toolbar}"> <setter property="background" value="{staticresource toolbarhorizontalbackground}"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type toolbar}"> <grid x:name="grid" margin="3,1,1,1" snapstodevicepixels="true"> <grid x:name="overflowgrid" horizontalalignment="right"> <togglebutton x:name="overflowbutton" background="transparent" clickmode="press" focusvisualstyle="{x:null}" ischecked="{binding isoverflowopen, mode=twoway, relativesource={relativesource templatedparent}}" isenabled="{templatebinding hasoverflowitems}" style="{staticresource toolbarhorizontaloverflowbuttonstyle}"/> <popup x:name="overflowpopup" allowstransparency="true" focusable="false" isopen="{binding isoverflowopen, relativesource={relativesource templatedparent}}" popupanimation="{dynamicresource {x:static systemparameters.comboboxpopupanimationkey}}" placement="bottom" staysopen="false"> <themes:systemdropshadowchrome x:name="shdw" color="transparent"> <border x:name="toolbarsubmenuborder" borderbrush="{staticresource toolbarmenuborder}" borderthickness="1" background="{staticresource toolbarsubmenubackground}" renderoptions.cleartypehint="enabled"> <toolbaroverflowpanel x:name="part_toolbaroverflowpanel" keyboardnavigation.directionalnavigation="cycle" focusvisualstyle="{x:null}" focusable="true" margin="2" snapstodevicepixels="{templatebinding snapstodevicepixels}" keyboardnavigation.tabnavigation="cycle" wrapwidth="200"/> </border> </themes:systemdropshadowchrome> </popup> </grid> <border x:name="mainpanelborder" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" padding="{templatebinding padding}" style="{staticresource toolbarmainpanelborderstyle}"> <dockpanel keyboardnavigation.tabindex="1" keyboardnavigation.tabnavigation="local"> <thumb x:name="toolbarthumb" margin="-3,-1,0,0" padding="6,5,1,6" style="{staticresource toolbarthumbstyle}" width="10"/> <contentpresenter x:name="toolbarheader" contentsource="header" horizontalalignment="center" margin="4,0,4,0" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="center"/> <toolbarpanel x:name="part_toolbarpanel" isitemshost="true" margin="0,1,2,2" snapstodevicepixels="{templatebinding snapstodevicepixels}"/> </dockpanel> </border> </grid> <controltemplate.triggers> <trigger property="isoverflowopen" value="true"> <setter property="isenabled" targetname="toolbarthumb" value="false"/> </trigger> <trigger property="header" value="{x:null}"> <setter property="visibility" targetname="toolbarheader" value="collapsed"/> </trigger> <trigger property="toolbartray.islocked" value="true"> <setter property="visibility" targetname="toolbarthumb" value="collapsed"/> </trigger> <trigger property="hasdropshadow" sourcename="overflowpopup" value="true"> <setter property="margin" targetname="shdw" value="0,0,5,5"/> <setter property="snapstodevicepixels" targetname="shdw" value="true"/> <setter property="color" targetname="shdw" value="#71000000"/> </trigger> <trigger property="orientation" value="vertical"> <setter property="margin" targetname="grid" value="1,3,1,1"/> <setter property="style" targetname="overflowbutton" value="{staticresource toolbarverticaloverflowbuttonstyle}"/> <setter property="height" targetname="toolbarthumb" value="10"/> <setter property="width" targetname="toolbarthumb" value="auto"/> <setter property="margin" targetname="toolbarthumb" value="-1,-3,0,0"/> <setter property="padding" targetname="toolbarthumb" value="5,6,6,1"/> <setter property="margin" targetname="toolbarheader" value="0,0,0,4"/> <setter property="margin" targetname="part_toolbarpanel" value="1,0,2,2"/> <setter property="dockpanel.dock" targetname="toolbarthumb" value="top"/> <setter property="dockpanel.dock" targetname="toolbarheader" value="top"/> <setter property="horizontalalignment" targetname="overflowgrid" value="stretch"/> <setter property="verticalalignment" targetname="overflowgrid" value="bottom"/> <setter property="placement" targetname="overflowpopup" value="right"/> <setter property="margin" targetname="mainpanelborder" value="0,0,0,11"/> <setter property="background" value="{staticresource toolbarverticalbackground}"/> </trigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="{dynamicresource {x:static systemcolors.graytextbrushkey}}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <style.triggers> <datatrigger binding="{binding source={x:static systemparameters.highcontrast}}" value="true"> <setter property="background" value="{dynamicresource {x:static systemcolors.controlbrushkey}}"/> </datatrigger> </style.triggers> </style> </window.resources> then add style doing this:
<grid> <toolbar x:name="additionalmodulebuttonsstackpanel" background="{x:null}" style="{dynamicresource toolbarstyle1}" /> </grid>
Comments
Post a Comment