Nodify学习 三:连接器

  • Nodify学习 三:连接器已关闭评论
  • 47 次浏览
  • A+
所属分类:.NET技术
摘要

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


前置

连接概述

连接是由两个点之间创建的。SourceTarget依赖属性是Point类型,通常绑定到连接器的Anchor点。

基本连接

库中所有连接的基类是BaseConnection,它派生自Shape。在创建自定义连接时,可以不受任何限值地从BaseConnection派生。

它公开了两个命令及其对应的事件:

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

Nodify 控件支持 Input 和 Output 连接器,您可以通过重写 InputConnectorTemplate 和 OutputConnectorTemplate 的默认模板来自定义这些连接器

Direction 的连接可以有两个值:

  • Forward

Nodify学习 三:连接器Nodify学习 三:连接器

 

  • Backward

Nodify学习 三:连接器Nodify学习 三:连接器

 

和 SourceOffset 与 TargetOffset 锚点一起工作 OffsetMode ,并将与锚点保持距离:

连接也有一个 Spacing ,它将使连接在距 Source 和 Target 点一定距离处断开角度:

  • With spacing: 带间距:

Nodify学习 三:连接器

 

  • Without spacing: 无间距:

Nodify学习 三:连接器

 设置为 ArrowSize “0,0”将删除箭头。

连接样式

Nodify 自带3个连接器样式

  • Line connection 直线连接

  • Circuit connection 电路连接

  • Connection 贝塞尔曲线连接

Line connection 直线连接

从 Source 到 Target 的直线。

Nodify学习 三:连接器

Circuit connection 电路连接

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

Nodify学习 三:连接器

 

Connection 贝塞尔曲线连接

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

Nodify学习 三:连接器

 

操作

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

public class NotifyPropertyBase : INotifyPropertyChanged 
{
public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged([CallerMemberName] string propName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName)); } public void Set<T>(ref T field, T value, Action action = null, [CallerMemberName] string propName = "") { if (EqualityComparer<T>.Default.Equals(field, value)) return; field = value; RaisePropertyChanged(propName); action?.Invoke(); } }

 

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

 

public class ConnectionViewModel {     public ConnectionViewModel(ConnectorViewModel source, ConnectorViewModel target)     {         Source = source;         Target = target;          Source.IsConnected = true;         Target.IsConnected = true;     }      public ConnectorViewModel Source { get; }     public ConnectorViewModel Target { get; } }

在EditorViewModel 类添加

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

调整ConnectorViewModel的属性

    public class ConnectorViewModel: NotifyPropertyBase     {         public string Title { get; set; }          private Point _anchor;         public Point Anchor         {             get => _anchor;             set => Set(ref _anchor, value);         }          private bool _isConnected;         public bool IsConnected         {             get => _isConnected;             set => Set(ref _isConnected, value);         }     }

在编辑器添加连接器样式

  <nodify:NodifyEditor       x:Name="Editor"       Background="{StaticResource GridDrawingBrush}"       Connections="{Binding Connections}"       ItemsSource="{Binding Nodes}">       <nodify:NodifyEditor.DataContext>           <vm:EditorViewModel />       </nodify:NodifyEditor.DataContext>       <nodify:NodifyEditor.ItemTemplate>           <DataTemplate DataType="{x:Type mod:NodeViewModel}">               <nodify:Node                   Header="{Binding Title}"                   Input="{Binding Input}"                   Output="{Binding Output}">                   <nodify:Node.InputConnectorTemplate>                       <DataTemplate DataType="{x:Type mod:ConnectorViewModel}">                           <nodify:NodeInput                               Anchor="{Binding Anchor, Mode=OneWayToSource}"                               Header="{Binding Title}"                               IsConnected="{Binding IsConnected}" />                       </DataTemplate>                   </nodify:Node.InputConnectorTemplate>                    <nodify:Node.OutputConnectorTemplate>                       <DataTemplate DataType="{x:Type mod:ConnectorViewModel}">                           <nodify:NodeOutput                               Anchor="{Binding Anchor, Mode=OneWayToSource}"                               Header="{Binding Title}"                               IsConnected="{Binding IsConnected}" />                       </DataTemplate>                   </nodify:Node.OutputConnectorTemplate>               </nodify:Node>           </DataTemplate>       </nodify:NodifyEditor.ItemTemplate>        <nodify:NodifyEditor.ConnectionTemplate>           <DataTemplate DataType="{x:Type mod:ConnectionViewModel}">               <nodify:Connection                   Source="{Binding Source.Anchor}"                   SourceOffsetMode="Rectangle"                   Target="{Binding Target.Anchor}"                   TargetOffsetMode="Rectangle" />           </DataTemplate>       </nodify:NodifyEditor.ConnectionTemplate>   </nodify:NodifyEditor>

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

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

 

Nodify学习 三:连接器

源码

github:zt199510/NodifySamples (github.com)