Nodify学习 四：预先毗连

前置

预先毗连

可以从毗连器创建预先毗连，并可以放置在ItemContainer或Connector上（如果AllowOnlyConnectors为false）。
预先毗连的Content可以使用ContentTemplate进行自定义。如果EnablePreview为true，PreviewTarget将更新为鼠标光标下的毗连器或项目容器，大概为null（如果没有如许的元素）

 
预先毗连的可见性可以使用IsVisible依赖属性进行控制。
毗连器的毗连捕捉可以使用EnableSnapping依赖属性启用。
Source和Target属性是毗连器的数据上下文，预先毗连完成时Target将更新。
另有一个StartedCommand，参数是Source，以及一个CompletedCommand，参数是Target。
提示：取消预先毗连的方法是开释右键。
 
 
预先毗连从一个 Source 开始，当放置到一个 Target 上时将完成。源始终是一个毗连器，目标可以是一个毗连器、一个项目容器或 null。我们现在只关心其他毗连器。当毗连开始时，执行 StartedCommand，该命令接收 Source 作为参数。当毗连完成时，执行 CompletedCommand，该命令接收 Target 作为参数。
操作

首先我们必要创建预先毗连的视图模型类，并将其添加到 EditorViewModel 中。

1. public class PendingConnectionViewModel : ObservableObject
2. {
3.     private readonly EditorViewModel _editor;
4.     private ConnectorViewModel _source;
6.     public PendingConnectionViewModel(EditorViewModel editor)
7.     {
8.         _editor = editor;
9.         StartCommand = new DelegateCommand<ConnectorViewModel>(source => _source = source);
10.         FinishCommand = new DelegateCommand<ConnectorViewModel>(target =>
11.         {
12.             if (target != null)
13.                 _editor.Connect(_source, target);
14.         });
15.     }
17.     public ICommand StartCommand { get; }
18.     public ICommand FinishCommand { get; }
19. }

复制代码

1. public class EditorViewModel
2. {
3.      public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();
4.      public ObservableCollection<ConnectionViewModel> Connections { get; } = new ObservableCollection<ConnectionViewModel>();
7.      public PendingConnectionViewModel PendingConnection { get; }
8.      public EditorViewModel()
9.      {
12.          PendingConnection  = new PendingConnectionViewModel(this);
13.          var welcome = new NodeViewModel
14.          {
15.              Title = "我的第一个节点",
16.              Input = new ObservableCollection<ConnectorViewModel>
17.          {
18.              new ConnectorViewModel
19.              {
20.                  Title = "输入"
21.              }
22.          },
23.              Output = new ObservableCollection<ConnectorViewModel>
24.          {
25.              new ConnectorViewModel
26.              {
27.                  Title = "输出"
28.              }
29.          }
30.          };
31.    
33.          var nodify = new NodeViewModel
34.          {
35.              Title = "节点1",
36.              Input = new ObservableCollection<ConnectorViewModel>
37.          {
38.              new ConnectorViewModel
39.              {
40.                  Title = "输入"
41.              }
42.          }
43.          };
44.          Nodes.Add(welcome);
45.          Nodes.Add(nodify);
48.         
49.         
50.      }
53.      public void Connect(ConnectorViewModel source, ConnectorViewModel target)
54.      {
55.          var newConnection = new ConnectionViewModel(source, target);
57.          // 检查是否已经存在相同的连接
58.          if (!Connections.Contains(newConnection))
59.          {
60.              Connections.Add(newConnection);
61.          }
62.      }
63. }

复制代码

 

1. <nodify:NodifyEditor PendingConnection="{Binding PendingConnection}">
2. ...
3.     <nodify:NodifyEditor.PendingConnectionTemplate>
4.         <DataTemplate DataType="{x:Type local:PendingConnectionViewModel}">
5.             <nodify:PendingConnection StartedCommand="{Binding StartCommand}"
6.                                       CompletedCommand="{Binding FinishCommand}"
7.                                       AllowOnlyConnectors="True" />
8.         </DataTemplate>
9.     </nodify:NodifyEditor.PendingConnectionTemplate>
10. ...
11. </nodify:NodifyEditor>

复制代码

 这就是创建毗连的全部内容。现在你应该可以在毗连器之间创建毗连了。

代码地址

Github（NodifySamples4）：zt199510/NodifySamples (github.com) 
 

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