神经网络可视化的WPF控制

Question

我正在开发一个神经网络，为了可视化，我正在用WPF编写一个UserControl。

以下代码绘制神经元：

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

​

​

​

我想在神经元之间划出这样的线：

​

​

因此，对于特定层中的每个神经元，下一层中的每个神经元都应该有一条线(绘制所有的线会使人更难理解，所以我没有在插图上画出所有的线)。我希望有约束力地实现这一点。有可能吗？(我不在乎我现有的代码是否需要重构，这是否解决了我的问题。)

注意:我有一个称重对象(一行表示这个重量)。一个重量对象指的是两个神经元，一个双神经元，即它们和其他一些属性之间的重量。并且可以从用户控件的数据文本中访问weigth。

谢谢。

Answer 1

看来节点编辑器示例(来自另一个答案)应该能帮上忙。有必要创建适当的ViewModel (Node和Connector类)的实例。请注意，必须在显示之前填充Node坐标(请参见NodesDataSource类的实现)。

关于文章/图书馆的其他参考资料：

1. NetworkView:一个用于可视化和编辑网络、图表和流程图的WPF自定义控件。。
2. Graphviz4Net库：提供WPF控件，它能够生成“漂亮的”图形布局)。
3. Graph#库：一个图形布局框架，它包含一些布局算法和一个用于WPF应用程序的GraphLayout控件。