WPFのCanvas上で動くShapeを線でつなぐ

とりあえずこんな感じの奴を用意します

<Canvas>
    <Rectangle x:Name="Rect1" Width="50" Height="50" Fill="Cyan" Canvas.Left="0" Canvas.Top="0"/>
    <Ellipse x:Name="Ellipse1" Width="50" Height="50" Fill="Magenta" Canvas.Left="200" Canvas.Top="200"/>
    <Line x:Name="Line1" StrokeThickness="5" Stroke="Blue" X1="0" X2="200" Y1="100" Y2="100"/>
</Canvas>

Rect1はStoryboardでびよびよ動かして、Ellipse1はマウスのドラッグアンドドロップで動くようにします

f:id:puni-o:20160921135656g:plain

こんな感じ

このRect1とEllipse1の中心をLine1で結ぶのが今回のお題

使うのはこれです

CompositionTarget.Rendering イベント (System.Windows.Media)

MSDNによるとレンダリングの直前に呼ばれるイベントだそうです。ということでこの時のそれぞれの座標を取得してLine1のプロパティ変えれば逝けますね

public MainWindow()
{
    InitializeComponent();
    CompositionTarget.Rendering += CompositionTarget_Rendering;
}

private void CompositionTarget_Rendering(object sender, EventArgs e)
{
    Line1.X1 = Canvas.GetLeft(Rect1) + Rect1.ActualWidth / 2;
    Line1.Y1 = Canvas.GetTop(Rect1) + Rect1.ActualHeight / 2;
    Line1.X2 = Canvas.GetLeft(Ellipse1) + Ellipse1.ActualWidth / 2;
    Line1.Y2 = Canvas.GetTop(Ellipse1) + Ellipse1.ActualHeight / 2;
}

実行結果はこんな感じ

f:id:puni-o:20160921140513g:plain