NodeStudio.Controls 0.4.5

NodeStudio.Controls

NodeStudio 节点图编辑器控件库（WPF，.NET 8）——画布、工具箱、属性面板与深色主题

基于 Nodify 的完整节点编辑器界面控件，配合核心库 NodeStudio 使用：提供节点画布（拖拽/连线/框选/多选删除/复制粘贴）、工具箱（Expander 工具组 + 节点图标拖放）、右侧属性面板（节点操作控件）、块内部子图编辑器、深色样式库与统一弹窗/菜单。

功能

• 节点画布：拖拽创建、拉线连接、选中节点相关连线高亮（#ffa500）、多选/框选、复制粘贴（含块内部节点与连线）、重命名、删除
• 运行控制：全局运行/暂停/连续运行；运行中画布只读保护；左下角显示图运行结果（外层/块内部按层级切换，耗时保留 3 位小数）
• 块内部编辑器：双击节点块进入子图，面包屑导航返回；循环参数编辑；块输入/块输出虚拟节点右键增删/重命名端口（类型可选，含自定义类型）
• 属性面板：选中节点显示其操作控件（NodeBaseControl 子类，XAML 自定义）；内置条件/计算/延时/信号节点均带深色操作界面
• 跨块/跨图同步：发送信号/等待信号节点 + 全局信号存储——并行块中途汇合、多图共享状态；等待信号信号名下拉候选自动包含所有层级发送节点
• 深色风格：统一深色主题 + Styles.xaml 可复用样式库——覆盖按钮/输入框/复选框/单选/开关/滑块/进度条/列表/标签页/滚动条/表格/分组框/展开器/提示/菜单等常用控件，附 24 个内置配色资源（详见下文「内置深色样式」）
• 序列化接入：文件菜单导出/导入 JSON 图（经核心库 GraphSerializer）

快速开始

dotnet add package NodeStudio.Controls

项目需 net8.0-windows（或更高 windows TFM）并启用 WPF：

<PropertyGroup>
  <TargetFramework>net8.0-windows</TargetFramework>
  <UseWPF>true</UseWPF>
</PropertyGroup>

<Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="pack://application:,,,/NodeStudio.Controls;component/Views/Styles.xaml"/>
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Application.Resources>

// 编辑器 ViewModel + 节点块
var editor = new EditorViewModel();
var block = new NodeBlockViewModel("计算块");
block.AddInput<int>("数值A").AddOutput<int>("结果");
editor.AddNode(block);

工具箱

左侧工具箱（ToolboxControl，绑定 NodeToolbox）以 Expander 工具组展示节点分类，每组标题条显示组名与节点数，可折叠：

• 节点条目 = 图标 + 名称：图标取自 [Node(Icon = "\uE8EF")]（Segoe MDL2 Assets 码点，浅蓝色）；未指定时自动使用通用默认图标
• 全局默认图标：可修改 ToolboxItem.DefaultIcon = "\uXXXX"（在扫描工具箱前设置），对所有未配图标的节点生效
• 拖拽创建：按住节点条目拖到画布即可生成节点（ToolboxItem 拖放协议）
• 深色风格：标题条 DarkHeaderBackground、悬停 DarkListHover，与整套样式一致

内置深色样式

合并 Styles.xaml 后即可使用（App.xaml 合并方式见上）。所有样式为显式 Key 样式，通过 StaticResource 引用；滚动条为隐式样式（全局自动生效，无需引用）。

控件样式（Views/Styles.xaml）

内置配色（SolidColorBrush 资源，可直接引用）

<Border Background="{StaticResource DarkAccent}"/>
<TextBlock Foreground="{StaticResource DarkTextPrimary}"/>

底色：DarkWindowBackground / DarkPanelBackground / DarkHeaderBackground / DarkInputBackground 边框：DarkBorder / DarkBorderStrong / DarkBorderHover / DarkGridLine 强调：DarkAccent / DarkAccentHover / DarkAccentPressed / DarkAccentLight / DarkTextAccent 文字：DarkTextPrimary / DarkTextSecondary / DarkTextMuted / DarkTextOnAccent 危险：DarkDanger / DarkDangerPressed 状态：DarkRowHover / DarkListHover / DarkAlternatingRow / DarkScrollThumb / DarkScrollThumbHover

表格使用要点

• 单元格文本居中：DarkDataGridCellStyle 已设 Horizontal/VerticalContentAlignment=Center；文本对齐还需在列的 ElementStyle 中设 TextAlignment=Center
• 列级只读：<DataGridTextColumn IsReadOnly="True">（数据类属性需带 setter 才能编辑）
• 编辑框深色：列上加 EditingElementStyle="{StaticResource DarkDataGridEditingTextBoxStyle}"

自定义节点界面

节点被选中时在右侧属性面板显示的操作控件，继承 NodeBaseControl 并用 XAML 搭建：

<ctrl:NodeBaseControl x:Class="MyApp.MyNodeControl"
                      xmlns:ctrl="clr-namespace:NodeStudio.Controls.Views;assembly=NodeStudio.Controls">
    <TextBox Text="{Binding Value, UpdateSourceTrigger=PropertyChanged}"
             Style="{StaticResource DialogTextBoxStyle}"/>
</ctrl:NodeBaseControl>

public class MyNodeControl : NodeBaseControl
{
    public MyNodeControl(MyNodeViewModel vm) : base(vm) => InitializeComponent();
}

// ViewModel 中：
public override Control GetControl() => new MyNodeControl(this);

注册自定义 ViewModel 工厂，导入图时恢复操作控件：

NodeViewModelFactory.RegisterVmFactory<MyNode>(node => new MyNodeViewModel((MyNode)node));

依赖

• NodeStudio (>= 0.4.0)
• Nodify 7.3.0
• CommunityToolkit.Mvvm 8.4.2
• Microsoft.Xaml.Behaviors.Wpf 1.1.142

许可证

MIT