How to set fill between two parallel lines WPF? - wpf

Question

My apologies for such a basic question, if it is.
The issue is I am supposed to draw two parallel lines or two parallel curves on a canvas. I want to set a color between those two non-intersecting lines. I am using two Polylines to draw them.
Any help is appreciated. Thanks in advance.
Code:
<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" />
And 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

The best thing is to define a grid and divide it into 4-5 rows first.
In the first and last row add the line. Span the middle 2-3 rows and add a shape there say rectangle or ellipse as per your requirement, and just fill it with the required color.
Check the sample below.
<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>

Answer 2

Create a third point collection that contains all the points of the first line and all the points of the second line. The points in the second line need to be reversed. Think of it like walking to the end of a street down one side, crossing, then returning down the other side.
Bind a new Line to this third set of points and set Fill instead of the Stroke and draw it before drawing your other lines/arcs.
<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" />
view model:
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()));
}
}