大家好,我是沙漠盡頭的狼,今天介紹一個WPF開源項目-NodeNetwork,它可以幫助我們快速建構和定制網絡拓撲圖。
一、前言
在現代軟體開發中,資料可視化和可互動性越來越受到關注。為了實作這一點,通常需要使用各種圖表、表格、網絡拓撲圖等控件。然而,對于某些特殊的場景,這些控件可能無法滿足需求,此時我們需要一種自定義的方式來展示和處理資料。NodeNetwork就是一種這樣的自定義方式,它是一個基于C# WPF的開源項目,可以幫助我們快速建構和定制網絡拓撲圖。
NodeNetwork的代碼托管在GitHub上,是由荷蘭的一位開發者Wouterdek所建立和維護的。在本文中,我們将對NodeNetwork進行介紹和分析,希望讀者能夠通過本文了解到NodeNetwork的核心概念、應用場景和使用方法,同時也能夠掌握一些開發NodeNetwork的技巧和經驗。
倉庫位址:https://github.com/Wouterdek/NodeNetwork
倉庫截圖:
倉庫截圖
倉庫源碼結構:
倉庫源碼結構
二、示例
1. 電腦示例
此示例允許使用者使用節點編輯器建立數學表達式。修改節點時,将自動計算和更新結果值。此應用程式包含節點驗證,自定義節點子類,值輸入/輸出,自定義輸入編輯器,節點清單,...
下面是電腦示例[1]應用程式的示範:
電腦示例應用程式的示範
2. 代碼生成器示例
在此示例中,使用者可以建立 LUA 代碼。與虛幻引擎中的藍圖類似,編輯器具有執行流程和資料流。自定義輸入/輸出端口、節點編輯器提供了更直覺的體驗。
下面是代碼生成器[2]應用程式的截圖:
代碼生成器應用程式的截圖
3. 着色器編輯器示例
此庫更實用的示例可能是着色器編輯器。
下面是使用 NodeNetwork 制作的着色器編輯器[3]示例的示範:
着色器編輯器示例的示範
這些示例應用程式可在此處下載下傳[4],其源代碼包含在存儲庫中,庫的二進制版本在 NuGet 上可用。
三、特征
- 專為 .NET Framework 4.7.2 和 .NET Core 3.1 或更高版本建構。
- 開放、寬松的許可證-Apache-2.0 license[5]。
- 使用現代反應式 MVVM 代碼建構的互動式、可靠的控件。
- 順滑的平移、縮放控件。
- 自動布局系統。
- 高度可定制,但預設情況下易于使用。
- 強大的節點和連接配接驗證支援。
- 大量的單元測試提供支援。
- ...
四、NodeNetwork的核心概念
以下内容可參考倉庫元件說明[6]頁。
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[7])。
首先,使用 Dotnet 8[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的介紹請點選這裡[9]檢視。使用庫中的元素,您需要建立合适的視圖,并為其提供相應的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);
}
}
運作程式看效果:
示例代碼已經全部給了,你也可以戳這[10]克隆。
5. 布局
在NodeNetwork中,布局非常靈活和自由。我們可以通過代碼或圖形界面進行布局。例如,我們可以通過以下代碼将節點放置在指定的位置:
node.Position = new Point(100, 100);
通過以下代碼調整整個網絡拓撲圖的布局(參考布局文檔[11]):
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、建立節點和連接配接、布局和調整、序列化和反序列化即可。
- 入門指南
有關使用此庫的簡單快速入門指南,請參閱此頁面[12]上的說明書章節。該文檔包括設定資訊、說明書章節、示例和 API 參考。
- 許可證
該庫在 Apache 許可證 2.0 下獲得許可。(見 choosealicense.com/licenses/apache-2.0[13] 簡要介紹)此許可證的副本包含在 LICENSE 下的存儲庫中。
- 文檔
文檔可在此處[14]獲得。如果要對文檔進行更改,可以通過向 gh-pages 分支[15]發出拉取請求來實作。
- 貢獻
這些操作在 GitHub 頁面上非常受歡迎:錯誤報告、更新檔、功能請求、拉取請求...
- 微信技術交流群:添加微信(dotnet9com)備注“入群”
- QQ技術交流群:771992300。
參考資料
[1]
電腦示例: https://github.com/Wouterdek/NodeNetwork/tree/master/ExampleCalculatorApp
[2]
代碼生成器: https://github.com/Wouterdek/NodeNetwork/tree/master/ExampleCodeGenApp
[3]
着色器編輯器: https://github.com/Wouterdek/NodeNetwork/tree/master/ExampleShaderEditorApp
[4]
下載下傳: https://github.com/Wouterdek/NodeNetwork/releases
[5]
Apache-2.0 license: https://github.com/Wouterdek/NodeNetwork/blob/master/LICENSE
[6]
元件說明: https://wouterdek.me/NodeNetwork/components
[7]
不到30行代碼的Hello world: https://wouterdek.me/NodeNetwork/cookbook/hello_world
[8]
Dotnet 8: https://dotnet.microsoft.com/zh-cn/download/dotnet/8.0
[9]
這裡: https://www.codeproject.com/Articles/100175/Model-View-ViewModel-MVVM-Explained
[10]
戳這: https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/Demo/NodeNetworkTest
[11]
布局文檔: https://wouterdek.me/NodeNetwork/cookbook/layout
[12]
此頁面: https://wouterdek.github.io/NodeNetwork/doc
[13]
choosealicense.com/licenses/apache-2.0: https://choosealicense.com/licenses/apache-2.0
[14]
此處: https://wouterdek.github.io/NodeNetwork/doc
[15]
gh-pages 分支: https://github.com/Wouterdek/NodeNetwork/tree/gh-pages