Nodify学习 二：添加节点

Nodify学习 一：介绍与使用 - 可乐_加冰 - 博客园 (cnblogs.com)
Nodify学习 二：添加节点 - 可乐_加冰 - 博客园 (cnblogs.com)
添加节点（nodes）

通过上一篇我们已经创建好了编辑器实例如今我们为编辑器添加一个节点
添加model和viewmodel并将它们绑定到视图

1. public class NodeViewModel
2. {
3.     public string Title { get; set; }
4. }

复制代码

1. public class EditorViewModel
2. {
3.     public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();
5.     public EditorViewModel()
6.     {
7.         Nodes.Add(new NodeViewModel { Title = "Welcome" });
8.     }
9. }

复制代码

添加视图模子

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

1.   <window
2.       ....
3.      xmlns:vm="clr-namespace:NodifySamples2.ViewModels"
4.       .....
5. ><br><nodify:NodifyEditor<br>           x:Name="Editor"<br>           ItemsSource="{Binding Nodes}"><br>                         <nodify:NodifyEditor.DataContext><br>                                <vm:EditorViewModel /><br>                       </nodify:NodifyEditor.DataContext><br>                              <nodify:NodifyEditor.ItemTemplate><br>                                   <DataTemplate DataType="{x:Type mod:NodeViewModel}"><br>                                      <nodify:Node Header="{Binding Title}" /><br>                                   </DataTemplate><br>     </nodify:NodifyEditor.ItemTemplate><br></nodify:NodifyEditor>

复制代码

 
结果图

 
添加连接节点

连接节点用于管理节点之间的连接，和绘制对应的连接线
首先，我们必要一个连接器的表示以及节点上一些集合来存储我们的连接器。

1. public class ConnectorViewModel
2. {
3.     public string Title { get; set; }
4. }

复制代码

1. public class NodeViewModel
2. {
3.     public string Title { get; set; }
5.     public ObservableCollection<ConnectorViewModel> Input { get; set; } = new ObservableCollection<ConnectorViewModel>();
6.     public ObservableCollection<ConnectorViewModel> Output { get; set; } = new ObservableCollection<ConnectorViewModel>();
7. }

复制代码

1. public class EditorViewModel
2. {
3.     public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();
5.     public EditorViewModel()
6.     {
7.         Nodes.Add(new NodeViewModel
8.         {
9.             Title = "Welcome",
10.             Input = new ObservableCollection<ConnectorViewModel>
11.             {
12.                 new ConnectorViewModel
13.                 {
14.                     Title = "输入"
15.                 }
16.             },
17.             Output = new ObservableCollection<ConnectorViewModel>
18.             {
19.                 new ConnectorViewModel
20.                 {
21.                     Title = "输出"
22.                 }
23.             }
24.         });
25.     }
26. }

复制代码

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

1. <nodify:NodifyEditor
2.      x:Name="Editor"
3.      Background="{StaticResource GridDrawingBrush}"
4.      ItemsSource="{Binding Nodes}">
5.      <nodify:NodifyEditor.DataContext>
6.          <vm:EditorViewModel />
7.      </nodify:NodifyEditor.DataContext>
8.      <nodify:NodifyEditor.ItemTemplate>
9.          <DataTemplate DataType="{x:Type mod:NodeViewModel}">
10.              <nodify:Node
11.                  Header="{Binding Title}"
12.                  Input="{Binding Input}"
13.                  Output="{Binding Output}">
14.                  <nodify:Node.InputConnectorTemplate>
15.                      <DataTemplate DataType="{x:Type mod:ConnectorViewModel}">
16.                          <nodify:NodeInput Header="{Binding Title}" />
17.                      </DataTemplate>
18.                  </nodify:Node.InputConnectorTemplate>
20.                  <nodify:Node.OutputConnectorTemplate>
21.                      <DataTemplate DataType="{x:Type mod:ConnectorViewModel}">
22.                          <nodify:NodeOutput Header="{Binding Title}" />
23.                      </DataTemplate>
24.                  </nodify:Node.OutputConnectorTemplate>
25.              </nodify:Node>
26.          </DataTemplate>
27.      </nodify:NodifyEditor.ItemTemplate>
28. </nodify:NodifyEditor>

复制代码

结果

 
下载地址

Github:zt199510/NodifySamples (github.com)
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。