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

引言

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

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

cs 复制代码

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

1、设计节点Node

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

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

cs 复制代码

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

1.2、节点Node

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

cs 复制代码

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

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

cs 复制代码

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、绑定属性

cs 复制代码


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