引言

如果你尝试过前几节的代码，会发现节点都是出现在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:NodifyEditorName="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:NodeHeader="{Binding Title}"Input="{Binding Input}"Output="{Binding Output}"><nodify:Node.InputConnectorTemplate><DataTemplate DataType="{x:Type mod:ConnectorViewModel}"><nodify:NodeInputAnchor="{Binding Anchor, Mode=OneWayToSource}"Header="{Binding Title}"IsConnected="{Binding IsConnected}" /></DataTemplate></nodify:Node.InputConnectorTemplate><nodify:Node.OutputConnectorTemplate><DataTemplate DataType="{x:Type mod:ConnectorViewModel}"><nodify:NodeInputAnchor="{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:PendingConnectionAllowOnlyConnectors="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]));