水平虛線拉伸到容器寬度

我有一個包含在ScrollViewer內的佈局，其中我需要繪製水平虛線拉伸到容器的整個寬度。我已經成功最接近的是以下水平虛線拉伸到容器寬度

<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>

Sample looking good

這近作品，然而，一旦容器（在我的情況的窗口）有所放大，行不退縮下來當容器的尺寸縮小時，將其尺寸調整到合適的尺寸。下面是水平調整窗口大小後，同一窗口的屏幕截圖。

Screenshot of the sample after increasing and reducing the size of the window

需要注意的是，該線虛線的事實是很重要的，因爲它意味着涉及拉伸生產線解決方案不起作用（破折號顯得捉襟見肘）。我知道這是因爲X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"綁定（按照設計，線條始終是可滾動區域中最寬泛的東西，所以當我沿着可滾動區域向下調整窗口的大小時，線條定義了可滾動區域的寬度），但我想不出一個解決方案。

我該如何解決這個問題？爲什麼使用ViewportWidth的

截圖不起作用

Screenshot of why using ViewportWidth doesn't work

來源

2013-05-15 Justin

你可以發佈（引擎收錄），顯示ViewportWidth不工作的主窗口的全部XAML代碼？因爲我編譯了我的代碼，調整了窗口大小，所以沒有任何問題。 – lisp

@lisp它只是一個標準窗口 - 您需要調整窗口大小（所以滾動條出現），然後滾動到右側 – Justin

正確。您可以多重綁定到ScrollViewer的ViewportWidth和ContentHorizontalOffset的總和，但與Clemens的解決方案相比，這將是不太複雜的。 – lisp

我意識到我需要的是爲Line期間的layout測量步要求零空間，但隨後在安排步驟中使用所有可用的空間。我碰巧遇到了Make WPF/SL grid ignore a child element when determining size這個問題，它引入了使用包含這個邏輯的定製裝飾器的方法。

public class NoSizeDecorator : Decorator 
{ 
    protected override Size MeasureOverride(Size constraint) { 
     // Ask for no space 
     Child.Measure(new Size(0,0)); 
     return new Size(0, 0); 
    }   
}

（我希望將這一邏輯一些現有佈局的控制，以避免寫我自己的佈局邏輯，但這裏的邏輯是如此簡單，我不是真的那麼大驚小怪）。修改後的XAML則變爲

<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>

這工作完全

來源

2013-05-15 10:27:32 Justin

我試着在stackpanel中放置一行，只需要[X2 =「{Binding ActualWidth，RelativeSource = {RelativeSource Self}}」]並且完美。 – Cheung

在UWP應用程序中怎麼樣？ – bunkerdive

你可以將一個很長的隊左對齊帆布零Width和ClipToBounds設置爲false。

<ScrollViewer HorizontalScrollBarVisibility="Auto"> 
    <StackPanel> 
     <Button Width="400" Height="50" VerticalAlignment="Top" Margin="10" /> 
     <Canvas HorizontalAlignment="Left" Width="0" ClipToBounds="False"> 
      <Line Stroke="Black" StrokeDashArray="2 2" X2="10000"/> 
     </Canvas> 
    </StackPanel> 
</ScrollViewer>

來源

2013-05-15 10:25:22 Clemens

我知道這會起作用，但我希望有一個更優雅的解決方案 - 這只是對我說的「黑客」 – Justin

其實你需要一個黑客。 ScrollViewer用於顯示具有顯式大小的內容（與ScrollViewer的實際大小無關）。您想要的內容大小部分取決於ScrollViewer的實際大小。 – Clemens

其實，我得到了這個工作（看我的回答） – Justin

水平虛線拉伸到容器寬度

回答

相關問題