wpf - Horizontal dashed line stretched to container width -

i have layout contained within scrollviewer in need draw horizontal dashed line stretches full width of container. closest i've managed following

<scrollviewer horizontalscrollbarvisibility="auto">     <stackpanel>         <button width="400" height="50" verticalalignment="top" margin="10" />         <line horizontalalignment="stretch" verticalalignment="bottom" stroke="black"               x2="{binding actualwidth, relativesource={relativesource self}}"               strokedasharray="2 2" strokethickness="1" />     </stackpanel> </scrollviewer> 

this nearly works, once container (in case window) has been enlarged, line doesn't shrink down appropriate size when container sized down. below screenshot of same window after have horizontally sized window , down.

note fact line dashed important means solutions involve stretching line don't work (the dashes appear stretched).

i know because of x2="{binding actualwidth, relativesource={relativesource self}}" binding (by design line widest thing in scrollable region, when size window down scrollable region line defines width of scrollable region), can't think of solution.

how can fix problem?

---

screenshot of why using viewportwidth doesn't work

i realised needed line ask 0 space during measure step of layout, use available space during arrange step. happened stumble across question make wpf/sl grid ignore child element when determining size introduced approach of using custom decorator included logic.

public class nosizedecorator : decorator {     protected override size measureoverride(size constraint) {         // ask no space         child.measure(new size(0,0));         return new size(0, 0);     }         } 

(i hoping existing layout control incorporated logic avoid having write own layout logic, logic here simple i'm not fussed). modified xaml becomes

<scrollviewer horizontalscrollbarvisibility="auto">     <stackpanel>         <button width="400" height="50" verticalalignment="top" margin="10" />         <local:nosizedecorator height="1">             <line stroke="black" horizontalalignment="stretch"                   x2="{binding actualwidth, relativesource={relativesource self}}"                   strokedasharray="2 2" strokethickness="1" />         </local:nosizedecorator>     </stackpanel> </scrollviewer> 

this works perfectly