visibility - wpf Change TextBox width on mouseover -

i have listboxitem textbox inside. on mouseover draggable block behind textbox appears. textbox autosizes content, that's ok, when drag apperas, listboxitem becomes wider , moves other items, it's not ok. need textbox little wider content when drag collapsed:

             onmouseover +---------+  +----+----+ |text     |  |drag|text| +---------+  +----+----+ 

i guess: show drag little, collapse, , bind textbox.width border.actualwidth:

 <grid>     <grid.columndefinitions>         <columndefinition width="auto"/>         <columndefinition />     </grid.columndefinitions>      <dockpanel x:name="drag" width="15" >         <dockpanel.style>             <style targettype="dockpanel">             <!--<setter property="visibility" value="collapsed" />-->                 <!--<style.triggers>                     <datatrigger binding="{binding ismouseover, relativesource={relativesource ancestortype=listboxitem}}" value="true">                         <setter property="visibility" value="visible" />                     </datatrigger>                 </style.triggers>-->             </style>         </dockpanel.style>     </dockpanel>      <border x:name="bd" grid.columnspan="2" />      <textbox x:name="query" grid.column="1">         <textbox.style>             <style targettype="textbox">                                    <!--<style.triggers>                     <datatrigger binding="{binding ismouseover, relativesource={relativesource ancestortype=listboxitem}}" value="false">                         <setter property="width" value="{binding actualwidth, elementname=bd}" />                     </datatrigger>                 </style.triggers>-->             </style>         </textbox.style>     </textbox> </grid> 

i make styles in code:

var dispatchertimer = new system.windows.threading.dispatchertimer(); dispatchertimer.tick += (s1, e1) => {     var mouseoverb = new binding("ismouseover")     {         relativesource = new relativesource(relativesourcemode.findancestor, typeof(listboxitem), 1)     };      var actualb = new binding("actualwidth")     {         elementname = "bd"     };      var settervisible = new setter(dockpanel.visibilityproperty, visibility.visible);     var settercollapsed = new setter(dockpanel.visibilityproperty, visibility.collapsed);     var setterwidth = new setter(textbox.widthproperty, actualb);      var paneltr = new datatrigger()     {         binding = mouseoverb,         value = true,         setters = { settervisible }     };      var panelstyle = new style(typeof(dockpanel))     {         triggers = { paneltr },         setters = { settercollapsed }     };       var txttr = new datatrigger()     {         binding = mouseoverb,         value = false,         setters = { setterwidth }     };      var txtstyle = new style(typeof(textbox))     {         triggers = { txttr }     };      drag.style = panelstyle;     query.style = txtstyle; }; dispatchertimer.interval = new timespan(0, 0, 0, 0, 50); dispatchertimer.start(); 

that works, have other styles , want in xaml. suggestions?