2つの平行な線の間の塗りつぶしを設定する方法WPF？

Question

私はこのような基本的な質問に対して謝罪します。

問題はキャンバスに2本の平行線または2本の平行な曲線を描くことになっています。これらの2つの交差しない線の間に色を設定したいと思います。私はそれらを描画するために2つのポリラインを使用しています。

何か助けていただければ幸いです。前もって感謝します。 コード：

<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

第1行のすべての点と第2行のすべての点を含む第3点集合を作成します。 2行目のポイントを逆にする必要があります。それは、片側の通りの端まで歩いて行き、交差して、反対側を下っていくようなものだと考えてください。

Strokeの代わりにFillを設定し、他の線/円弧を描画する前にそれを描画します。

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