Nodify项目入门指南：构建可视化节点编辑器-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00903/article/details/148972110

Nodify项目入门指南：构建可视化节点编辑器

nodify Highly performant and modular controls for node-based editors designed for data-binding and MVVM. 项目地址: https://gitcode.com/gh_mirrors/no/nodify

核心概念与架构解析

Nodify是一个功能强大的WPF节点编辑器框架，它采用了分层架构设计，使得开发者能够轻松构建复杂的可视化编程界面。理解其核心架构是掌握该框架的关键。

组件层级关系

Nodify的视觉树由三个主要层次构成：

节点层(ItemsSource)：这是最上层，包含所有可交互的节点元素。每个控件都被包装在ItemContainer中，使其具备选择、拖动等交互能力。
连接层(Connections)：位于中间层，负责渲染节点之间的连接线，默认情况下会显示在节点层下方。
装饰层(Decorators)：最底层，为每个控件提供在图表中的定位信息。

这种分层设计不仅实现了视觉元素的分离渲染，还支持异步加载各层内容，大大提升了大型图表的性能表现。

快速开始指南

主题配置

Nodify提供了多种预设主题，只需在App.xaml中合并相应资源字典即可：

<!-- 深色主题(默认) -->
<ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/Dark.xaml" />

<!-- 浅色主题 -->
<ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/Light.xaml" />

<!-- Nodify专用主题 -->
<ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/Nodify.xaml" />

基础编辑器创建

首先引入命名空间并创建编辑器实例：

<nodify:NodifyEditor />

这将在应用中创建一个空白编辑器区域，您可以通过拖动来创建选择矩形。

节点系统实现

创建节点视图模型

节点系统的基础是ViewModel层，我们首先定义节点和连接器的数据结构：

public class NodeViewModel : INotifyPropertyChanged
{
    public string Title { get; set; }
    public Point Location { get; set; }
    
    public ObservableCollection<ConnectorViewModel> Input { get; } 
        = new ObservableCollection<ConnectorViewModel>();
    public ObservableCollection<ConnectorViewModel> Output { get; } 
        = new ObservableCollection<ConnectorViewModel>();
    
    // 实现INotifyPropertyChanged接口...
}

public class ConnectorViewModel : INotifyPropertyChanged
{
    public string Title { get; set; }
    public Point Anchor { get; set; }
    public bool IsConnected { get; set; }
    
    // 实现INotifyPropertyChanged接口...
}

绑定节点视图

在XAML中，我们通过数据模板定义节点的可视化呈现：

<nodify:NodifyEditor ItemsSource="{Binding Nodes}">
    <nodify:NodifyEditor.ItemTemplate>
        <DataTemplate DataType="{x:Type local:NodeViewModel}">
            <nodify:Node Header="{Binding Title}"
                         Input="{Binding Input}"
                         Output="{Binding Output}">
                <!-- 输入连接器模板 -->
                <nodify:Node.InputConnectorTemplate>
                    <DataTemplate>
                        <nodify:NodeInput Header="{Binding Title}"
                                         IsConnected="{Binding IsConnected}"
                                         Anchor="{Binding Anchor, Mode=OneWayToSource}"/>
                    </DataTemplate>
                </nodify:Node.InputConnectorTemplate>
                
                <!-- 输出连接器模板 -->
                <nodify:Node.OutputConnectorTemplate>
                    <DataTemplate>
                        <nodify:NodeOutput Header="{Binding Title}"
                                          IsConnected="{Binding IsConnected}"
                                          Anchor="{Binding Anchor, Mode=OneWayToSource}"/>
                    </DataTemplate>
                </nodify:Node.OutputConnectorTemplate>
            </nodify:Node>
        </DataTemplate>
    </nodify:NodifyEditor.ItemTemplate>
</nodify:NodifyEditor>

连接系统实现

连接视图模型

连接系统需要管理节点间的关联关系：

public class ConnectionViewModel
{
    public ConnectionViewModel(ConnectorViewModel source, ConnectorViewModel target)
    {
        Source = source;
        Target = target;
        Source.IsConnected = true;
        Target.IsConnected = true;
    }
    
    public ConnectorViewModel Source { get; }
    public ConnectorViewModel Target { get; }
}

public class EditorViewModel
{
    public ObservableCollection<ConnectionViewModel> Connections { get; }
        = new ObservableCollection<ConnectionViewModel>();
    
    // 其他代码...
}

连接可视化绑定

在XAML中定义连接线的呈现方式：

<nodify:NodifyEditor Connections="{Binding Connections}">
    <nodify:NodifyEditor.ConnectionTemplate>
        <DataTemplate DataType="{x:Type local:ConnectionViewModel}">
            <nodify:LineConnection Source="{Binding Source.Anchor}"
                                  Target="{Binding Target.Anchor}"/>
        </DataTemplate>
    </nodify:NodifyEditor.ConnectionTemplate>
</nodify:NodifyEditor>

实现连接交互

通过PendingConnection实现拖拽创建连接的功能：

public class PendingConnectionViewModel
{
    public ICommand StartCommand { get; }
    public ICommand FinishCommand { get; }
    
    public PendingConnectionViewModel(EditorViewModel editor)
    {
        StartCommand = new DelegateCommand<ConnectorViewModel>(source => _source = source);
        FinishCommand = new DelegateCommand<ConnectorViewModel>(target => 
        {
            if(target != null) 
                editor.Connect(_source, target);
        });
    }
    
    private ConnectorViewModel _source;
}

XAML绑定：

<nodify:NodifyEditor PendingConnection="{Binding PendingConnection}">
    <nodify:NodifyEditor.PendingConnectionTemplate>
        <DataTemplate>
            <nodify:PendingConnection StartedCommand="{Binding StartCommand}"
                                    CompletedCommand="{Binding FinishCommand}"
                                    AllowOnlyConnectors="True"/>
        </DataTemplate>
    </nodify:NodifyEditor.PendingConnectionTemplate>
</nodify:NodifyEditor>

高级功能实现

节点位置控制

通过绑定Location属性实现节点定位：

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

网格背景

为编辑器添加网格背景可增强用户体验：

<nodify:NodifyEditor.Background>
    <DrawingBrush ViewportUnits="Absolute" TileMode="Tile">
        <DrawingBrush.Drawing>
            <GeometryDrawing>
                <GeometryDrawing.Geometry>
                    <RectangleGeometry Rect="0,0,20,20"/>
                </GeometryDrawing.Geometry>
                <GeometryDrawing.Pen>
                    <Pen Brush="#333" Thickness="0.5"/>
                </GeometryDrawing.Pen>
            </GeometryDrawing>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</nodify:NodifyEditor.Background>