能快速构建和定制网络拓扑图的WPF开源项目-NodeNetwork开发者社区

能快速构建和定制网络拓扑图的WPF开源项目-NodeNetwork

原创

Install-Package NodeNetwork

using System.Windows;
using NodeNetwork;
namespace NodeNetworkTest;
public partial class App : Application
    protected override void OnStartup(StartupEventArgs e)
        base.OnStartup(e);
        NNViewRegistrar.RegisterSplat();
}

<Window x:Class="NodeNetworkTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
        <nodenetwork:NetworkView x:Name="networkView" />
    </Grid>
</Window>

var network = new NetworkViewModel();
networkView.ViewModel = network;

var node1 = new NodeViewModel();
node1.Name = "节点1";
network.Nodes.Add(node1);

var node1Input = new NodeInputViewModel();
node1Input.Name = "节点1输入";
node1.Inputs.Add(node1Input);

var node2 = new NodeViewModel();
node2.Name = "节点2";
network.Nodes.Add(node2);
var node2Output = new NodeOutputViewModel();
node2Output.Name = "节点2输出";
node2.Outputs.Add(node2Output);

var connection = new ConnectionViewModel(network, node1Input, node2Output);
network.Connections.Add(connection);

using DynamicData;
using NodeNetwork.ViewModels;
using System.Windows;
namespace NodeNetworkTest;
public partial class MainWindow : Window
    public MainWindow()
        InitializeComponent();
        // 创建NetworkView视图的ViewModel实例
        var network = new NetworkViewModel();
        // 给视图(networkView)赋值viewmodel(network)
        networkView.ViewModel = network;
        // 创建第一个节点ViewModel，设置它的名称并将此节点加入到network
        var node1 = new NodeViewModel();
        node1.Name = "节点1";
        network.Nodes.Add(node1);
        // 创建第一个节点的输入端口ViewModel，设置它的名称并加入第一个节点
        var node1Input = new NodeInputViewModel();
        node1Input.Name = "节点1输入";
        node1.Inputs.Add(node1Input);
        // 创建第二个节点ViewModel，设置它的名称并将此节点加入到network, 并以同样的方式给此节点添加一个输出Create the second node viewmodel, set its name, add it to the network and add an output in a similar fashion.
        var node2 = new NodeViewModel();
        node2.Name = "节点2";
        network.Nodes.Add(node2);
        var node2Output = new NodeOutputViewModel();
        node2Output.Name = "节点2输出";
        node2.Outputs.Add(node2Output);
        // 将节点1的输入端口和节点2的输出端口连接到一起
        var connection = new ConnectionViewModel(network, node1Input, node2Output);
        network.Connections.Add(connection);
}

node.Position = new Point(100, 100);

ForceDirectedLayouter layouter = new ForceDirectedLayouter();
var config = new Configuration
    Network = yourNetwork,

能快速构建和定制网络拓扑图的WPF开源项目-NodeNetwork

能快速构建和定制网络拓扑图的WPF开源项目-NodeNetwork

一、前言

二、示例

1. 计算器示例

2. 代码生成器示例

3. 着色器编辑器示例

三、特征

四、NodeNetwork的核心概念

1. 节点（Node）

2. 连接（Connection）

3. 端口（Port）

4. 图形界面（GUI）

5. 布局（Layout）

6. 序列化和反序列化（Serialization and Deserialization）

五、NodeNetwork的应用场景

1. 数据处理和分析

2. 图形化编辑器

3. 可视化和交互式展示

六、NodeNetwork的使用方法

1. 安装NodeNetwork

2. 注册NodeNetwork视图

3. 创建视图

4. 创建节点和连接

5. 布局