第五节：Nodify 节点位置设置

引言

如果你尝试过前几节的代码，会发现节点都是出现在0,0 位置，及编辑器左上角。编辑器作为最外层的交互控件，内部封装了节点容器ItemContrainer，我们通过样式属性对Loaction做绑定。本节将介绍如何配置节点位置。

1、节点位置

需要在节点类中增加System.Windows.Point类型 位置属性

public partial class NodeViewModel : ObservableObject
{
    public string Title { get; set; }
    //节点位置
    [ObservableProperty]
    Point _location;
    public ObservableCollection<ConnectorViewModel> Input { get; set; } =
        new ObservableCollection<ConnectorViewModel>();
    public ObservableCollection<ConnectorViewModel> Output { get; set; } =
        new ObservableCollection<ConnectorViewModel>();
}

2、位置绑定

在编辑器中绑定节点位置属性

<nodify:NodifyEditor.ItemContainerStyle>
    <Style TargetType="{x:Type nodify:ItemContainer}">
        <Setter Property="Location" Value="{Binding Location}" />
    </Style>
</nodify:NodifyEditor.ItemContainerStyle>

完整xaml代码如下

 <Grid>
     <nodify:NodifyEditor
         Name="Editor"
         Connections="{Binding Connections}"
         ItemsSource="{Binding Nodes}"
         PendingConnection="{Binding PendingConnection}">
         <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:NodeInput
                                 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 vm:ConnectionViewModel}">
                 <nodify:StepConnection Source="{Binding Source.Anchor}" Target="{Binding Target.Anchor}" />
             </DataTemplate>
         </nodify:NodifyEditor.ConnectionTemplate>
         <nodify:NodifyEditor.PendingConnectionTemplate>
             <DataTemplate DataType="{x:Type vm:PendingConnectionViewModel}">
                 <nodify:PendingConnection
                     AllowOnlyConnectors="True"
                     CompletedCommand="{Binding FinishCommand}"
                     StartedCommand="{Binding StartCommand}" />
             </DataTemplate>
         </nodify:NodifyEditor.PendingConnectionTemplate>
         <nodify:NodifyEditor.ItemContainerStyle>
             <Style TargetType="{x:Type nodify:ItemContainer}">
                 <Setter Property="Location" Value="{Binding Location}" />
             </Style>
         </nodify:NodifyEditor.ItemContainerStyle>
     </nodify:NodifyEditor>

 </Grid>

在编辑器构造中添加示例编辑器代码运行查看本节演示内容

 var welcome = new NodeViewModel()
 {
     Title = "我的第一个节点",
     Input = new ObservableCollection<ConnectorViewModel>
     {
         new ConnectorViewModel { Title = "输入" }
     },
     Output = new ObservableCollection<ConnectorViewModel>
     {
         new ConnectorViewModel { Title = "输出" }
     },
     Location = new Point(10, 10)
 };
 var node2 = new NodeViewModel()
 {
     Title = "我的第二个节点",
     Input = new ObservableCollection<ConnectorViewModel>
     {
         new ConnectorViewModel { Title = "输入" }
     },
     Output = new ObservableCollection<ConnectorViewModel>
     {
         new ConnectorViewModel { Title = "输出" }
     },
     Location = new Point(50, 100)
 };
 var nodify = new NodeViewModel
 {
     Title = "To Nodify",
     Input = new ObservableCollection<ConnectorViewModel>
     {
         new ConnectorViewModel { Title = "In" }
     },
     Location = new Point(200, 10)
 };
 Nodes.Add(welcome);
 Nodes.Add(node2);
 Nodes.Add(nodify);
 Connections.Add(new ConnectionViewModel(welcome.Output[0], nodify.Input[0]));