syncfusion-wpf-syntax-editor

实现语法编辑器

Syncfusion® WPF 语法编辑器（EditControl）的实现指南——一款高级代码和文本编辑器控件，可用于创建类似 IDE 的编辑体验，支持语法高亮、IntelliSense、查找/替换，以及面向多种编程语言的全面编辑功能。

何时使用此技能

在需要以下功能时使用此技能：

• 创建代码编辑器，支持 C#、VB、XAML、XML 和自定义语言的语法高亮
• 构建类似 IDE 的应用程序，提供高级文本编辑功能
• 实现 IntelliSense，支持自动补全和代码建议
• 在应用程序中添加文本编辑器，支持查找/替换、行号和代码折叠
• 支持多种文件格式，实现语法感知编辑
• 创建自定义语言编辑器，使用用户定义的语法规则
• 实现高级编辑功能，例如拖放、撤销/重做和打印
• 构建源代码查看器或开发工具编辑器
• 创建日志文件查看器，支持语法高亮
• 实现配置文件编辑器，支持验证

此技能涵盖语法编辑器的完整实现，包括基本设置、语言配置、编辑功能、自定义和高级场景。

组件概览

语法编辑器（EditControl）是一款高性能文本和代码编辑器控件，提供：

• 语法高亮 - 内置支持 C#、VB.NET、XAML、XML 和自定义语言
• IntelliSense - 自动补全、参数信息和代码建议
• 文件操作 - 打开、保存、新建文件并支持编码
• 高级编辑 - 多级撤销/重做、剪贴板操作、拖放
• 查找和替换 - 支持正则表达式、区分大小写和全字匹配的搜索
• 文本导航 - 转到行、书签、滚动同步
• 行号 - 显示行号并可自定义外观
• 代码折叠 - 展开/折叠代码块
• 上下文菜单 - 完全可自定义，并内置命令
• 状态栏 - 行/列位置、插入/覆盖模式
• 打印 - 打印预览和格式化输出
• 自定义 - 字体、颜色、背景、边距
• 只读模式 - 受保护的只读查看模式
• 单行模式 - 用作增强型 TextBox
• 自定义语言 - 定义自己的语法规则

控件结构

EditControl
├── Editor Area - Main text editing surface
│   ├── Line Numbers (optional)
│   ├── Folding Indicators (optional)
│   └── Text Content with Syntax Highlighting
├── Context Menu - Right-click operations
├── Status Bar (optional) - Position and mode info
└── IntelliSense Popup - Auto-completion suggestions

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 程序集部署和依赖项
• 通过设计器、XAML 和 C# 添加 EditControl
• 将文件加载到编辑器
• 基本配置
• 第一个代码编辑器示例

📄 阅读： references/overview.md

• 组件介绍
• 主要功能概览
• 实际应用场景
• 架构和设计
• 性能注意事项

📄 阅读： references/file-operations.md

• 打开文件（Stream、文件路径）
• 使用编码保存文件
• 创建新文档
• 文件类型检测
• 编码支持（UTF-8、ASCII、Unicode）
• 最近使用文件管理

语法和语言支持

📄 阅读： references/syntax-highlighting.md

• 启用语法高亮
• 内置语言支持
• 配置特定语言的设置
• 自定义语法高亮
• 配色方案和主题
• 基于令牌的高亮

📄 阅读： references/supported-languages.md

• C# 语言支持
• Visual Basic 支持
• XAML 语言支持
• XML 语言支持
• SQL 语言支持
• 运行时切换语言

📄 阅读： references/custom-language-support.md

• 创建自定义语言配置
• 语言基类（LanguageBase、ProceduralLanguageBase、MarkupLanguageBase）
• 定义词法状态
• 令牌定义和模式
• 自定义语法规则
• 语言继承

📄 阅读： references/intellisense.md

• 启用 IntelliSense 功能
• 自动完成列表
• 参数信息工具提示
• 自定义 IntelliSense 数据源
• 以编程方式触发 IntelliSense
• 自定义 IntelliSense 外观

编辑功能

📄 阅读： references/editing-text.md

• 基本文本编辑操作
• 以编程方式操作文本
• 插入和删除文本
• 文档导航
• 文本属性和方法
• 基于行的操作

📄 阅读： references/edit-commands.md

• 内置编辑命令
• 撤销/重做操作
• 剪贴板操作（剪切、复制、粘贴）
• 全选、删除
• RoutedUICommands 的用法
• 自定义命令实现
• 命令绑定

📄 阅读： references/selection.md

• 文本选择方法
• 选择属性（SelectedText、SelectionStart、SelectionLength）
• 以编程方式选择
• 自定义选择外观
• 多行选择处理

📄 阅读： references/find-and-replace.md

• 查找文本功能
• 替换操作
• 查找和替换对话框
• 搜索选项（区分大小写、全字匹配、正则表达式）
• 编程式搜索 API
• 搜索结果导航

📄 阅读： references/text-navigation.md

• 转到指定行功能
• 滚动到指定位置
• 书签支持
• 键盘导航
• 行和列位置跟踪
• 视口管理

UI 功能

📄 阅读： references/line-numbers.md

• 启用行号
• 自定义行号外观
• 行号边距宽度
• 行高亮
• 当前行指示器

📄 阅读： references/expand-collapse.md

• 代码折叠区域
• 展开/折叠功能
• 大纲配置
• 自定义折叠规则
• 自定义折叠指示器外观
• 以编程方式展开/折叠

📄 阅读： references/context-menu.md

• 默认上下文菜单
• 自定义上下文菜单
• 添加自定义菜单项
• 菜单命令绑定
• 禁用上下文菜单

📄 阅读： references/status-bar.md

• 启用状态栏
• 显示行和列位置
• 插入/覆盖模式指示器
• 自定义状态栏内容
• 状态栏外观

自定义和高级功能

📄 阅读： references/customization.md

• 自定义字体和颜色
• 自定义背景
• 自定义行背景
• 边距和内边距设置
• 光标外观
• 自定义滚动条
• 视觉样式和主题

📄 阅读： references/advanced-features.md

• 拖放文本编辑
• 只读模式
• 单行模式（增强型 TextBox）
• 打印和打印预览
• 分屏视图支持
• 性能优化
• 内存管理

快速入门示例

基本代码编辑器设置

<Window x:Class="CodeEditorApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        
        <ToolBar Grid.Row="0">
            <Button Content="Open" Click="OpenFile_Click"/>
            <Button Content="Save" Click="SaveFile_Click"/>
            <Separator/>
            <ComboBox Name="languageComboBox" 
                      SelectionChanged="Language_Changed"
                      Width="120">
                <ComboBoxItem Content="C#" Tag="CSharp"/>
                <ComboBoxItem Content="Visual Basic" Tag="VB"/>
                <ComboBoxItem Content="XAML" Tag="XAML"/>
                <ComboBoxItem Content="XML" Tag="XML"/>
            </ComboBox>
        </ToolBar>
        
        
        <syncfusion:EditControl Name="editControl" 
                                Grid.Row="1"
                                DocumentLanguage="CSharp"
                                ShowLineNumber="True"
                                EnableOutlining="True"
                                EnableIntellisense="True"
                                Background="White"
                                FontSize="12"
                                FontFamily="Consolas"/>
    </Grid>
</Window>

using Syncfusion.Windows.Edit;
using Microsoft.Win32;
using System.IO;
using System.Windows;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        
        // Set initial language
        editControl.DocumentLanguage = Languages.CSharp;
        languageComboBox.SelectedIndex = 0;
    }
    
    private void OpenFile_Click(object sender, RoutedEventArgs e)
    {
        OpenFileDialog dialog = new OpenFileDialog
        {
            Filter = "C# Files (*.cs)|*.cs|VB Files (*.vb)|*.vb|XAML Files (*.xaml)|*.xaml|All Files (*.*)|*.*"
        };
        
        if (dialog.ShowDialog() == true)
        {
            editControl.Load(dialog.FileName);
            
            // Auto-detect language from extension
            string ext = Path.GetExtension(dialog.FileName).ToLower();
            switch (ext)
            {
                case ".cs":
                    editControl.DocumentLanguage = Languages.CSharp;
                    break;
                case ".vb":
                    editControl.DocumentLanguage = Languages.VB;
                    break;
                case ".xaml":
                    editControl.DocumentLanguage = Languages.XAML;
                    break;
                case ".xml":
                    editControl.DocumentLanguage = Languages.XML;
                    break;
            }
        }
    }
    
    private void SaveFile_Click(object sender, RoutedEventArgs e)
    {
        SaveFileDialog dialog = new SaveFileDialog
        {
            Filter = "C# Files (*.cs)|*.cs|VB Files (*.vb)|*.vb|XAML Files (*.xaml)|*.xaml|All Files (*.*)|*.*"
        };
        
        if (dialog.ShowDialog() == true)
        {
            editControl.Save(dialog.FileName);
        }
    }
    
    private void Language_Changed(object sender, SelectionChangedEventArgs e)
    {
        if (editControl == null) return;
        
        var selected = (ComboBoxItem)languageComboBox.SelectedItem;
        string language = selected.Tag.ToString();
        
        switch (language)
        {
            case "CSharp":
                editControl.DocumentLanguage = Languages.CSharp;
                break;
            case "VB":
                editControl.DocumentLanguage = Languages.VB;
                break;
            case "XAML":
                editControl.DocumentLanguage = Languages.XAML;
                break;
            case "XML":
                editControl.DocumentLanguage = Languages.XML;
                break;
        }
    }
}

常见模式

模式 1：使用编码加载和保存文件

// Load file with specific encoding
editControl.Load("path/to/file.cs", Encoding.UTF8);

// Save with encoding
editControl.Save("path/to/output.cs", Encoding.UTF8);

// Load from stream
using (FileStream stream = new FileStream("file.cs", FileMode.Open))
{
    editControl.Load(stream, Encoding.UTF8);
}

// Save to stream
using (FileStream stream = new FileStream("output.cs", FileMode.Create))
{
    editControl.Save(stream, Encoding.UTF8);
}

模式 2：自定义 IntelliSense 和自动补全

// Enable IntelliSense in Custom mode
editControl.EnableIntellisense = true;
editControl.IntellisenseMode = IntellisenseMode.Custom;

// Business object must implement IIntellisenseItem
public class MyIntellisenseItem : IIntellisenseItem
{
    public ImageSource Icon { get; set; }
    public string Text { get; set; }
    public IEnumerable<IIntellisenseItem> NestedItems { get; set; }
}

// Build custom items collection and assign to IntellisenseCustomItemsSource
var customItems = new ObservableCollection<MyIntellisenseItem>
{
    new MyIntellisenseItem { Text = "CustomMethod" },
    new MyIntellisenseItem { Text = "CustomProperty" },
    new MyIntellisenseItem { Text = "Console" }
};
editControl.IntellisenseCustomItemsSource = customItems;

// Handle IntelliSenseBoxOpening event to filter items at runtime
editControl.IntelliSenseBoxOpening += (s, e) =>
{
    // e.ItemsSource contains current items; set e.Cancel = true to suppress popup
    if (string.IsNullOrEmpty(editControl.Text))
        e.Cancel = true;
};

模式 3：使用正则表达式查找和替换

// Simple find
FindResult result = editControl.FindText("SearchTerm", 
    FindOptions.MatchCase | FindOptions.WholeWord);

if (result != null)
{
    Console.WriteLine($"Found at line {result.LineNumber}");
}

// Find with regex
FindResult regexResult = editControl.FindText(@"\d{3}-\d{4}", 
    FindOptions.UseRegularExpressions);

// Replace all occurrences
int replacedCount = editControl.ReplaceAll("oldText", "newText", 
    FindOptions.MatchCase);

// Replace with confirmation
while (editControl.FindNext("oldText", FindOptions.None))
{
    var dialogResult = MessageBox.Show("Replace this occurrence?", 
        "Confirm", MessageBoxButton.YesNoCancel);
    
    if (dialogResult == MessageBoxResult.Yes)
        editControl.SelectedText = "newText";
    else if (dialogResult == MessageBoxResult.Cancel)
        break;
}

模式 4：自定义语言定义

将格式和词法元素定义为 XAML 资源，然后将其应用于继承自 ProceduralLanguageBase 的类：

<syncfusion:FormatsCollection x:Key="myLangFormats">
    <syncfusion:EditFormats Foreground="Blue"  FormatName="KeywordFormat"/>
    <syncfusion:EditFormats Foreground="Green" FormatName="CommentFormat"/>
    <syncfusion:EditFormats Foreground="Brown" FormatName="StringFormat"/>
</syncfusion:FormatsCollection>


<syncfusion:LexemCollection x:Key="myLangLexems">
    <syncfusion:Lexem StartText="function" LexemType="Keyword"  FormatName="KeywordFormat" ContainsEndText="False" IsMultiline="False"/>
    <syncfusion:Lexem StartText="if"       LexemType="Keyword"  FormatName="KeywordFormat" ContainsEndText="False" IsMultiline="False"/>
    <syncfusion:Lexem StartText="while"    LexemType="Keyword"  FormatName="KeywordFormat" ContainsEndText="False" IsMultiline="False"/>
    <syncfusion:Lexem StartText="//"       EndText="\r\n" LexemType="Comment" FormatName="CommentFormat" ContainsEndText="True" IsMultiline="False"/>
    <syncfusion:Lexem StartText="&quot;"  EndText="&quot;" LexemType="Literals" FormatName="StringFormat" ContainsEndText="True" IsMultiline="False"/>
</syncfusion:LexemCollection>

// Create custom language class inheriting ProceduralLanguageBase
public class MyLanguage : ProceduralLanguageBase
{
    public MyLanguage(EditControl control) : base(control)
    {
        Name = "MyLanguage";
        FileExtension = "mylang";
        ApplyColoring = true;
        SupportsOutlining = false;
        SupportsIntellisense = false;
        TextForeground = Brushes.Black;
    }
}

// Wire up resources and apply the custom language
EditControl editControl = new EditControl();
editControl.DocumentLanguage = Languages.Custom;

MyLanguage customLanguage = new MyLanguage(editControl);
customLanguage.Lexem    = Application.Current.Resources["myLangLexems"]   as LexemCollection;
customLanguage.Formats  = Application.Current.Resources["myLangFormats"]  as FormatsCollection;
editControl.CustomLanguage = customLanguage;

模式 5：代码折叠和大纲显示

// Enable outlining
editControl.EnableOutlining = true;

// Collapse all regions
editControl.CollapseAll();

// Expand all regions
editControl.ExpandAll();

// Toggle specific region
editControl.ToggleOutlining(lineNumber);

// Programmatically add folding region
editControl.AddFoldingRegion(startLine, endLine, "Region Name");

// Handle outlining events
editControl.OutlineCollapsed += (s, e) =>
{
    Console.WriteLine($"Collapsed region at line {e.StartLine}");
};

关键属性

核心属性

属性	类型	描述
Text	string	获取/设置全部文本内容
DocumentLanguage	ILanguage	当前用于语法高亮显示的语言
ShowLineNumber	bool	显示/隐藏行号
EnableIntellisense	bool	启用 IntelliSense 功能
EnableOutlining	bool	启用代码折叠
IsReadOnly	bool	将编辑器设为只读
SingleLineMode	bool	将编辑器用作单行文本框

选区属性

属性	类型	描述
SelectedText	string	获取/设置当前选中的文本
SelectionStart	int	选区起始位置
SelectionLength	int	选区长度
CurrentLine	int	当前光标所在的行号
CurrentColumn	int	当前光标所在的列位置

外观属性

属性	类型	描述
FontFamily	FontFamily	编辑器字体
FontSize	double	编辑器字号
Background	Brush	编辑器背景
Foreground	Brush	默认文本颜色
LineNumberForeground	Brush	行号颜色
SelectionBrush	Brush	选区背景颜色

行为属性

属性	类型	描述
AllowDragDrop	bool	启用文本拖放
WordWrap	bool	启用自动换行
TabSize	int	制表符宽度
UseSpacesInsteadOfTabs	bool	将制表符转换为空格
AutoIndent	bool	自动缩进

事件

事件	描述
TextChanged	文本内容更改时触发
SelectionChanged	选区更改时触发
DocumentLanguageChanged	语言更改时触发
IntellisenseOpening	显示 IntelliSense 弹出窗口前触发
OutlineCollapsed	大纲区域折叠时触发
OutlineExpanded	大纲区域展开时触发

常见用例

1. IDE 的源代码编辑器

构建具备语法高亮、IntelliSense 和调试集成功能的开发环境。

2. 配置文件编辑器

创建用于编辑 XML、JSON、YAML 配置文件的编辑器，并支持验证和自动补全。

3. 日志文件查看器

显示和分析日志文件，并针对不同日志级别和模式提供语法高亮。

4. SQL 查询编辑器

构建支持 SQL 语法高亮和查询执行的数据库查询工具。

5. 脚本编辑器

创建适用于 PowerShell、Python 或自定义脚本语言的脚本环境。

6. Markdown 编辑器

实现支持实时预览和语法高亮的 Markdown 编辑器。

7. 模板编辑器

构建用于代码生成或文档模板的模板编辑工具。

8. 编程教育工具

创建具备代码高亮和交互式示例的学习应用。

最佳实践

1. 语言选择

   • 根据文件扩展名设置 DocumentLanguage
   • 提供用于手动切换语言的 UI
   • 支持特定语言的配置

2. 性能

   • 批量处理文本时使用 BeginUpdate()/EndUpdate()
   • 为大型文件启用虚拟化
   • 在仅查看的场景中考虑使用只读模式

3. 用户体验

   • 编辑代码时始终显示行号
   • 启用 IntelliSense 以提高工作效率
   • 提供查找/替换功能
   • 支持标准键盘快捷键

4. 文件操作

   • 加载/保存时始终指定编码
   • 处理现有文件的编码检测
   • 实现自动保存，或在存在未保存更改时提示

5. 自定义

   • 使用主题以保持外观一致
   • 允许用户自定义字体和颜色
   • 提供语法高亮自定义选项

6. 无障碍

   • 支持键盘导航
   • 兼容屏幕阅读器
   • 确保颜色对比度充足

故障排除

语法高亮不起作用

• 验证 DocumentLanguage 是否设置正确
• 检查语言是否已正确初始化
• 确保自定义语言定义完整

IntelliSense 未显示

• 验证 EnableIntellisense 是否为 true
• 检查 IntellisenseMode 设置
• 确保已填充 IntelliSense 项

大型文件的性能问题

• 启用虚拟化
• 批量操作时使用 BeginUpdate()/EndUpdate()
• 对于超大型文件，考虑使用分页或延迟加载

行号未显示

• 验证 ShowLineNumber 是否为 true
• 检查行号边距是否有足够的宽度
• 确保视觉样式不会隐藏行号

---

后续步骤： 根据实现需求，前往相应的参考文档。首先阅读 getting-started.md 进行初始设置，然后按需了解语法高亮、IntelliSense 和编辑功能。