header - Putting an icon at the right end of a WPF expander control -
hi attempting put green tick icon @ right end of wpf expander control when checkbox set. code is:
<expander x:name="imageexpander"> <expander.header> <grid width="450"> <grid.columndefinitions> <columndefinition width="*" /> <columndefinition width="auto" /> </grid.columndefinitions> <label padding="0">my header text</label> <image grid.column="1" margin="0" source="c:\...\greentick.png" width="18" /> </grid> </expander.header> </expander> i used grid put icon in top right corner of expander. puts header text in usual spot next twiddle expanding expander. puts icon 450 pixels further along near right end of expander.
i hoping have not hard coded no matter how wide expander grows icon stays in right corner. can advise how this?
i tried binding width of expander.header width of expander no luck.
thanks advice!
it because of default template of expander (togglebutton contentpresenter). modified template , see result required
<window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:class="wpfapplication19.mainwindow" x:name="window" title="mainwindow" width="640" height="480"> <window.resources> <style x:key="expanderrightheaderstyle" targettype="{x:type togglebutton}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <border padding="{templatebinding padding}"> <grid snapstodevicepixels="false" background="transparent"> <grid.rowdefinitions> <rowdefinition height="19"/> <rowdefinition height="*"/> </grid.rowdefinitions> <grid> <grid.layouttransform> <transformgroup> <transformgroup.children> <transformcollection> <rotatetransform angle="-90"/> </transformcollection> </transformgroup.children> </transformgroup> </grid.layouttransform> <ellipse x:name="circle" stroke="darkgray" horizontalalignment="center" verticalalignment="center" width="19" height="19"/> <path x:name="arrow" stroke="#666" strokethickness="2" horizontalalignment="center" verticalalignment="center" snapstodevicepixels="false" data="m 1,1.5 l 4.5,5 l 8,1.5"/> </grid> <contentpresenter horizontalalignment="center" margin="0,4,0,0" verticalalignment="top" snapstodevicepixels="true" grid.row="1" recognizesaccesskey="true"/> </grid> </border> <controltemplate.triggers> <trigger property="ischecked" value="true"> <setter property="data" targetname="arrow" value="m 1,4.5 l 4.5,1 l 8,4.5"/> </trigger> <trigger property="ismouseover" value="true"> <setter property="stroke" targetname="circle" value="#ff3c7fb1"/> <setter property="stroke" targetname="arrow" value="#222"/> </trigger> <trigger property="ispressed" value="true"> <setter property="stroke" targetname="circle" value="#ff526c7b"/> <setter property="strokethickness" targetname="circle" value="1.5"/> <setter property="stroke" targetname="arrow" value="#ff003366"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <style x:key="expanderupheaderstyle" targettype="{x:type togglebutton}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <border padding="{templatebinding padding}"> <grid snapstodevicepixels="false" background="transparent"> <grid.columndefinitions> <columndefinition width="19"/> <columndefinition width="*"/> </grid.columndefinitions> <grid> <grid.layouttransform> <transformgroup> <transformgroup.children> <transformcollection> <rotatetransform angle="180"/> </transformcollection> </transformgroup.children> </transformgroup> </grid.layouttransform> <ellipse x:name="circle" stroke="darkgray" horizontalalignment="center" verticalalignment="center" width="19" height="19"/> <path x:name="arrow" stroke="#666" strokethickness="2" horizontalalignment="center" verticalalignment="center" snapstodevicepixels="false" data="m 1,1.5 l 4.5,5 l 8,1.5"/> </grid> <contentpresenter horizontalalignment="left" margin="4,0,0,0" verticalalignment="center" snapstodevicepixels="true" grid.column="1" recognizesaccesskey="true"/> </grid> </border> <controltemplate.triggers> <trigger property="ischecked" value="true"> <setter property="data" targetname="arrow" value="m 1,4.5 l 4.5,1 l 8,4.5"/> </trigger> <trigger property="ismouseover" value="true"> <setter property="stroke" targetname="circle" value="#ff3c7fb1"/> <setter property="stroke" targetname="arrow" value="#222"/> </trigger> <trigger property="ispressed" value="true"> <setter property="stroke" targetname="circle" value="#ff526c7b"/> <setter property="strokethickness" targetname="circle" value="1.5"/> <setter property="stroke" targetname="arrow" value="#ff003366"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <style x:key="expanderleftheaderstyle" targettype="{x:type togglebutton}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <border padding="{templatebinding padding}"> <grid snapstodevicepixels="false" background="transparent"> <grid.rowdefinitions> <rowdefinition height="19"/> <rowdefinition height="*"/> </grid.rowdefinitions> <grid> <grid.layouttransform> <transformgroup> <transformgroup.children> <transformcollection> <rotatetransform angle="90"/> </transformcollection> </transformgroup.children> </transformgroup> </grid.layouttransform> <ellipse x:name="circle" stroke="darkgray" horizontalalignment="center" verticalalignment="center" width="19" height="19"/> <path x:name="arrow" stroke="#666" strokethickness="2" horizontalalignment="center" verticalalignment="center" snapstodevicepixels="false" data="m 1,1.5 l 4.5,5 l 8,1.5"/> </grid> <contentpresenter horizontalalignment="center" margin="0,4,0,0" verticalalignment="top" snapstodevicepixels="true" grid.row="1" recognizesaccesskey="true"/> </grid> </border> <controltemplate.triggers> <trigger property="ischecked" value="true"> <setter property="data" targetname="arrow" value="m 1,4.5 l 4.5,1 l 8,4.5"/> </trigger> <trigger property="ismouseover" value="true"> <setter property="stroke" targetname="circle" value="#ff3c7fb1"/> <setter property="stroke" targetname="arrow" value="#222"/> </trigger> <trigger property="ispressed" value="true"> <setter property="stroke" targetname="circle" value="#ff526c7b"/> <setter property="strokethickness" targetname="circle" value="1.5"/> <setter property="stroke" targetname="arrow" value="#ff003366"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <style x:key="expanderheaderfocusvisual"> <setter property="control.template"> <setter.value> <controltemplate> <border> <rectangle stroke="black" strokedasharray="1 2" strokethickness="1" margin="0" snapstodevicepixels="true"/> </border> </controltemplate> </setter.value> </setter> </style> <style x:key="expanderdownheaderstyle" targettype="{x:type togglebutton}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <border padding="{templatebinding padding}"> <grid snapstodevicepixels="false" background="transparent"> <grid.columndefinitions> <columndefinition width="19"/> <columndefinition width="*"/> </grid.columndefinitions> <ellipse x:name="circle" stroke="darkgray" horizontalalignment="center" verticalalignment="center" width="19" height="19"/> <path x:name="arrow" stroke="#666" strokethickness="2" horizontalalignment="center" verticalalignment="center" snapstodevicepixels="false" data="m 1,1.5 l 4.5,5 l 8,1.5"/> <contentpresenter horizontalalignment="stretch" margin="4,0,0,0" verticalalignment="center" snapstodevicepixels="true" grid.column="1" recognizesaccesskey="true"/> </grid> </border> <controltemplate.triggers> <trigger property="ischecked" value="true"> <setter property="data" targetname="arrow" value="m 1,4.5 l 4.5,1 l 8,4.5"/> </trigger> <trigger property="ismouseover" value="true"> <setter property="stroke" targetname="circle" value="#ff3c7fb1"/> <setter property="stroke" targetname="arrow" value="#222"/> </trigger> <trigger property="ispressed" value="true"> <setter property="stroke" targetname="circle" value="#ff526c7b"/> <setter property="strokethickness" targetname="circle" value="1.5"/> <setter property="stroke" targetname="arrow" value="#ff003366"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <style x:key="expanderstyle1" targettype="{x:type expander}"> <setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/> <setter property="background" value="transparent"/> <setter property="horizontalcontentalignment" value="stretch"/> <setter property="verticalcontentalignment" value="stretch"/> <setter property="borderbrush" value="transparent"/> <setter property="borderthickness" value="1"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type expander}"> <border snapstodevicepixels="true" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" cornerradius="3"> <dockpanel> <togglebutton x:name="headersite" focusvisualstyle="{staticresource expanderheaderfocusvisual}" margin="1" minheight="0" minwidth="0" style="{staticresource expanderdownheaderstyle}" content="{templatebinding header}" contenttemplate="{templatebinding headertemplate}" contenttemplateselector="{templatebinding headertemplateselector}" fontfamily="{templatebinding fontfamily}" fontsize="{templatebinding fontsize}" fontstretch="{templatebinding fontstretch}" fontstyle="{templatebinding fontstyle}" fontweight="{templatebinding fontweight}" foreground="{templatebinding foreground}" horizontalcontentalignment="{templatebinding horizontalcontentalignment}" padding="{templatebinding padding}" verticalcontentalignment="{templatebinding verticalcontentalignment}" dockpanel.dock="top" ischecked="{binding isexpanded, mode=twoway, relativesource={relativesource templatedparent}}"/> <contentpresenter x:name="expandsite" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="{templatebinding padding}" verticalalignment="{templatebinding verticalcontentalignment}" focusable="false" visibility="collapsed" dockpanel.dock="bottom"/> </dockpanel> </border> <controltemplate.triggers> <trigger property="isexpanded" value="true"> <setter property="visibility" targetname="expandsite" value="visible"/> </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> </window.resources> <expander x:name="imageexpander" style="{dynamicresource expanderstyle1}"> <expander.header> <grid > <grid.columndefinitions> <columndefinition /> <columndefinition width="auto" /> </grid.columndefinitions> <label padding="0" >my header text</label> <image grid.column="1" margin="0" source="accounting-pic.jpg" width="18" /> </grid> </expander.header> </expander>
Comments
Post a Comment