如何在两条平行线WPF之间设置填充?

时间:2016-05-04 13:46:02

标签: wpf data-binding wpf-controls drawing draw

我为这样一个基本问题道歉,如果是的话。

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

感谢任何帮助。提前致谢。 码:      

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


}

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

创建第三个点集合,其中包含第一行的所有点和第二行的所有点。 第二行中的点需要反转。想想就像走到一条街的尽头一边穿过,然后沿着另一边走。

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