前置

預先連接

可以從連接器創建預先連接，並可以放置在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;

    public PendingConnectionViewModel(EditorViewModel editor)
    {
        _editor = editor;
        StartCommand = new DelegateCommand<ConnectorViewModel>(source => _source = source);
        FinishCommand = new DelegateCommand<ConnectorViewModel>(target =>
        {
            if (target != null)
                _editor.Connect(_source, target);
        });
    }

    public ICommand StartCommand { get; }
    public ICommand FinishCommand { get; }
}

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


     public PendingConnectionViewModel PendingConnection { get; }
     public EditorViewModel()
     {


         PendingConnection  = new PendingConnectionViewModel(this);
         var welcome = new NodeViewModel
         {
             Title = "我的第一個節點",
             Input = new ObservableCollection<ConnectorViewModel>
         {
             new ConnectorViewModel
             {
                 Title = "輸入"
             }
         },
             Output = new ObservableCollection<ConnectorViewModel>
         {
             new ConnectorViewModel
             {
                 Title = "輸出"
             }
         }
         };
    

         var nodify = new NodeViewModel
         {
             Title = "節點1",
             Input = new ObservableCollection<ConnectorViewModel>
         {
             new ConnectorViewModel
             {
                 Title = "輸入"
             }
         }
         };
         Nodes.Add(welcome);
         Nodes.Add(nodify);


        
        
     }


     public void Connect(ConnectorViewModel source, ConnectorViewModel target)
     {
         var newConnection = new ConnectionViewModel(source, target);

         // 檢查是否已經存在相同的連接
         if (!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>

 這就是創建連接的全部內容。現在你應該可以在連接器之間創建連接了。

代碼地址

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