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类 作为消息通知的基类
public class NotifyPropertyBase : INotifyPropertyChanged <br>{
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged( string propName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
}
public void Set<T>(ref T field, T value, Action action = null, 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连接样式<br>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, nodify.Input)); }}
源码
github:zt199510/NodifySamples (github.com)
来源:https://www.cnblogs.com/zt199510/p/18310735
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]