Nodify学习四：预先连接

可乐_加冰Blogs

已于 2024-07-24 09:01:55 修改

阅读量306

点赞数 4

分类专栏： WPF 文章标签：学习

于 2024-07-24 09:00:08 首次发布

本文链接：https://blog.csdn.net/qq_39460155/article/details/140652858

版权

WPF 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前置

预先连接

可以从连接器创建预先连接，并可以放置在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 中。

public class PendingConnectionViewModel : ObservableObject
{
    private readonly EditorViewModel _editor;
    private ConnectorViewModel _source;
</span><span style="color: #0000ff;">public</span><span style="color: #000000;"> PendingConnectionViewModel(EditorViewModel editor)
{
    _editor </span>=<span style="color: #000000;"> editor;
    StartCommand </span>= <span style="color: #0000ff;">new</span> DelegateCommand&lt;ConnectorViewModel&gt;(source =&gt; _source =<span style="color: #000000;"> source);
    FinishCommand </span>= <span style="color: #0000ff;">new</span> DelegateCommand&lt;ConnectorViewModel&gt;(target =&gt;<span style="color: #000000;">
    {
        </span><span style="color: #0000ff;">if</span> (target != <span style="color: #0000ff;">null</span><span style="color: #000000;">)
            _editor.Connect(_source, target);
    });
}

</span><span style="color: #0000ff;">public</span> ICommand StartCommand { <span style="color: #0000ff;">get</span><span style="color: #000000;">; }
</span><span style="color: #0000ff;">public</span> ICommand FinishCommand { <span style="color: #0000ff;">get</span><span style="color: #000000;">; }

}

 public class EditorViewModel
 {
     public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();
     public ObservableCollection<ConnectionViewModel> Connections { get; } = new ObservableCollection<ConnectionViewModel>();
 </span><span style="color: #0000ff;">public</span> PendingConnectionViewModel PendingConnection { <span style="color: #0000ff;">get</span><span style="color: #000000;">; }
 </span><span style="color: #0000ff;">public</span><span style="color: #000000;"> EditorViewModel()
 {


     PendingConnection  </span>= <span style="color: #0000ff;">new</span> PendingConnectionViewModel(<span style="color: #0000ff;">this</span><span style="color: #000000;">);
     </span><span style="color: #0000ff;">var</span> welcome = <span style="color: #0000ff;">new</span><span style="color: #000000;"> NodeViewModel
     {
         Title </span>= <span style="color: #800000;">"</span><span style="color: #800000;">我的第一个节点</span><span style="color: #800000;">"</span><span style="color: #000000;">,
         Input </span>= <span style="color: #0000ff;">new</span> ObservableCollection&lt;ConnectorViewModel&gt;<span style="color: #000000;">
     {
         </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> ConnectorViewModel
         {
             Title </span>= <span style="color: #800000;">"</span><span style="color: #800000;">输入</span><span style="color: #800000;">"</span><span style="color: #000000;">
         }
     },
         Output </span>= <span style="color: #0000ff;">new</span> ObservableCollection&lt;ConnectorViewModel&gt;<span style="color: #000000;">
     {
         </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> ConnectorViewModel
         {
             Title </span>= <span style="color: #800000;">"</span><span style="color: #800000;">输出</span><span style="color: #800000;">"</span><span style="color: #000000;">
         }
     }
     };


     </span><span style="color: #0000ff;">var</span> nodify = <span style="color: #0000ff;">new</span><span style="color: #000000;"> NodeViewModel
     {
         Title </span>= <span style="color: #800000;">"</span><span style="color: #800000;">节点1</span><span style="color: #800000;">"</span><span style="color: #000000;">,
         Input </span>= <span style="color: #0000ff;">new</span> ObservableCollection&lt;ConnectorViewModel&gt;<span style="color: #000000;">
     {
         </span><span style="color: #0000ff;">new</span><span style="color: #000000;"> ConnectorViewModel
         {
             Title </span>= <span style="color: #800000;">"</span><span style="color: #800000;">输入</span><span style="color: #800000;">"</span><span style="color: #000000;">
         }
     }
     };
     Nodes.Add(welcome);
     Nodes.Add(nodify);


    
    
 }


 </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> Connect(ConnectorViewModel source, ConnectorViewModel target)
 {
     </span><span style="color: #0000ff;">var</span> newConnection = <span style="color: #0000ff;">new</span><span style="color: #000000;"> ConnectionViewModel(source, target);

     </span><span style="color: #008000;">//</span><span style="color: #008000;"> 检查是否已经存在相同的连接</span>
     <span style="color: #0000ff;">if</span> (!<span style="color: #000000;">Connections.Contains(newConnection))
     {
         Connections.Add(newConnection);
     }
 }

}

<nodify:NodifyEditor PendingConnection="{Binding PendingConnection}">
...
    <nodify:NodifyEditor.PendingConnectionTemplate>
        <DataTemplate DataType="{x:Type local:PendingConnectionViewModel}">
            <nodify:PendingConnection StartedCommand="{Binding StartCommand}"
                                      CompletedCommand="{Binding FinishCommand}"
                                      AllowOnlyConnectors="True" />
        </DataTemplate>
    </nodify:NodifyEditor.PendingConnectionTemplate>
...
</nodify:NodifyEditor>

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