how can make background color of node in treeview goes way out right edge?
background
i have treeview nodes have children gray. leaf nodes have icon descriptive text.
it's easy fix. unfortunately it'll require pretty code since you'll have re-template treeviewitem. treeviewitem's template looks this
<controltemplate targettype="{x:type treeviewitem}"> <grid> <grid.columndefinitions> <!-- expand/collapse togglebutton --> <columndefinition minwidth="19" width="auto"/> <!-- treeviewitem --> <columndefinition width="auto"/> <!-- children --> <columndefinition width="*"/> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="auto"/> <rowdefinition/> </grid.rowdefinitions> <togglebutton x:name="expander" clickmode="press" ischecked="{binding isexpanded, relativesource={relativesource templatedparent}}" style="{staticresource expandcollapsetogglestyle}"/> <border x:name="bd" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" grid.column="1" padding="{templatebinding padding}" snapstodevicepixels="true"> <contentpresenter x:name="part_header" contentsource="header" horizontalalignment="{templatebinding horizontalcontentalignment}" snapstodevicepixels="{templatebinding snapstodevicepixels}"/> </border> <itemspresenter x:name="itemshost" grid.columnspan="2" grid.column="1" grid.row="1"/> </grid>
as can see, treeviewitem in column 1 has width set auto while children (itemspresenter) in grid.column 1 , 2 , column 2 has width set *. treeviewitem same width children can remove middle column (column 1) , use grid.column="1" both.
here's default template treeviewitem "horizontal stretch" fix. you'll have add reference presentationframework.aero
<style x:key="treeviewitemfocusvisual"> <setter property="control.template"> <setter.value> <controltemplate> <rectangle/> </controltemplate> </setter.value> </setter> </style> <pathgeometry x:key="treearrow" figures="m0,0 l0,6 l6,0 z"/> <style x:key="expandcollapsetogglestyle" targettype="{x:type togglebutton}"> <setter property="focusable" value="false"/> <setter property="width" value="16"/> <setter property="height" value="16"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type togglebutton}"> <border background="transparent" height="16" padding="5,5,5,5" width="16"> <path x:name="expandpath" data="{staticresource treearrow}" fill="transparent" stroke="#ff989898"> <path.rendertransform> <rotatetransform angle="135" centery="3" centerx="3"/> </path.rendertransform> </path> </border> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter property="stroke" targetname="expandpath" value="#ff1bbbfa"/> <setter property="fill" targetname="expandpath" value="transparent"/> </trigger> <trigger property="ischecked" value="true"> <setter property="rendertransform" targetname="expandpath"> <setter.value> <rotatetransform angle="180" centery="3" centerx="3"/> </setter.value> </setter> <setter property="fill" targetname="expandpath" value="#ff595959"/> <setter property="stroke" targetname="expandpath" value="#ff262626"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> <style x:key="stretchtreeviewitemstyle" targettype="{x:type treeviewitem}" xmlns:microsoft_windows_themes="clr-namespace:microsoft.windows.themes;assembly=presentationframework.aero"> <setter property="background" value="transparent"/> <setter property="horizontalcontentalignment" value="{binding horizontalcontentalignment, relativesource={relativesource ancestortype={x:type itemscontrol}}}"/> <setter property="verticalcontentalignment" value="{binding verticalcontentalignment, relativesource={relativesource ancestortype={x:type itemscontrol}}}"/> <setter property="padding" value="1,0,0,0"/> <setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/> <setter property="focusvisualstyle" value="{staticresource treeviewitemfocusvisual}"/> <setter property="template"> <setter.value> <controltemplate targettype="{x:type treeviewitem}"> <grid> <grid.columndefinitions> <columndefinition minwidth="19" width="auto"/> <columndefinition width="*"/> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="auto"/> <rowdefinition/> </grid.rowdefinitions> <togglebutton x:name="expander" clickmode="press" ischecked="{binding isexpanded, relativesource={relativesource templatedparent}}" style="{staticresource expandcollapsetogglestyle}"/> <border x:name="bd" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" grid.column="1" padding="{templatebinding padding}" snapstodevicepixels="true"> <contentpresenter x:name="part_header" contentsource="header" horizontalalignment="{templatebinding horizontalcontentalignment}" snapstodevicepixels="{templatebinding snapstodevicepixels}"/> </border> <itemspresenter x:name="itemshost" grid.column="1" grid.row="1"/> </grid> <controltemplate.triggers> <trigger property="isexpanded" value="false"> <setter property="visibility" targetname="itemshost" value="collapsed"/> </trigger> <trigger property="hasitems" value="false"> <setter property="visibility" targetname="expander" value="hidden"/> </trigger> <trigger property="isselected" value="true"> <setter property="background" targetname="bd" value="{dynamicresource {x:static systemcolors.highlightbrushkey}}"/> <setter property="foreground" value="{dynamicresource {x:static systemcolors.highlighttextbrushkey}}"/> </trigger> <multitrigger> <multitrigger.conditions> <condition property="isselected" value="true"/> <condition property="isselectionactive" value="false"/> </multitrigger.conditions> <setter property="background" targetname="bd" value="{dynamicresource {x:static systemcolors.controlbrushkey}}"/> <setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/> </multitrigger> <trigger property="isenabled" value="false"> <setter property="foreground" value="{dynamicresource {x:static systemcolors.graytextbrushkey}}"/> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <style.triggers> <trigger property="virtualizingstackpanel.isvirtualizing" value="true"> <setter property="itemspanel"> <setter.value> <itemspaneltemplate> <virtualizingstackpanel/> </itemspaneltemplate> </setter.value> </setter> </trigger> </style.triggers> </style>
and can use this
<treeview ...> <treeview.itemcontainerstyle> <style targettype="{x:type treeviewitem}" basedon="{staticresource stretchtreeviewitemstyle}"> <!-- add own setters if applicable --> </style> </treeview.itemcontainerstyle> </treeview>
Comments
Post a Comment