大家好，我是沙漠盡頭的狼，今天介紹一個(gè)WPF開(kāi)源項(xiàng)目-NodeNetwork，它可以幫助我們快速構(gòu)建和定制網(wǎng)絡(luò)拓?fù)鋱D。

一、前言

在現(xiàn)代軟件開(kāi)發(fā)中，數(shù)據(jù)可視化和可交互性越來(lái)越受到關(guān)注。為了實(shí)現(xiàn)這一點(diǎn)，通常需要使用各種圖表、表格、網(wǎng)絡(luò)拓?fù)鋱D等控件。然而，對(duì)于某些特殊的場(chǎng)景，這些控件可能無(wú)法滿(mǎn)足需求，此時(shí)我們需要一種自定義的方式來(lái)展示和處理數(shù)據(jù)。NodeNetwork就是一種這樣的自定義方式，它是一個(gè)基于C# WPF的開(kāi)源項(xiàng)目，可以幫助我們快速構(gòu)建和定制網(wǎng)絡(luò)拓?fù)鋱D。

NodeNetwork的代碼托管在GitHub上，是由荷蘭的一位開(kāi)發(fā)者Wouterdek所創(chuàng)建和維護(hù)的。在本文中，我們將對(duì)NodeNetwork進(jìn)行介紹和分析，希望讀者能夠通過(guò)本文了解到NodeNetwork的核心概念、應(yīng)用場(chǎng)景和使用方法，同時(shí)也能夠掌握一些開(kāi)發(fā)NodeNetwork的技巧和經(jīng)驗(yàn)。

倉(cāng)庫(kù)地址：https://github.com/Wouterdek/NodeNetwork

倉(cāng)庫(kù)截圖：

倉(cāng)庫(kù)源碼結(jié)構(gòu)：

二、示例

1. 計(jì)算器示例

此示例允許用戶(hù)使用節(jié)點(diǎn)編輯器創(chuàng)建數(shù)學(xué)表達(dá)式。 修改節(jié)點(diǎn)時(shí)，將自動(dòng)計(jì)算和更新結(jié)果值。 此應(yīng)用程序包含節(jié)點(diǎn)驗(yàn)證，自定義節(jié)點(diǎn)子類(lèi)，值輸入/輸出，自定義輸入編輯器，節(jié)點(diǎn)列表，...

下面是計(jì)算器示例[1]應(yīng)用程序的演示：

2. 代碼生成器示例

在此示例中，用戶(hù)可以創(chuàng)建 LUA 代碼。與虛幻引擎中的藍(lán)圖類(lèi)似，編輯器具有執(zhí)行流程和數(shù)據(jù)流。 自定義輸入/輸出端口、節(jié)點(diǎn)編輯器提供了更直觀(guān)的體驗(yàn)。

下面是代碼生成器[2]應(yīng)用程序的截圖：

3. 著色器編輯器示例

此庫(kù)更實(shí)用的示例可能是著色器編輯器。

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

這些示例應(yīng)用程序可在此處下載[4]，其源代碼包含在存儲(chǔ)庫(kù)中，庫(kù)的二進(jìn)制版本在 NuGet 上可用。

三、特征

1. 專(zhuān)為 .NET Framework 4.7.2 和 .NET Core 3.1 或更高版本構(gòu)建。

2. 開(kāi)放、寬松的許可證-Apache-2.0 license[5]。

3. 使用現(xiàn)代反應(yīng)式 MVVM 代碼構(gòu)建的交互式、可靠的控件。

4. 順滑的平移、縮放控件。

5. 自動(dòng)布局系統(tǒng)。

6. 高度可定制，但默認(rèn)情況下易于使用。

7. 強(qiáng)大的節(jié)點(diǎn)和連接驗(yàn)證支持。

8. 大量的單元測(cè)試提供支持。

9. ...

四、NodeNetwork的核心概念

以下內(nèi)容可參考倉(cāng)庫(kù)組件說(shuō)明[6]頁(yè)。

1. 節(jié)點(diǎn)（Node）

節(jié)點(diǎn)是NodeNetwork中的最基本元素，可以表示任何一個(gè)數(shù)據(jù)源或處理單元。每個(gè)節(jié)點(diǎn)可以包含一個(gè)或多個(gè)輸入端口和輸出端口，分別表示節(jié)點(diǎn)接收和輸出的數(shù)據(jù)。NodeNetwork中內(nèi)置了幾種常用的節(jié)點(diǎn)類(lèi)型，如常量節(jié)點(diǎn)、計(jì)算節(jié)點(diǎn)、輸入輸出節(jié)點(diǎn)等，同時(shí)也支持自定義節(jié)點(diǎn)類(lèi)型。

2. 連接（Connection）

連接是NodeNetwork中的一個(gè)核心概念，用于表示節(jié)點(diǎn)之間的數(shù)據(jù)傳輸關(guān)系。每個(gè)連接都有一個(gè)源端口和目標(biāo)端口，源端口表示數(shù)據(jù)的來(lái)源，目標(biāo)端口表示數(shù)據(jù)的目標(biāo)。連接還可以攜帶一些元數(shù)據(jù)（metadata），用于描述連接的一些附加信息，如顏色、線(xiàn)寬等。

3. 端口（Port）

端口是節(jié)點(diǎn)的輸入或輸出端點(diǎn)，用于與其他節(jié)點(diǎn)進(jìn)行連接。每個(gè)端口都有一個(gè)類(lèi)型，表示該端口所能接收或輸出的數(shù)據(jù)類(lèi)型。端口還可以有一些其他屬性，如標(biāo)簽、描述等，用于描述端口的功能和作用。

4. 圖形界面（GUI）

NodeNetwork是基于WPF框架實(shí)現(xiàn)的，因此它具有一套強(qiáng)大的圖形界面（GUI）系統(tǒng)。在NodeNetwork中，每個(gè)節(jié)點(diǎn)和連接都可以顯示為一個(gè)圖形化的元素，用戶(hù)可以通過(guò)拖拽、縮放等方式對(duì)這些元素進(jìn)行操作。

5. 布局（Layout）

布局是NodeNetwork的另一個(gè)重要概念，用于控制節(jié)點(diǎn)和連接的位置和大小。NodeNetwork中提供了多種不同的布局方式，如自由布局、柵格布局、力導(dǎo)向布局等。用戶(hù)可以根據(jù)具體的需求選擇不同的布局方式，并且可以通過(guò)代碼或圖形界面進(jìn)行布局的定制和調(diào)整。

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

在實(shí)際的應(yīng)用中，我們需要將節(jié)點(diǎn)和連接保存到文件或數(shù)據(jù)庫(kù)中，或者從文件或數(shù)據(jù)庫(kù)中讀取節(jié)點(diǎn)和連接。為了實(shí)現(xiàn)這一點(diǎn)，NodeNetwork提供了序列化和反序列化功能。序列化是將節(jié)點(diǎn)和連接轉(zhuǎn)換成一個(gè)數(shù)據(jù)流的過(guò)程，反序列化則是將數(shù)據(jù)流轉(zhuǎn)換成節(jié)點(diǎn)和連接的過(guò)程。NodeNetwork支持多種不同的序列化格式，如XML、JSON、二進(jìn)制等，用戶(hù)可以根據(jù)具體需求選擇不同的格式。

五、NodeNetwork的應(yīng)用場(chǎng)景

NodeNetwork具有廣泛的應(yīng)用場(chǎng)景，下面介紹其中的幾個(gè)：

1. 數(shù)據(jù)處理和分析

NodeNetwork可以幫助我們快速構(gòu)建數(shù)據(jù)處理和分析的工具。例如，我們可以創(chuàng)建一個(gè)圖形化的工作流，將不同的數(shù)據(jù)處理節(jié)點(diǎn)連接起來(lái)，從而實(shí)現(xiàn)數(shù)據(jù)的預(yù)處理、轉(zhuǎn)換和分析。

2. 圖形化編輯器

NodeNetwork可以幫助我們快速構(gòu)建圖形化的編輯器。例如，我們可以創(chuàng)建一個(gè)圖形化的界面，用于編輯和配置某些參數(shù)或選項(xiàng)，這些參數(shù)或選項(xiàng)可以通過(guò)節(jié)點(diǎn)和連接的方式進(jìn)行交互和傳遞。

3. 可視化和交互式展示

NodeNetwork可以幫助我們快速構(gòu)建可視化和交互式的展示工具。例如，我們可以創(chuàng)建一個(gè)圖形化的網(wǎng)絡(luò)拓?fù)鋱D，用于展示某些設(shè)備或系統(tǒng)的連接關(guān)系和狀態(tài)。用戶(hù)可以通過(guò)節(jié)點(diǎn)和連接的方式進(jìn)行交互和控制，例如添加、刪除、修改節(jié)點(diǎn)和連接等。

六、NodeNetwork的使用方法

NodeNetwork的使用方法非常簡(jiǎn)單，下面介紹其中的幾個(gè)步驟(參考不到30行代碼的Hello world[7])。

首先，使用 Dotnet 8[8]創(chuàng)建WPF項(xiàng)目，項(xiàng)目命名為NodeNetworkTest，您可以使用 .NET Framework 4.7.2 以上或 .NET CORE 3.x 以上，站長(zhǎng)使用 .NET 8只是8預(yù)覽版2剛出來(lái)試試而已。

1. 安裝NodeNetwork

NodeNetwork可以通過(guò)NuGet包管理器進(jìn)行安裝。在Visual Studio中，打開(kāi)“包管理器控制臺(tái)”，輸入以下命令即可安裝NodeNetwork：

Install-Package?NodeNetwork


2. 注冊(cè)NodeNetwork視圖

MVVM在整個(gè)NodeNetwork庫(kù)中都在貫徹使用。有關(guān)MVVM的介紹請(qǐng)點(diǎn)擊這里[9]查看。使用庫(kù)中的元素，您需要?jiǎng)?chuàng)建合適的視圖，并為其提供相應(yīng)的ViewModel實(shí)例。

在使用庫(kù)之前，請(qǐng)?jiān)?code>App.xaml.cs文件的OnStartup方法內(nèi)使用NNViewRegistrar.RegisterSplat()方法將NodeNetwork的視圖和相應(yīng)的ViewModel進(jìn)行注冊(cè)關(guān)聯(lián)。

3. 創(chuàng)建視圖

打開(kāi)MainWindow.xaml，添加NodeNetwork命名空間xmlns:nodenetwork="clr-namespace:NodeNetwork.Views;assembly=NodeNetwork"，并添加NetworkView視圖<nodenetwork:NetworkView x:Name="networkView" />，NetworkView表示整個(gè)網(wǎng)絡(luò)拓?fù)鋱D：

4. 創(chuàng)建節(jié)點(diǎn)和連接

在NodeNetwork中，創(chuàng)建節(jié)點(diǎn)和連接非常簡(jiǎn)單。首先，我們需要?jiǎng)?chuàng)建NetworkViewModel，它是NetworkView視圖的ViewModel，可以通過(guò)以下代碼創(chuàng)建：

然后通過(guò)以下代碼創(chuàng)建第一個(gè)節(jié)點(diǎn)：

并給第一個(gè)節(jié)點(diǎn)創(chuàng)建一個(gè)輸入端口：

創(chuàng)建第二個(gè)節(jié)點(diǎn)，并以同樣的方式給此節(jié)點(diǎn)創(chuàng)建一個(gè)輸出端口：

最后，我們可以通過(guò)以下代碼將節(jié)點(diǎn)1的輸入端口和節(jié)點(diǎn)2的輸出端口連接到一起：

完整代碼如下：

運(yùn)行程序看效果：

示例代碼已經(jīng)全部給了，你也可以戳這[10]克隆。

5. 布局

在NodeNetwork中，布局非常靈活和自由。我們可以通過(guò)代碼或圖形界面進(jìn)行布局。例如，我們可以通過(guò)以下代碼將節(jié)點(diǎn)放置在指定的位置：

通過(guò)以下代碼調(diào)整整個(gè)網(wǎng)絡(luò)拓?fù)鋱D的布局(參考布局文檔[11])：

6. 序列化和反序列化

在NodeNetwork中，序列化和反序列化非常簡(jiǎn)單。我們可以通過(guò)以下代碼將節(jié)點(diǎn)和連接序列化為XML格式：

然后，我們可以將XML字符串保存到文件或數(shù)據(jù)庫(kù)中。反序列化也非常簡(jiǎn)單。我們可以通過(guò)以下代碼從XML字符串中反序列化節(jié)點(diǎn)和連接：

七、總結(jié)

NodeNetwork是一個(gè)非常實(shí)用和靈活的C# WPF開(kāi)源項(xiàng)目，它可以幫助我們快速構(gòu)建圖形化的網(wǎng)絡(luò)拓?fù)鋱D，實(shí)現(xiàn)節(jié)點(diǎn)和連接的交互和傳遞。NodeNetwork提供了豐富的功能和特性，例如節(jié)點(diǎn)和連接的自定義、布局和調(diào)整、序列化和反序列化等，可以滿(mǎn)足各種不同的應(yīng)用需求。NodeNetwork的應(yīng)用場(chǎng)景非常廣泛，例如數(shù)據(jù)處理和分析、圖形化編輯器、可視化和交互式展示等。NodeNetwork的使用方法非常簡(jiǎn)單，我們只需要安裝NodeNetwork、創(chuàng)建節(jié)點(diǎn)和連接、布局和調(diào)整、序列化和反序列化即可。

• 入門(mén)指南

有關(guān)使用此庫(kù)的簡(jiǎn)單快速入門(mén)指南，請(qǐng)參閱此頁(yè)面[12]上的說(shuō)明書(shū)章節(jié)。 該文檔包括設(shè)置信息、說(shuō)明書(shū)章節(jié)、示例和 API 參考。

• 許可證

該庫(kù)在 Apache 許可證 2.0 下獲得許可。（見(jiàn) choosealicense.com/licenses/apache-2.0[13] 簡(jiǎn)要介紹）此許可證的副本包含在 LICENSE 下的存儲(chǔ)庫(kù)中。

• 文檔

文檔可在此處[14]獲得。如果要對(duì)文檔進(jìn)行更改，可以通過(guò)向 gh-pages 分支[15]發(fā)出拉取請(qǐng)求來(lái)實(shí)現(xiàn)。

• 貢獻(xiàn)

這些操作在 GitHub 頁(yè)面上非常受歡迎：錯(cuò)誤報(bào)告、補(bǔ)丁、功能請(qǐng)求、拉取請(qǐng)求...參考資料

[1]

計(jì)算器示例: https://github.com/Wouterdek/NodeNetwork/tree/master/ExampleCalculatorApp