能快速構建和定制網路拓撲圖的WPF開源專案-NodeNetwork

大家好，我是沙漠盡頭的狼，今天介紹一個WPF開源專案-NodeNetwork，它可以幫助我們快速構建和定制網路拓撲圖，

一、前言

在現代軟體開發中，資料可視化和可互動性越來越受到關注，為了實作這一點，通常需要使用各種圖表、表格、網路拓撲圖等控制元件，然而，對于某些特殊的場景，這些控制元件可能無法滿足需求，此時我們需要一種自定義的方式來展示和處理資料，NodeNetwork就是一種這樣的自定義方式，它是一個基于C# WPF的開源專案，可以幫助我們快速構建和定制網路拓撲圖，

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

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

倉庫截圖：

倉庫原始碼結構：

二、示例

1. 計算器示例

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

下面是計算器示例應用程式的演示：

2. 代碼生成器示例

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

下面是代碼生成器應用程式的截圖：

3. 著色器編輯器示例

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

下面是使用 NodeNetwork 制作的著色器編輯器示例的演示：

這些示例應用程式可在此處下載，其源代碼包含在存盤庫中，庫的二進制版本在 NuGet 上可用，

三、特征

1. 專為 .NET Framework 4.7.2 和 .NET Core 3.1 或更高版本構建，
2. 開放、寬松的許可證-Apache-2.0 license，
3. 使用現代反應式 MVVM 代碼構建的互動式、可靠的控制元件，
4. 順滑的平移、縮放控制元件，
5. 自動布局系統，
6. 高度可定制，但默認情況下易于使用，
7. 強大的節點和連接驗證支持，
8. 大量的單元測驗提供支持，
9. ...

四、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:
        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" >
    <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 頁面上非常受歡迎：錯誤報告、補丁、功能請求、拉取請求...

• 微信技術交流群：添加微信（dotnet9com）備注“入群”
• QQ技術交流群：771992300，

標籤：WPF

上一篇：能快速構建和定制網路拓撲圖的WPF開源專案-NodeNetwork

下一篇：.NET應用系統的國際化-多語言翻譯服務