Horizontal dashed line stretched to container width <p>I have a layout contained within a <code>ScrollViewer</code> in which I need to draw a horizontal dashed line that stretches to the full width of the container. The closest I've managed is the following</p> <pre><code>&lt;ScrollViewer HorizontalScrollBarVisibility="Auto"&gt; &lt;StackPanel&gt; &lt;Button Width="400" Height="50" VerticalAlignment="Top" Margin="10" /&gt; &lt;Line HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Stroke="Black" X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" StrokeDashArray="2 2" StrokeThickness="1" /&gt; &lt;/StackPanel&gt; &lt;/ScrollViewer&gt; </code></pre> <p><img src="https://i.stack.imgur.com/Uvebo.png" alt="Sample looking good"></p> <p>This <em>nearly</em> works, however once the container (in my case a window) has been enlarged, the line doesn't shrink back down to the appropriate size when the container is sized back down. The below is the screenshot of the same window after I have horizontally sized the window up and down.</p> <p><img src="https://i.stack.imgur.com/rIKRy.png" alt="Screenshot of the sample after increasing and reducing the size of the window"></p> <p>Note that the fact that the line is dashed is important as it means that solutions that involve stretching the line don't work (the dashes appear stretched).</p> <p>I know that this is because of the <code>X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"</code> binding (by design the line is always the widest thing in the scrollable region, so when I size the window down the scrollable region the line defines the width of the scrollable region), however I can't think of a solution.</p> <p>How can I fix this problem?</p> <hr> <p>Screenshot of why using <code>ViewportWidth</code> doesn't work</p> <p><img src="https://i.stack.imgur.com/OR6sv.png" alt="Screenshot of why using ViewportWidth doesn&#39;t work"></p>