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?
Comments
Post a Comment