WPF control for neural net visualization

Question

I'm developing a Neural net, and for visualization I'm writing a UserControl in WPF.

The following code draws the neurons:

<UserControl x:Class="ExcelAddIn.LogView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
    <DataTemplate x:Key="ellipse">
        <Grid  Margin="0,10,0,0">
            <Ellipse Width="50" Height="50" Fill="Red" Stroke="Black" StrokeThickness="2"/>
            <TextBlock HorizontalAlignment="Center" Text="{Binding Input, StringFormat=N2}" TextAlignment="Center" Margin="0,10,0,0"/>
            <TextBlock HorizontalAlignment="Center" Text="{Binding Output, StringFormat=N2}" TextAlignment="Center" Margin="0,22,0,0"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="panel">
        <ScrollViewer VerticalScrollBarVisibility="Auto" Width="70" Margin="100,0,0,0">
            <ItemsControl x:Name="Items" ItemsSource="{Binding Neurons}" ItemTemplate="{StaticResource ellipse}"/>
        </ScrollViewer>
    </DataTemplate>
</UserControl.Resources>
<Grid>
    <ItemsControl x:Name="Panel" ItemsSource="{Binding Layers}" ItemTemplate="{StaticResource panel}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

I would like to draw lines between the Neurons like this:

So for each neuron in the specific layer should have a line to each neuron in the next layer (drawing all the lines would made it harder to understand, so I didn't draw all the lines on the illustration). I would like to achieve this with binding. Is it possible? (I don't care if my existing code needs to be refactored, if that solves my problem.)

Note: I have a Weight object (a line would represent this weight). One Weight object has reference to two Neurons, a double, that is the weight between them and some other properties. And the weigths can be accessed from the datacontext of the usercontrol.

Thank you.

Answer 1

It seems the Nodes Editor example (from the another answer) should help. It is necessary to create instances of appropriate ViewModels (Node and Connector classes). Please note that Node coordinates must be filled before displaying (see the implementation of the NodesDataSource class).

Additional references to articles/libraries:

1. NetworkView: A WPF custom control for visualizing and editing networks, graphs and flow-charts.
2. Graphviz4Net library: provides WPF control that is capable of generating "nice looking" graph layouts).
3. Graph# library: a graph layout framework, it contains some layout algorithms and a GraphLayout control for WPF applications.