能快速構建和定製網絡拓撲圖的wpf開源項目-nodenetwork

大家好，我是沙漠盡頭的狼，今天居間一個wpf開源項目-nodenetwork，它可以幫助我們快速構建和定製網絡拓撲圖。

一、前言

在現代軟體開發中，數據可視化和可交互性越來越受到關注。為了實現這一點，通常需要使用各種圖表、表格、網絡拓撲圖等控制項。然而，對於某些特殊的場景，這些控制項可能無法滿足需求，此時我們需要一種自定義的方式來展示和處理數據。nodenetwork就是一種這樣的自定義方式，它是一個基於c# wpf的開源項目，可以幫助我們快速構建和定製網絡拓撲圖。

nodenetwork的代碼託管在github上，是由荷蘭的一位開發者wouterdek所創建和維護的。在本文中，我們將對nodenetwork進行居間和分析，希望讀者能夠通過本文了解到nodenetwork的核心概念、應用場景和使用方法，同時也能夠掌握一些開發nodenetwork的技巧和經驗。

倉庫地址：https://github.com/Wouterdek/NodeNetwork

倉庫截圖：

仓库截图

倉庫源碼結構：

仓库源码结构

二、示例

1. 計算器示例

此示例允許用戶使用節點編輯器創建數學表達式。修改節點時，將自動計算和更新結果值。此應用程式包含節點驗證，自定義節點子類，值輸入/輸出，自定義輸入編輯器，節點列表，...

下面是计算器示例应用程序的演示：

计算器示例应用程序的演示

2. 代碼生成器示例

在此示例中，用戶可以創建 lua 代碼。與虛幻引擎中的藍圖類似，編輯器具有執行流程和數據流。自定義輸入/輸出埠、節點編輯器提供了更直觀的體驗。

下面是代码生成器应用程序的截图：

代码生成器应用程序的截图

3. 著色器編輯器示例

此庫更實用的示例可能是著色器編輯器。

下面是使用 NodeNetwork 制作的着色器编辑器示例的演示：

着色器编辑器示例的演示

这些示例应用程序可在此处下载，其源代码包含在存储库中，库的二进制版本在 NuGet 上可用。

三、特徵

專為 .net framework 4.7.2 和 .net core 3.1 或更高版本構建。
开放、宽松的许可证-Apache-2.0 license。
使用現代反應式 mvvm 代碼構建的交互式、可靠的控制項。
順滑的平移、縮放控制項。
自動布局系統。
高度可定製，但默認情況下易於使用。
強大的節點和連接驗證支持。
大量的單元測試提供支持。
...

四、nodenetwork的核心概念

以下内容可参考仓库组件说明页。

1. 節點（node）

節點是nodenetwork中的最基本元素，可以表示任何一個數據源或處理單元。每個節點可以包含一個或多個輸入埠和輸出埠，分別表示節點接收和輸出的數據。nodenetwork中內置了幾種常用的節點類型，如常量節點、計算節點、輸入輸出節點等，同時也支持自定義節點類型。

2. 連接（connection）

連接是nodenetwork中的一個核心概念，用於表示節點之間的數據傳輸關係。每個連接都有一個源埠和目標埠，源埠表示數據的來源，目標埠表示數據的目標。連接還可以攜帶一些元數據（metadata），用於描述連接的一些附加信息，如顏色、線寬等。

3. 埠（port）

埠是節點的輸入或輸出端點，用於與其他節點進行連接。每個埠都有一個類型，表示該埠所能接收或輸出的數據類型。埠還可以有一些其他屬性，如標籤、描述等，用於描述埠的功能和作用。

4. 圖形界面（gui）

nodenetwork是基於wpf框架實現的，因此它具有一套強大的圖形界面（gui）系統。在nodenetwork中，每個節點和連接都可以顯示為一個圖形化的元素，用戶可以通過拖拽、縮放等方式對這些元素進行操作。

5. 布局（layout）

布局是nodenetwork的另一個重要概念，用於控制節點和連接的位置和大小。nodenetwork中提供了多種不同的布局方式，如自由布局、柵格布局、力導向布局等。用戶可以根據具體的需求選擇不同的布局方式，並且可以通過代碼或圖形界面進行布局的定製和調整。

6. 序列化和反序列化（serialization and deserialization）

在實際的應用中，我們需要將節點和連接保存到文件或資料庫中，或者從文件或資料庫中讀取節點和連接。為了實現這一點，nodenetwork提供了序列化和反序列化功能。序列化是將節點和連接轉換成一個數據流的過程，反序列化則是將數據流轉換成節點和連接的過程。nodenetwork支持多種不同的序列化格式，如xml、json、二進位等，用戶可以根據具體需求選擇不同的格式。

五、nodenetwork的應用場景

nodenetwork具有廣泛的應用場景，下面居間其中的幾個：

1. 數據處理和分析

nodenetwork可以幫助我們快速構建數據處理和分析的工具。例如，我們可以創建一個圖形化的工作流，將不同的數據處理節點連接起來，從而實現數據的預處理、轉換和分析。

2. 圖形化編輯器

nodenetwork可以幫助我們快速構建圖形化的編輯器。例如，我們可以創建一個圖形化的界面，用於編輯和配置某些參數或選項，這些參數或選項可以通過節點和連接的方式進行交互和傳遞。

3. 可視化和交互式展示

nodenetwork可以幫助我們快速構建可視化和交互式的展示工具。例如，我們可以創建一個圖形化的網絡拓撲圖，用於展示某些設備或系統的連接關係和狀態。用戶可以通過節點和連接的方式進行交互和控制，例如添加、刪除、修改節點和連接等。

六、nodenetwork的使用方法

NodeNetwork的使用方法非常简单，下面介绍其中的几个步骤(参考不到30行代码的Hello world)。

首先，使用 Dotnet 8创建WPF项目，项目命名为NodeNetworkTest，您可以使用 .NET Framework 4.7.2 以上或 .NET CORE 3.x 以上，站长使用 .NET 8只是8预览版2刚出来试试而已。

1. 安裝nodenetwork

nodenetwork可以通過nuget包管理器進行安裝。在visual studio中，打開“包管理器控制台”，輸入以下命令即可安裝nodenetwork：

Install-Package NodeNetwork

2. 註冊nodenetwork視圖

MVVM在整个NodeNetwork库中都在贯彻使用。有关MVVM的介绍请点击这里查看。使用库中的元素，您需要创建合适的视图，并为其提供相应的ViewModel实例。

在使用库之前，请在App.xaml.cs文件的OnStartup方法内使用NNViewRegistrar.RegisterSplat()方法将NodeNetwork的视图和相应的ViewModel进行注册关联。

using System.Windows;
using NodeNetwork;

namespace NodeNetworkTest;

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);
        NNViewRegistrar.RegisterSplat();
    }
}

3. 創建視圖

打开MainWindow.xaml，添加NodeNetwork命名空间xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"，并添加NetworkView视图<nodenetwork:NetworkView x:Name="networkView" />，NetworkView表示整个网络拓扑图：

<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">
    <Grid>
        <nodenetwork:NetworkView x:Name="networkView" />
    </Grid>
</Window>

4. 創建節點和連接

在nodenetwork中，創建節點和連接非常簡單。首先，我們需要創建networkviewmodel，它是networkview視圖的viewmodel，可以通過以下代碼創建：

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

最後，我們可以通過以下代碼將節點1的輸入埠和節點2的輸出埠連接到一起：

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

運行程式看效果：

示例代码已经全部给了，你也可以戳这克隆。

5. 布局

在nodenetwork中，布局非常靈活和自由。我們可以通過代碼或圖形界面進行布局。例如，我們可以通過以下代碼將節點放置在指定的位置：

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

通过以下代码调整整个网络拓扑图的布局(参考布局文档)：

ForceDirectedLayouter layouter = new ForceDirectedLayouter();
var config = new Configuration
{
    Network = yourNetwork,
};
layouter.Layout(config, 10000);

6. 序列化和反序列化

在nodenetwork中，序列化和反序列化非常簡單。我們可以通過以下代碼將節點和連接序列化為xml格式：

var serializer = new XmlSerializer(typeof(NodeNetworkViewModel));
var writer = new StringWriter();
serializer.Serialize(writer, nodeNetwork);

然後，我們可以將xml字符串保存到文件或資料庫中。反序列化也非常簡單。我們可以通過以下代碼從xml字符串中反序列化節點和連接：

var serializer = new XmlSerializer(typeof(NodeNetworkViewModel));
var reader = new StringReader(xmlString);
var nodeNetwork = (NodeNetworkViewModel)serializer.Deserialize(reader);

七、總結

nodenetwork是一個非常實用和靈活的c# wpf開源項目，它可以幫助我們快速構建圖形化的網絡拓撲圖，實現節點和連接的交互和傳遞。nodenetwork提供了豐富的功能和特性，例如節點和連接的自定義、布局和調整、序列化和反序列化等，可以滿足各種不同的應用需求。nodenetwork的應用場景非常廣泛，例如數據處理和分析、圖形化編輯器、可視化和交互式展示等。nodenetwork的使用方法非常簡單，我們只需要安裝nodenetwork、創建節點和連接、布局和調整、序列化和反序列化即可。

入門指南

有关使用此库的简单快速入门指南，请参阅此页面上的说明书章节。该文档包括设置信息、说明书章节、示例和 API 参考。

許可證

该库在 Apache 许可证 2.0 下获得许可。（见 choosealicense.com/licenses/apache-2.0 简要介绍）此许可证的副本包含在 LICENSE 下的存储库中。

文檔

文档可在此处获得。如果要对文档进行更改，可以通过向 gh-pages 分支发出拉取请求来实现。

貢獻

這些操作在 github 頁面上非常受歡迎：錯誤報告、補丁、功能請求、拉取請求...

微信技術交流群：添加微信（codewf）備註“入群”
qq技術交流群：771992300。