前置

移除連接

要刪除連接，只需監聽來自連接器本身或編輯器的斷開連接事件，並刪除具有連接器作為源或目標的連接。為了簡單起見，我們將為 NodifyEditor 實現 DisconnectConnectorCommand。首先讓我們將其添加到 EditorViewModel。

public class EditorViewModel
{
    public ICommand DisconnectConnectorCommand { get; }
...

</span><span style="color: #0000ff;">public</span><span style="color: #000000;"> EditorViewModel()
{
    DisconnectConnectorCommand </span>= <span style="color: #0000ff;">new</span> DelegateCommand&lt;ConnectorViewModel&gt;(connector =&gt;<span style="color: #000000;">
    {
        </span><span style="color: #0000ff;">var</span> connection = Connections.First(x =&gt; x.Source == connector || x.Target ==<span style="color: #000000;"> connector);
        connection.Source.IsConnected </span>= <span style="color: #0000ff;">false</span>;  將連接器屬性設為false
        connection.Target.IsConnected = <span style="color: #0000ff;">false</span><span style="color: #000000;">;
        Connections.Remove(connection);
    });

    ...
}

}

Xaml

<nodify:NodifyEditor ItemsSource="{Binding Nodes}"
                     Connections="{Binding Connections}"
                     PendingConnection="{Binding PendingConnection}"
                     DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}">
  ...
</nodify:NodifyEditor>

控制節點位置

如你所見，節點總是在屏幕的左上角。這是因為它們在圖中的位置是 (0, 0)。讓我們來改變這一點！

在 中添加一個 屬性，類型為 ，並觸發 事件。NodeViewModelLocationSystem.Windows.PointPropertyChanged

 public class NodeViewModel : NotifyPropertyBase
 {
     public string Title { get; set; }
 </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> Point _location;
 </span><span style="color: #0000ff;">public</span><span style="color: #000000;"> Point Location
 {
     </span><span style="color: #0000ff;">get</span> =&gt;<span style="color: #000000;"> _location;
     </span><span style="color: #0000ff;">set</span> =&gt; Set(<span style="color: #0000ff;">ref</span><span style="color: #000000;"> _location, value);
 }
 </span><span style="color: #0000ff;">public</span> ObservableCollection&lt;ConnectorViewModel&gt; Input { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; } = <span style="color: #0000ff;">new</span> ObservableCollection&lt;ConnectorViewModel&gt;<span style="color: #000000;">();
 </span><span style="color: #0000ff;">public</span> ObservableCollection&lt;ConnectorViewModel&gt; Output { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; } = <span style="color: #0000ff;">new</span> ObservableCollection&lt;ConnectorViewModel&gt;<span style="color: #000000;">();

}

Xaml

<nodify:NodifyEditor ItemsSource="{Binding Nodes}"
                     Connections="{Binding Connections}"
                     PendingConnection="{Binding PendingConnection}">
&lt;nodify:NodifyEditor.ItemContainerStyle&gt;
    &lt;Style TargetType=<span style="color: #800000;">"</span><span style="color: #800000;">{x:Type nodify:ItemContainer}</span><span style="color: #800000;">"</span>&gt;
        &lt;Setter Property=<span style="color: #800000;">"</span><span style="color: #800000;">Location</span><span style="color: #800000;">"</span><span style="color: #000000;"> 
                Value</span>=<span style="color: #800000;">"</span><span style="color: #800000;">{Binding Location}</span><span style="color: #800000;">"</span> /&gt;
    &lt;/Style&gt;
&lt;/nodify:NodifyEditor.ItemContainerStyle&gt;<span style="color: #000000;">

...

</nodify:NodifyEditor>

現在你可以在構造節點時設置它們的位置。

源碼

github：zt199510/NodifySamples (github.com)