如何设置两条平行线WPF之间的填充？

Question

对于这样一个基本问题，我深表歉意。

问题是我应该在 canvas 上画两条平行线或两条平行曲线。我想在这两条不相交的线之间设置一种颜色。我正在使用两条折线来绘制它们。

感谢任何帮助。提前致谢。代码：

    <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

最好先定义一个网格，然后把它分成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>

Answer 2

创建第三个点集合，其中包含第一行的所有点和第二行的所有点。 第二行中的点需要反转。 可以把它想象成从一侧走到街道的尽头，穿过街道，然后从另一侧返回。

将新的 Line 绑定到第三组点并设置 Fill 而不是 Stroke 并在绘制其他 lines/arcs.[=15 之前绘制它=]

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

如何设置两条平行线WPF之间的填充？

How to set fill between two parallel lines WPF?

data-binding

wpf

drawing

draw

wpf-controls