- A+
所属分类：.NET技术
前置
连接概述
连接是由两个点之间创建的。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类 作为消息通知的基类
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])); } }
源码
github:zt199510/NodifySamples (github.com)
