WPF - カスタムコントロール間の線をプログラムで描画する方法

Question

私は、ユーザーがWPFでさまざまな機能を持つモジュールを使用して簡単なプログラムを設計できるようにするプログラムを作成しようとしています。とにかく

<Border Height="75" Width="150" BorderThickness="1" BorderBrush="Black"> 
    <Grid Background="Gray" Height="75" Width ="150"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="1*"/> 
      <RowDefinition Height="2*"/> 
     </Grid.RowDefinitions> 
     <Label Content="Double" FontSize="12" Grid.Row="0" HorizontalContentAlignment="Center" Background="Aquamarine"/> 
     <Grid Grid.Row="1"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition/> 
       <ColumnDefinition Width="3*"/> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 
      <Button Name="IncomingConnection" Height="15" Width="15" Background="Black" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Left"/> 

      <Button Name="OutgoingConnection" Grid.Column="2" Height="15" Width="15" VerticalAlignment="Top" Background="Black" Margin="5" HorizontalAlignment="Right"/> 
      <Button Name="OutgoingData" Grid.Column="2" Height="15" Width="15" VerticalAlignment="Bottom" Background="Aquamarine" Margin="5" HorizontalAlignment="Right"/> 
     </Grid> 
    </Grid> 
</Border> 

が、私はこれらのボタン（incomingConnectionまたはoutgoingConnection）のいずれかをクリックして、ラインが接続持ってできるようにしたい：

私はこのように私のモジュールのためのカスタムコントロールを作成しました2つのボタン。

その他の情報：カスタムコントロールはすべて親指の内側に配置されているため、ドラッグすることができます。すべてがキャンバス上にあります。私はコントロール間の線を作成するのではなく、コントロールのボタンの間に線を作成したい。

ありがとうございます！

Answer 1

私は両方のエンドポイントのx座標とy座標を含む行のクラスを持っています。私はビューモデルのリストに各行のインスタンスを配置します。次に、そのプロパティにバインドされたItemsControlをCanvasをテンプレートとして使用します。 WPF LineコントロールをItemsControlのItemTemplateとして使用することができます。 LineコントロールのX1,Y1,X2、およびY2を、最初に作成されたラインクラスのエンドポイントプロパティにバインドすることができます。

この設定では、ラインクラスのインスタンスをリストに追加するだけで、自動的にCanvasに表示されます。