WPF рисунок, который растягивается без растяжения пера

Question

Мне нужно нарисовать несколько простых линий в элементе управления Border (или подобном), которые всегда простираются до границ Border. Есть ли способ растягивать только линии, но не перо? Без привлечения большого количества C #?

В этой версии линии растягиваются:

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

Лучшее решение, которое я нашел, это:

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

Но нет ли лучшего решения? Это не связано с дополнительной сеткой?

Answer 1

Я сделал это путем масштабирования данных пути, а не визуального компонента.

1. Поместите путь на холст.
2. Установить path.Data для геометрии, представляющей ваши данные в процентах от логического диапазона.
3. Установить path.Data.Transform в ScaleTransform с ScaleX и ScaleY, привязанными к фактической ширине и высоте.

Answer 2

Внутри линии вы можете привязать ширину (или высоту, в зависимости от того, как вы рисуете линию) с шириной родительского контейнера, чтобы достичь желаемого.

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

Редактировать: вот еще один способ без использования привязки

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

Answer 3

Ни о чем я не знаю. Но если вы не делаете что-то действительно экстравагантное, действительно не так уж много усилий переопределить OnRender и нарисовать это самостоятельно:

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));
    }
}

Результат: