前置

移除连接

要删除连接，只需监听来自连接器本身或编辑器的断开连接事件，并删除具有连接器作为源或目标的连接。为了简单起见，我们将为 NodifyEditor 实现 DisconnectConnectorCommand。首先让我们将其添加到 EditorViewModel。

public class EditorViewModel
{
    public ICommand DisconnectConnectorCommand { get; }

    ...

    public EditorViewModel()
    {
        DisconnectConnectorCommand = new DelegateCommand<ConnectorViewModel>(connector =>
        {
            var connection = Connections.First(x => x.Source == connector || x.Target == connector);
            connection.Source.IsConnected = false;  将连接器属性设为false
            connection.Target.IsConnected = false;
            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; }

     private Point _location;
     public Point Location
     {
         get => _location;
         set => Set(ref _location, value);
     }
     public ObservableCollection<ConnectorViewModel> Input { get; set; } = new ObservableCollection<ConnectorViewModel>();
     public ObservableCollection<ConnectorViewModel> Output { get; set; } = new ObservableCollection<ConnectorViewModel>();
 }

Xaml

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

    <nodify:NodifyEditor.ItemContainerStyle>
        <Style TargetType="{x:Type nodify:ItemContainer}">
            <Setter Property="Location" 
                    Value="{Binding Location}" />
        </Style>
    </nodify:NodifyEditor.ItemContainerStyle>

    ...

</nodify:NodifyEditor>

现在你可以在构造节点时设置它们的位置。

源码

github：zt199510/NodifySamples (github.com)