Nodify学习 三：连接器

灭世妖猫

前置

连接概述

连接是由两个点之间创建的。Source和Target依赖属性是Point类型，通常绑定到连接器的Anchor点。
基本连接

库中所有连接的基类是BaseConnection，它派生自Shape。在创建自定义连接时，可以不受任何限值地从BaseConnection派生。
它公开了两个命令及其对应的事件：

• DisconnectCommand 及 DisconnectEvent - 当按住ALT点击连接时触发
  
• SplitCommand 及 SplitEvent - 当双击连接时触发
  

Nodify 控件支持 Input 和 Output 连接器，您可以通过重写 InputConnectorTemplate 和 OutputConnectorTemplate 的默认模板来自定义这些连接器
Direction 的连接可以有两个值：

• Forward
  

 

• Backward
  

 
和 SourceOffset 与 TargetOffset 锚点一起工作 OffsetMode ，并将与锚点保持距离：
连接也有一个 Spacing ，它将使连接在距 Source 和 Target 点一定距离处断开角度：

• With spacing: 带间距：
  

 

• Without spacing: 无间距：
  

 设置为 ArrowSize “0,0”将删除箭头。
连接样式

Nodify 自带3个连接器样式

• Line connection 直线连接
  
• Circuit connection 电路连接
  
• Connection 贝塞尔曲线连接
  

Line connection 直线连接

从 Source 到 Target 的直线。

Circuit connection 电路连接

具有 Angle 依赖项属性，用于控制其中断位置。角度以度为单位。

 
Connection 贝塞尔曲线连接

和 Target 之间的 Source 贝塞尔曲线。

 
操作

我们先创建一个NotifyPropertyBase类 作为消息通知的基类 

1. public class NotifyPropertyBase : INotifyPropertyChanged <br>{
2.      
3.      public event PropertyChangedEventHandler PropertyChanged;
5.      public void RaisePropertyChanged([CallerMemberName] string propName = "")
6.      {
7.          PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
8.      }
10.      public void Set<T>(ref T field, T value, Action action = null, [CallerMemberName] string propName = "")
11.      {
12.          if (EqualityComparer<T>.Default.Equals(field, value))
13.              return;
15.          field = value;
16.          RaisePropertyChanged(propName);
17.          action?.Invoke();
18.      }
19. }

复制代码

 
然后我们创建连接器类ConnectionViewModel  管理连接源和目标源
 

1. public class ConnectionViewModel
2. {
3.     public ConnectionViewModel(ConnectorViewModel source, ConnectorViewModel target)
4.     {
5.         Source = source;
6.         Target = target;
8.         Source.IsConnected = true;
9.         Target.IsConnected = true;
10.     }
12.     public ConnectorViewModel Source { get; }
13.     public ConnectorViewModel Target { get; }
14. }

复制代码

在EditorViewModel 类添加

1. public ObservableCollection<ConnectionViewModel> Connections { get; } = new ObservableCollection<ConnectionViewModel>();

复制代码

调整ConnectorViewModel的属性

1.     public class ConnectorViewModel: NotifyPropertyBase
2.     {
3.         public string Title { get; set; }
5.         private Point _anchor;
6.         public Point Anchor
7.         {
8.             get => _anchor;
9.             set => Set(ref _anchor, value);
10.         }
12.         private bool _isConnected;
13.         public bool IsConnected
14.         {
15.             get => _isConnected;
16.             set => Set(ref _isConnected, value);
17.         }
18.     }

复制代码

在编辑器添加连接器样式

1.   <nodify:NodifyEditor
2.       x:Name="Editor"
3.       Background="{StaticResource GridDrawingBrush}"
4.       Connections="{Binding Connections}"
5.       ItemsSource="{Binding Nodes}">
6.       <nodify:NodifyEditor.DataContext>
7.           <vm:EditorViewModel />
8.       </nodify:NodifyEditor.DataContext>
9.       <nodify:NodifyEditor.ItemTemplate>
10.           <DataTemplate DataType="{x:Type mod:NodeViewModel}">
11.               <nodify:Node
12.                   Header="{Binding Title}"
13.                   Input="{Binding Input}"
14.                   Output="{Binding Output}">
15.                   <nodify:Node.InputConnectorTemplate>
16.                       <DataTemplate DataType="{x:Type mod:ConnectorViewModel}">
17.                           <nodify:NodeInput
18.                               Anchor="{Binding Anchor, Mode=OneWayToSource}"
19.                               Header="{Binding Title}"
20.                               IsConnected="{Binding IsConnected}" />
21.                       </DataTemplate>
22.                   </nodify:Node.InputConnectorTemplate>
24.                   <nodify:Node.OutputConnectorTemplate>
25.                       <DataTemplate DataType="{x:Type mod:ConnectorViewModel}">
26.                           <nodify:NodeOutput
27.                               Anchor="{Binding Anchor, Mode=OneWayToSource}"
28.                               Header="{Binding Title}"
29.                               IsConnected="{Binding IsConnected}" />
30.                       </DataTemplate>
31.                   </nodify:Node.OutputConnectorTemplate>
32.               </nodify:Node>
33.           </DataTemplate>
34.       </nodify:NodifyEditor.ItemTemplate>
36.       <nodify:NodifyEditor.ConnectionTemplate>
37.           <DataTemplate DataType="{x:Type mod:ConnectionViewModel}">
38.               <nodify:Connection
39.                   Source="{Binding Source.Anchor}"
40.                   SourceOffsetMode="Rectangle"
41.                   Target="{Binding Target.Anchor}"
42.                   TargetOffsetMode="Rectangle" />
43.           </DataTemplate>
44.       </nodify:NodifyEditor.ConnectionTemplate>
45.   </nodify:NodifyEditor>

复制代码

然后添加一个新的节点看看 连接效果 这里我用了的

1. Connection连接样式<br>

复制代码

1. public class EditorViewModel{    public ObservableCollection Nodes { get; } = new ObservableCollection();    public ObservableCollection<ConnectionViewModel> Connections { get; } = new ObservableCollection<ConnectionViewModel>();    public EditorViewModel()    {        var welcome = new NodeViewModel        {            Title = "我的第一个节点",            Input = new ObservableCollection        {            new ConnectorViewModel            {                Title = "输入"            }        },            Output = new ObservableCollection        {            new ConnectorViewModel            {                Title = "输出"            }        }        };           var nodify = new NodeViewModel        {            Title = "To Nodify",            Input = new ObservableCollection        {            new ConnectorViewModel            {                Title = "In"            }        }        };        Nodes.Add(welcome);        Nodes.Add(nodify);        Connections.Add(new ConnectionViewModel(welcome.Output[0], nodify.Input[0]));           }}

复制代码

 

源码

github:zt199510/NodifySamples (github.com)
 

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