.net core+网络拓扑图的WPF开源项目-NodeNetwork

1，为了找一个数据库设计工具，可是没找到满意的，记得以前一直都是用Power Designer，可是这工具越做越大，虽然功能强大，但是对于数据库设计分析来看，还是感觉没必要装这么大的软件，而老版本的界面感觉比较过时了。虽然也找了不少现在的比较不错的，但是大部分要钱的，还找到国外比较新的免费在线设计工具，可是网速太慢，工作起来没效率。于是考虑到能让否自己开发。

2，一开始用vs2015，虽然可以实现简单的listbox拖拉移动，但是设计线的时候用到gdi，一方面是线条实在难看，一方面控制起来还是要写不少算法。

3，无意中发现了mvvm，才知道.net framework原来快过时了，又出现了一个.net core，于是考虑用.net core来做mvvc的项目，winform项目可以用wpf项目来实现更好看的外观

4，安装vscode

5，安装.NET Core 3.1 SDK

https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/sdk-3.1.201-windows-x64-installer
https://dotnet.microsoft.com/zh-cn/download/dotnet/3.1

以上2个链接一样，链接中有sdk和runtime，sdk是我们开发需要的，而runtime是给一些无法使用的用户电脑安装的。

6，用vscode打开一个文件夹，然后在vscode终端如下操作

查看可以创建什么项目
dotnet new

创建一个wpf项目
dotnet new wpf -o mywpf

进入mywp文件夹运行项目
dotnet run

在vs2015中我们可以如下来安装一个包
Install-Package NodeNetwork

但在vscode中我们需要安装NuGet插件
然后就可以添加包了

但我更喜欢：
dotnet add package NodeNetwork

格式化快捷键
Alt+shift+f
首次用回提示安装格式化插件

7，注册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();
    }
}

8，打开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>

9，创建节点和连接
在NodeNetwork中，创建节点和连接非常简单。首先，我们需要创建NetworkViewModel，它是NetworkView视图的ViewModel，可以通过以下代码创建：

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