Как установить заливку между двумя параллельными линиями WPF?

Question

Приносим извинения за такой базовый вопрос, если он есть.

Проблема заключается в том, что я должен нарисовать две параллельные линии или две параллельные кривые на холсте. Я хочу установить цвет между этими двумя непересекающимися линиями. Я использую две Полилинии, чтобы нарисовать их.

Любая помощь приветствуется. Заранее спасибо. Код:

<Canvas.LayoutTransform> 
     <ScaleTransform CenterX="0" CenterY="0" ScaleY="-1" ScaleX="1"/> 
    </Canvas.LayoutTransform> 
    <Polyline Name="MyLine1" Points="{Binding BindPoints1,Mode=TwoWay}" Stroke="Black" StrokeThickness="4" Grid.Row="0" /> 
    <Polyline Name="MyLine2" Points="{Binding BindPoints2,Mode=TwoWay}" Stroke="Black" StrokeThickness="4" Grid.Row="0" /> 

И C#

public class ViewModel : ViewModelBase 
{ 
    private ImageSource m_CreatedImage; 
    public PointCollection BindPoints1 { get; set; } 
    public PointCollection BindPoints2 { get; set; } 


    public ViewModel() 
    { 
     BindPoints1 = new PointCollection(); 
     BindPoints2 = new PointCollection(); 
     for (int i = 0; i < 1000; i++) 
     { 
      double val = (i * i) - 5; 
      var point = new Point(i, i+20);    
      BindPoints1.Add(point); 
     } 

     BindPoints2 = new PointCollection(); 
     for (int i = 0; i < 1000; i++) 
     { 
      double val = (i * i) + 5; 
      var point = new Point(i, i-20); 
      BindPoints2.Add(point); 
     } 
    } 


} 

Answer 1

Создайте коллекцию третьей точки, которая содержит все точки первой строки и все точки второй линии. Точки во второй строке должны быть отменены. Подумайте об этом, как идти к концу улицы с одной стороны, пересекая ее, а затем возвращаясь с другой стороны.

Привязать новый Line к этому третьему набору пунктов и установить Fill вместо Stroke и нарисовать его, прежде чем рисовать ваши другие линии/дуги.

<Polyline Name="FillLine" Points="{Binding BindPoints3,Mode=TwoWay}" Fill="Green" Grid.Row="0"/> 
<Polyline Name="MyLine1" Points="{Binding BindPoints1,Mode=TwoWay}" Stroke="Black" StrokeThickness="4" Grid.Row="0" /> 
<Polyline Name="MyLine2" Points="{Binding BindPoints2,Mode=TwoWay}" Stroke="Black" StrokeThickness="4" Grid.Row="0" /> 

вид модели:

public class ViewModel : ViewModelBase 
{ 
    private ImageSource m_CreatedImage; 
    public PointCollection BindPoints1 { get; set; } 
    public PointCollection BindPoints2 { get; set; } 
    public PointCollection BindPoints3 { get; set; } 


    public ViewModel() 
    { 
     BindPoints1 = new PointCollection(); 
     BindPoints2 = new PointCollection(); 
     for (int i = 0; i < 1000; i++) 
     { 
      double val = (i * i) - 5; 
      var point = new Point(i, i + 20); 
      BindPoints1.Add(point); 
     } 

     BindPoints2 = new PointCollection(); 
     for (int i = 0; i < 1000; i++) 
     { 
      double val = (i * i) + 5; 
      var point = new Point(i, i - 20); 
      BindPoints2.Add(point); 
     } 
     BindPoints3 = new PointCollection(BindPoints1.OfType<Point>().Concat(BindPoints2.OfType<Point>().Reverse())); 
    } 
} 

Answer 2

Лучше всего, чтобы определить сетку и разделить его на 4-5 строк первого. В первой и последней строке добавьте строку. Разместите средние 2-3 строки и добавьте фигуру, там говорят прямоугольник или эллипс в соответствии с вашим требованием, и просто заполните его требуемым цветом.

Проверьте образец ниже.

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:WpfApplication1" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525" 
    > 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 

     <Polyline Name="MyLine1" Grid.Row="0" Points="{Binding BindPoints1,Mode=TwoWay}" Stroke="Black" StrokeThickness="4" /> 
      <Polyline Name="MyLine2" Grid.Row="4" Points="{Binding BindPoints2,Mode=TwoWay}" Stroke="Black" StrokeThickness="4" /> 
      <Rectangle Grid.Row="1" Grid.RowSpan="3" Fill="Red" /> 

    </Grid> 
</Window>