Nodify学习 二:添加节点

Nodify学习 一:介绍与使用 - 可乐_加冰 - 博客园 (cnblogs.com)

Nodify学习 二:添加节点 - 可乐_加冰 - 博客园 (cnblogs.com)

1|0添加节点(nodes)

通过上一篇我们已经创建好了编辑器实例现在我们为编辑器添加一个节点

1|1添加model和viewmodel并将它们绑定到视图

public class NodeViewModel { public string Title { get; set; } }
public class EditorViewModel { public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>(); public EditorViewModel() { Nodes.Add(new NodeViewModel { Title = "Welcome" }); } }

1|2添加视图模型

 视图模型可以是任何形状,但节点的视图由 ItemTemplate 生成。(将 DataTemplate 放在 NodifyEditor.Resources 中也能实现相同的效果)

1
2
3
4
5
  <window
      ....
     xmlns:vm="clr-namespace:NodifySamples2.ViewModels"
      .....
><br><nodify:NodifyEditor<br>           x:Name="Editor"<br>           ItemsSource="{Binding Nodes}"><br>                         <nodify:NodifyEditor.DataContext><br>                                <vm:EditorViewModel /><br>                       </nodify:NodifyEditor.DataContext><br>                              <nodify:NodifyEditor.ItemTemplate><br>                                   <DataTemplate DataType="{x:Type mod:NodeViewModel}"><br>                                      <nodify:Node Header="{Binding Title}" /><br>                                   </DataTemplate><br>     </nodify:NodifyEditor.ItemTemplate><br></nodify:NodifyEditor>

 

1|3效果图

 

1|4添加连接节点

连接节点用于管理节点之间的连接,和绘制对应的连接线

首先,我们需要一个连接器的表示以及节点上一些集合来存储我们的连接器。

public class ConnectorViewModel { public string Title { get; set; } }
public class NodeViewModel { public string Title { get; set; } public ObservableCollection<ConnectorViewModel> Input { get; set; } = new ObservableCollection<ConnectorViewModel>(); public ObservableCollection<ConnectorViewModel> Output { get; set; } = new ObservableCollection<ConnectorViewModel>(); }
public class EditorViewModel { public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>(); public EditorViewModel() { Nodes.Add(new NodeViewModel { Title = "Welcome", Input = new ObservableCollection<ConnectorViewModel> { new ConnectorViewModel { Title = "输入" } }, Output = new ObservableCollection<ConnectorViewModel> { new ConnectorViewModel { Title = "输出" } } }); } }

 然后将它们绑定到视图。(我们使用了内置的 NodeInput 和 NodeOutput 作为视图,但也有其他连接器。或者根据需要创建自己的连接器。)

<nodify:NodifyEditor x:Name="Editor" Background="{StaticResource GridDrawingBrush}" 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 Header="{Binding Title}" /> </DataTemplate> </nodify:Node.InputConnectorTemplate> <nodify:Node.OutputConnectorTemplate> <DataTemplate DataType="{x:Type mod:ConnectorViewModel}"> <nodify:NodeOutput Header="{Binding Title}" /> </DataTemplate> </nodify:Node.OutputConnectorTemplate> </nodify:Node> </DataTemplate> </nodify:NodifyEditor.ItemTemplate> </nodify:NodifyEditor>

1|5效果

 

1|6下载地址

Github:zt199510/NodifySamples (github.com)

 


__EOF__

本文作者可乐加冰
本文链接https://www.cnblogs.com/zt199510/p/18308687.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   可乐_加冰  阅读(574)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
点击右上角即可分享
微信分享提示