Nodify學習 一：介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com)

Nodify學習 二：添加節點 - 可樂_加冰 - 博客園 (cnblogs.com)

添加節點（nodes）

通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點

添加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" });
    }
}

添加視圖模型

 視圖模型可以是任何形狀，但節點的視圖由 ItemTemplate 生成。（將 DataTemplate 放在 NodifyEditor.Resources 中也能實現相同的效果）

  <window
      ....
     xmlns:vm="clr-namespace:NodifySamples2.ViewModels"
      .....
>
<nodify:NodifyEditor
           x:Name="Editor"
           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}" />
                                   </DataTemplate>
     </nodify:NodifyEditor.ItemTemplate>
</nodify:NodifyEditor>

效果圖

添加連接節點

連接節點用於管理節點之間的連接，和繪製對應的連接線

首先，我們需要一個連接器的表示以及節點上一些集合來存儲我們的連接器。

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>

效果

下載地址

Github:zt199510/NodifySamples (github.com)