第二节：Nodify 添加节点到编辑器中

引言

上节说到Nodify有三层结构，编辑器Editor，节点Node和连接组件Connection，下面就让我们来进行第一步尝试，在编辑器中添加一个节点。

在窗口中添加nodify命名空间，并添加控件。

xmlns:nodify="https://miroiu.github.io/nodify"

1、设计节点Node

一个节点工具主要包含节点的名称、功能、输出输出口等，输出输出口称连接端子（Connector）

1.1、基本单元：连接端子Connector

  public class ConnectorViewModel{public string Title { get; set; }}

1.2、节点Node

创建一个节点，有一个输入端子排、一个输出端子排

public class NodeViewModel
{public string Title { get; set; }public ObservableCollection<ConnectorViewModel> Input { get; set; } = new ObservableCollection<ConnectorViewModel>();public ObservableCollection<ConnectorViewModel> Output { get; set; } = new ObservableCollection<ConnectorViewModel>();
}

2、编辑器Editor

编辑器：作为最外层的主要交互对象，保存所有节点

public class EditorViewModel
{//节点集合public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();public EditorViewModel(){//自定义节点var welcome = new NodeViewModel{Title = "Welcome",Input = new ObservableCollection<ConnectorViewModel>{new ConnectorViewModel{Title = "In"}},Output = new ObservableCollection<ConnectorViewModel>{new ConnectorViewModel{Title = "Out"}}};//添加自定义节点到节点集合Nodes.Add(welcome);}
}

3、绑定属性

​
<Grid><nodify:NodifyEditorName="Editor"ItemsSource="{Binding Nodes}"><nodify:NodifyEditor.DataContext><vm:EditorViewModel /></nodify:NodifyEditor.DataContext><nodify:NodifyEditor.ItemTemplate><DataTemplate DataType="{x:Type mod:NodeViewModel}"><nodify:NodeHeader="{Binding Title}"Input="{Binding Input}"Output="{Binding Output}"><nodify:Node.InputConnectorTemplate><DataTemplate DataType="{x:Type mod:ConnectorViewModel}"><nodify:NodeInputHeader="{Binding Title}"/></DataTemplate></nodify:Node.InputConnectorTemplate><nodify:Node.OutputConnectorTemplate><DataTemplate DataType="{x:Type mod:ConnectorViewModel}"><nodify:NodeInputHeader="{Binding Title}"/></DataTemplate></nodify:Node.OutputConnectorTemplate></nodify:Node></DataTemplate></nodify:NodifyEditor.ItemTemplate></nodify:NodifyEditor>
</Grid>​