0

I want to draw lines connecting blocks which are drawn by ItemsControl. These are my classes:

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

Then I have List which I set as ItemsControls ItemsSource.

This is my DataTemplate for each NodeBase item:

<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 and InputItemsControl are ItemsControls. DataTemplate for Connectors in OutputItemsControl looks like this:

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

My blocks are drawn correctly. Now I want to draw a Line between rectangles named "_ConnectorRectangle" to connect the visual node representations. Any ideas how can I achieve it?

virious
  • 571
  • 1
  • 8
  • 27
  • 1
    You may want to have a look at [My Example](http://stackoverflow.com/a/15580293/643085) of a similar thing in WPF. There's a link to the full source code on GitHub. – Federico Berasategui May 19 '14 at 14:07
  • @HighCore you solution is great but in your case you're drawing lines from the middle of each node. In my case each node can have multiple connection slots and I need to draw line from those connection slots, not from the block centers. – virious May 20 '14 at 07:05
  • Did you take a look at [existing graph drawing libraries](http://stackoverflow.com/questions/16479768/how-to-easily-draw-graphs-in-wpf)? Maybe reinventing the wheel is inefficient, unless you are doing it for the fun of it ;-) – Sebastian May 20 '14 at 07:33
  • @Sebastian I looked at existing libraries but they seem to be an overkill for me. I need to visualize graph based on known items positions and connections between them. Most of existing graph libraries have automatic position calculation and I'm not quite sure that I can set positions manually? – virious May 20 '14 at 08:10
  • @virious: It's the other way around: for most graph libraries you will *have* to manually set the positions, but some *can* position the elements automatically. The latter is far more difficult to implement and it would be stupid for them not to provide the trivial option. – Sebastian May 20 '14 at 15:39

0 Answers0