Rysunek WPF, który rozciąga się bez rozciągania pióra

Question

Potrzebuję narysować kilka prostych linii w formancie Border (lub podobnym), który zawsze rozciąga się do granic Border. Czy istnieje sposób, aby rozciągnąć tylko linie, ale nie pióro? Bez angażowania dużej ilości C#?

W tej wersji linie rozciągają:

<Border> 
    <Border.Background> 
     <DrawingBrush> 
     <DrawingBrush.Drawing> 
      <DrawingGroup> 
       <GeometryDrawing Brush="Red"> 
        <GeometryDrawing.Geometry> 
        <GeometryGroup> 
         <RectangleGeometry Rect="0,0 100,1000" /> 
         <LineGeometry StartPoint="0,0" EndPoint="100,1000"/> 
         <LineGeometry StartPoint="100,0" EndPoint="0,1000"/> 
        </GeometryGroup> 
        </GeometryDrawing.Geometry> 
        <GeometryDrawing.Pen> 
        <Pen Thickness="20" Brush="Black"/> 
        </GeometryDrawing.Pen> 
       </GeometryDrawing> 
      </DrawingGroup> 
     </DrawingBrush.Drawing> 
     </DrawingBrush> 
    </Border.Background> 
</Border> 

Najlepszym rozwiązaniem mam wymyślić to:

<Border> 
    <Grid> 
     <Path Stretch="Fill" Fill="Red" Stroke="Black" StrokeThickness="4" Data="M0,0 L100,0 100,1000 0,1000 z" /> 
     <Path Stretch="Fill" Stroke="Black" StrokeThickness="4" Data="M 0,0 L0,0 100,1000" /> 
     <Path Stretch="Fill" Stroke="Black" StrokeThickness="4" Data="M 100,0 L100,0 0,1000" /> 
    </Grid> 
</Border> 

Ale nie jest lepszym rozwiązaniem? To nie wymaga dodatkowej siatki?

Answer 1

Robiłem to poprzez skalowanie ścieżce w danych, nie komponent wizualny.

1. Umieść ścieżkę na płótnie.
2. Ustaw ścieżkę.Data do geometrii reprezentująca dane jako wartości procentowe zakresu logicznego.
3. Ustaw ścieżkę.Data.Transformuje na ScaleTransform ze skalą X i skalą Y związaną z rzeczywistą szerokością i wysokością.

Answer 2

Żadnych, które znam. Ale jeśli robisz coś naprawdę ekstrawaganckie, to naprawdę nie jest dużo wysiłku, aby zastąpić OnRender i wyciągnąć go sobie pytanie:

public class CustomBorder : Border 
{ 
    protected override void OnRender(DrawingContext dc) 
    { 
     base.OnRender(dc); 

     dc.DrawLine(new Pen(BorderBrush, BorderThickness.Top), new Point(0, 0), new Point(ActualWidth, ActualHeight)); 
    } 
} 

Wynik:

Answer 3

ciągu linii, może powiązać szerokość (lub wysokość, w zależności od tego, w jaki sposób rysujesz linię) do szerokości kontenera nadrzędnego, aby osiągnąć to, co chcesz.

<Grid x:Name="Grid" Margin="10"> 
     <Border BorderBrush="Black" BorderThickness="1" /> 
     <Line X1="0" X2="{Binding ElementName=Grid, Path=ActualWidth}" Y1="1" Y2="1" Stroke="Red" Margin="0,10,0,0" /> 
     <Line X1="0" X2="{Binding ElementName=Grid, Path=ActualWidth}" Y1="1" Y2="1" Stroke="Green" Margin="0,30,0,0" /> 
     <Line X1="0" X2="{Binding ElementName=Grid, Path=ActualWidth}" Y1="1" Y2="1" Stroke="Blue" Margin="0,50,0,0" /> 
    </Grid> 

Edycja: Oto inny sposób bez użycia wiążące

<Border BorderBrush="Black" BorderThickness="1" > 
    <Path Stroke="Red" StrokeThickness="1" Data="M0,0 1,0Z" Stretch="Fill" /> 
</Border>