c# - Setting a border around an Expander button resizes it slightly -

c# - Setting a border around an Expander button resizes it slightly -

i making expander style, , noticed when border around expander's togglebutton goes 0 non-zero value - "0,0,1,1", in case - resized slightly, shrink within border:

not app-breaking... annoying can't prepare it. how can circumvent this? need border in togglebutton's style 0 when expander collapsed (since expander has own border create doubly-thick border) , non-zero when expanded (since want button separated border rest of content).

togglebutton style:

<style x:key="expanderrightheaderstyle" targettype="{x:type togglebutton}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <border x:name="bd" background="{staticresource mutedcolorbrush}" borderbrush="{staticresource expander.border}" padding="{templatebinding padding}" cornerradius="0" height="22" width="22"> <grid background="transparent" snapstodevicepixels="false" margin="0"> <ui:colorableimage x:name="img" margin="0" padding="2" background="{staticresource mutedcolorbrush}" color="black" height="{binding path=height, relativesource={relativesource ancestortype={x:type border}}}" width="{binding path=width, relativesource={relativesource ancestortype={x:type border}}}" source="assets/images/filter.png" horizontalalignment="center" verticalalignment="center" snapstodevicepixels="false"/> <contentpresenter horizontalalignment="center" margin="12,0,12,0" recognizesaccesskey="true" snapstodevicepixels="true" verticalalignment="top"/> </grid> </border> <controltemplate.triggers> <trigger property="ischecked" value="true"> <setter property="borderthickness" targetname="bd" value="0,0,1,1" /> </trigger> <trigger property="ismouseover" value="true"> <setter property="background" targetname="bd" value="{staticresource maincolorbrush}"/> <setter property="background" targetname="img" value="{staticresource maincolorbrush}"/> </trigger> <trigger property="ispressed" value="true"> <setter property="color" targetname="img" value="white"/> </trigger> <trigger property="isenabled" value="false"> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style>

expander style:

<style targettype="{x:type expander}"> <setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/> <setter property="background" value="#f0f0f0"/> <setter property="horizontalcontentalignment" value="stretch"/> <setter property="verticalcontentalignment" value="stretch"/> <setter property="borderbrush" value="{staticresource expander.border}"/> <setter property="borderthickness" value="1"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type expander}"> <border borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" cornerradius="0" snapstodevicepixels="true"> <dockpanel> <togglebutton x:name="headersite" contenttemplate="{templatebinding headertemplate}" contenttemplateselector="{templatebinding headertemplateselector}" content="{templatebinding header}" dockpanel.dock="top" foreground="{templatebinding foreground}" fontweight="{templatebinding fontweight}" focusvisualstyle="{staticresource expanderheaderfocusvisual}" fontstyle="{templatebinding fontstyle}" fontstretch="{templatebinding fontstretch}" fontsize="{templatebinding fontsize}" fontfamily="{templatebinding fontfamily}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" ischecked="{binding isexpanded, mode=twoway, relativesource={relativesource templatedparent}}" margin="0" minwidth="0" minheight="0" padding="0" style="{staticresource expanderdownheaderstyle}" verticalcontentalignment="{templatebinding verticalcontentalignment}" verticalalignment="top" width="auto" height="auto"/> <contentpresenter x:name="expandsite" dockpanel.dock="bottom" focusable="false" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="5,0,5,10" visibility="collapsed" verticalalignment="{templatebinding verticalcontentalignment}"/> </dockpanel> </border> <controltemplate.triggers> <trigger property="isexpanded" value="true"> <setter property="visibility" targetname="expandsite" value="visible"/> <setter property="height" value="auto"/> <setter property="height" targetname="expandsite" value="auto"/> </trigger> <trigger property="expanddirection" value="right"> <setter property="dockpanel.dock" targetname="expandsite" value="right"/> <setter property="dockpanel.dock" targetname="headersite" value="left"/> <setter property="style" targetname="headersite" value="{staticresource expanderrightheaderstyle}"/> </trigger> <trigger property="expanddirection" value="up"> <setter property="dockpanel.dock" targetname="expandsite" value="top"/> <setter property="dockpanel.dock" targetname="headersite" value="bottom"/> <setter property="style" targetname="headersite" value="{staticresource expanderupheaderstyle}"/> </trigger> <trigger property="expanddirection" value="left"> <setter property="dockpanel.dock" targetname="expandsite" value="left"/> <setter property="dockpanel.dock" targetname="headersite" value="right"/> <setter property="style" targetname="headersite" value="{staticresource expanderleftheaderstyle}"/> </trigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="{dynamicresource {x:static systemcolors.graytextbrushkey}}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style>

possibly related - colorableimage control:

colorableimage.xaml (x:name="this"):

<grid> <image x:name="originalimage" visibility="hidden" stretch="{binding elementname=this, path=stretch}" height="{binding relativesource={relativesource templatedparent}, path=actualheight}" width="{binding relativesource={relativesource templatedparent}, path=actualwidth}"/> <image x:name="displayedimage" visibility="visible" stretch="{binding elementname=this, path=stretch}" height="{binding relativesource={relativesource templatedparent}, path=actualheight}" width="{binding relativesource={relativesource templatedparent}, path=actualwidth}" /> </grid>

colorableimage.xaml.cs:

public partial class colorableimage : usercontrol { // sourcepropertychanged not execute when colorpropertychanged does. colorpropertychanged changes source, // sourcepropertychanged called in turn. alter originalimage newly colored source, incorrect. // "wrapping" statement changes binding in colorpropertychanged boolean , making status in // sourcepropertychanged makes sourcepropertychanged executre when source straight changed, whether through c# or xaml. private static bool changedbycolor = false; public colorableimage() { initializecomponent(); } public static readonly dependencyproperty colorproperty = dependencyproperty.register("color", typeof(color), typeof(colorableimage), new frameworkpropertymetadata(colorpropertychanged)); public color color { { homecoming (color)getvalue(colorproperty); } set { setvalue(colorproperty, value); } } public static readonly dependencyproperty sourceproperty = dependencyproperty.register("source", typeof(imagesource), typeof(colorableimage), new frameworkpropertymetadata(sourcepropertychanged)); public imagesource source { { homecoming (imagesource)getvalue(sourceproperty); } set { setvalue(sourceproperty, value); } } public static readonly dependencyproperty stretchproperty = dependencyproperty.register("stretch", typeof(stretch), typeof(colorableimage), new frameworkpropertymetadata(stretch.uniform)); public stretch stretch { { homecoming (stretch)getvalue(stretchproperty); } set { setvalue(stretchproperty, value); this.originalimage.stretch = value; this.displayedimage.stretch = value; } } private static void colorpropertychanged(dependencyobject sender, dependencypropertychangedeventargs e) { colorableimage cimg = (colorableimage)sender; binding binding = new binding("source") { elementname = "originalimage", converter = new highlightimageconverter(), converterparameter = cimg.color, mode = bindingmode.oneway }; changedbycolor = true; cimg.displayedimage.setbinding(image.sourceproperty, binding); changedbycolor = false; } private static void sourcepropertychanged(dependencyobject sender, dependencypropertychangedeventargs e) { if (!changedbycolor) { colorableimage cimg = (colorableimage)sender; cimg.originalimage.source = cimg.source; cimg.displayedimage.source = cimg.source; // note: #00000000 value "null color" if (cimg.color != null && !cimg.color.tostring().equals("#00000000")) { // color new image (this necessary if user sets source after color; color lost, otherwise) colorpropertychanged(sender, e); } } } }

you can avoid problem setting borderbrush transparent, instead of setting borderthickness 0.

you might perchance have add together container... don't sense testing this, since question old , @sheridan wrote had problem making work.

c# wpf border expander