ItemsControl + соединительные линии между сгенерированными элементами

Я хочу рисовать линии, соединяющие блоки, которые нарисованы ItemsControl. Это мои классы:

public class NodeBase
{
    public string Name { get; set; }
    public double X { get; set; }
    public double Y { get; set; }
    public List<Connector> Inputs { get; set; }
    public List<Connector> Outputs { get; set; }
}

public class Connector
{
    public string Name { get; set; }
    public List<Connection> Connections { get; set; }
}

public class Connection
{
    public NodeBase TargetBlock { get; set; }
}

Затем у меня есть список, который я установил как ItemsControls ItemsSource.

Это мой DataTemplate для каждого элемента NodeBase:

<DataTemplate DataType="{x:Type local:NodeBase}">
    <Border BorderBrush="Black" BorderThickness="1">
        <StackPanel>
            <DockPanel>
                <TextBlock Text="{Binding Name}" TextAlignment="Center" Foreground="White" Margin="30, 0, 30, 0" DockPanel.Dock="Top"/>
                <Grid Background="Gray">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50*"/>
                        <ColumnDefinition Width="50*"/>
                    </Grid.ColumnDefinitions>
                    <local:InputItemsControl ItemsSource="{Binding Inputs}" Grid.Column="0"/>
                    <local:OutputItemsControl ItemsSource="{Binding Outputs}" Grid.Column="1" Margin="5, 0, 0, 0"/>
                </Grid>
            </DockPanel>
        </StackPanel>
    </Border>
</DataTemplate>

OutputItemsControl и InputItemsControl являются ItemsControls. DataTemplate для коннекторов в OutputItemsControl выглядит так:

<DataTemplate DataType="{x:Type local:Connector}">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="{Binding Name}" HorizontalAlignment="Right"/>
        <Rectangle Fill="Black" Width="5" Height="5" HorizontalAlignment="Right" Margin="5, 0, 0, 0" Name="_ConnectorRectangle"/>
    </StackPanel>
</DataTemplate>

Мои блоки рисуются правильно. Теперь я хочу нарисовать линию между прямоугольниками с именем «_ConnectorRectangle», чтобы соединить представления визуальных узлов. Любые идеи, как я могу этого достичь?


wpf diagramming
person virious    schedule 19.05.2014    source источник
comment
Вы можете взглянуть на мой пример аналогичной вещи в WPF. На GitHub есть ссылка на полный исходный код.   -  person Federico Berasategui    schedule 19.05.2014
comment
@HighCore, ваше решение отличное, но в вашем случае вы рисуете линии из середины каждого узла. В моем случае каждый узел может иметь несколько слотов для подключения, и мне нужно провести линию из этих слотов, а не из центров блоков.   -  person virious    schedule 20.05.2014
comment
Вы ознакомились с существующими библиотеками рисования графиков? Возможно, изобретать велосипед неэффективно, если только вы не делаете это ради удовольствия ;-)   -  person Sebastian    schedule 20.05.2014
comment
@Sebastian Я просмотрел существующие библиотеки, но они кажутся мне излишними. Мне нужно визуализировать график на основе известных позиций элементов и связей между ними. Большинство существующих графических библиотек имеют автоматический расчет позиций, и я не совсем уверен, что смогу установить позиции вручную?   -  person virious    schedule 20.05.2014
comment
@virious: Наоборот: для большинства графических библиотек вам придется устанавливать позиции вручную, но некоторые могут позиционировать элементы автоматически. Последнее гораздо сложнее реализовать, и было бы глупо не предоставить тривиальный вариант.   -  person Sebastian    schedule 20.05.2014