Nodify学习 二：添加节点

Nodify学习 一：介绍与使用 - 可乐_加冰 - 博客园 (cnblogs.com)

Nodify学习 二：添加节点 - 可乐_加冰 - 博客园 (cnblogs.com)

添加节点（nodes）

通过上一篇我们已经创建好了编辑器实例现在我们为编辑器添加一个节点

添加model和viewmodel并将它们绑定到视图

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

public class EditorViewModel
{
    public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();

    public EditorViewModel()
    {
        Nodes.Add(new NodeViewModel { Title = "Welcome" });
    }
}

添加视图模型

 视图模型可以是任何形状，但节点的视图由 ItemTemplate 生成。（将 DataTemplate 放在 NodifyEditor.Resources 中也能实现相同的效果）

  <window
      ....
     xmlns:vm="clr-namespace:NodifySamples2.ViewModels"
      .....
>
<nodify:NodifyEditor
           x: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}" />
                                   </DataTemplate>
     </nodify:NodifyEditor.ItemTemplate>
</nodify:NodifyEditor>

 

效果图

 

添加连接节点

连接节点用于管理节点之间的连接，和绘制对应的连接线

首先，我们需要一个连接器的表示以及节点上一些集合来存储我们的连接器。

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

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

public class EditorViewModel
{
    public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();

    public EditorViewModel()
    {
        Nodes.Add(new NodeViewModel
        {
            Title = "Welcome",
            Input = new ObservableCollection<ConnectorViewModel>
            {
                new ConnectorViewModel
                {
                    Title = "输入"
                }
            },
            Output = new ObservableCollection<ConnectorViewModel>
            {
                new ConnectorViewModel
                {
                    Title = "输出"
                }
            }
        });
    }
}

 然后将它们绑定到视图。（我们使用了内置的 NodeInput 和 NodeOutput 作为视图，但也有其他连接器。或者根据需要创建自己的连接器。）

 <nodify:NodifyEditor
     x:Name="Editor"
     Background="{StaticResource GridDrawingBrush}"
     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:NodeOutput Header="{Binding Title}" />
                     </DataTemplate>
                 </nodify:Node.OutputConnectorTemplate>
             </nodify:Node>
         </DataTemplate>
     </nodify:NodifyEditor.ItemTemplate>
 </nodify:NodifyEditor>

效果

 

下载地址

Github:zt199510/NodifySamples (github.com)