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) 
 

来源:https://www.cnblogs.com/zt199510/p/18315373
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！