Nodify学习 四：预先连接
前置预先连接
可以从连接器创建预先连接，并可以放置在ItemContainer或Connector上（如果AllowOnlyConnectors为false）。
预先连接的Content可以使用ContentTemplate进行自定义。如果EnablePreview为true，PreviewTarget将更新为鼠标光标下的连接器或项目容器，或者为null（如果没有这样的元素）
预先连接的可见性可以使用IsVisible依赖属性进行控制。
连接器的连接捕捉可以使用EnableSnapping依赖属性启用。
Source和Target属性是连接器的数据上下文，预先连接完成时Target将更新。
还有一个StartedCommand，参数是Source，以及一个CompletedCommand，参数是Target。
提示：取消预先连接的方法是释放右键。
预先连接从一个 Source 开始，当放置到一个 Target 上时将完成。源始终是一个连接器，目标可以是一个连接器、一个项目容器或 null。我们现在只关心其他连接器。当连接开始时，执行 StartedCommand，该命令接收 Source 作为参数。当连接完成时，执行 CompletedCommand，该命令接收 Target 作为参数。
操作
首先我们需要创建预先连接的视图模型类，并将其添加到 EditorViewModel 中。
public class PendingConnectionViewModel : ObservableObject
{
private readonly EditorViewModel _editor;
private ConnectorViewModel _source;
public PendingConnectionViewModel(EditorViewModel editor)
{
_editor = editor;
StartCommand = new DelegateCommand<ConnectorViewModel>(source => _source = source);
FinishCommand = new DelegateCommand<ConnectorViewModel>(target =>
{
if (target != null)
_editor.Connect(_source, target);
});
}
public ICommand StartCommand { get; }
public ICommand FinishCommand { get; }
} public class EditorViewModel
{
public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();
public ObservableCollection<ConnectionViewModel> Connections { get; } = new ObservableCollection<ConnectionViewModel>();
public PendingConnectionViewModel PendingConnection { get; }
public EditorViewModel()
{
PendingConnection= new PendingConnectionViewModel(this);
var welcome = new NodeViewModel
{
Title = "我的第一个节点",
Input = new ObservableCollection<ConnectorViewModel>
{
new ConnectorViewModel
{
Title = "输入"
}
},
Output = new ObservableCollection<ConnectorViewModel>
{
new ConnectorViewModel
{
Title = "输出"
}
}
};
var nodify = new NodeViewModel
{
Title = "节点1",
Input = new ObservableCollection<ConnectorViewModel>
{
new ConnectorViewModel
{
Title = "输入"
}
}
};
Nodes.Add(welcome);
Nodes.Add(nodify);
}
public void Connect(ConnectorViewModel source, ConnectorViewModel target)
{
var newConnection = new ConnectionViewModel(source, target);
// 检查是否已经存在相同的连接
if (!Connections.Contains(newConnection))
{
Connections.Add(newConnection);
}
}
}
<nodify:NodifyEditor PendingConnection="{Binding PendingConnection}">
...
<nodify:NodifyEditor.PendingConnectionTemplate>
<DataTemplate DataType="{x:Type local:PendingConnectionViewModel}">
<nodify:PendingConnection StartedCommand="{Binding StartCommand}"
CompletedCommand="{Binding FinishCommand}"
AllowOnlyConnectors="True" />
</DataTemplate>
</nodify:NodifyEditor.PendingConnectionTemplate>
...
</nodify:NodifyEditor> 这就是创建连接的全部内容。现在你应该可以在连接器之间创建连接了。
代码地址
Github（NodifySamples4）：zt199510/NodifySamples (github.com)
来源:https://www.cnblogs.com/zt199510/p/18315373
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]