MCPInstall

syncfusion-wpf-syntax-editor

Implement Syncfusion WPF Syntax Editor (EditControl) for code editors and advanced text editing applications. Use this when building syntax-highlighted code editors, IDE-like editors, or source code editing interfaces in WPF. Covers syntax highlighting, IntelliSense, find/replace, programming language support, and Visual Studio-style editing features.

Installs
154
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-syntax-editor
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-wpf-syntax-editor automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Syntax Editor

Guide for implementing Syncfusion® WPF Syntax Editor (EditControl) — an advanced code and text editor control for creating IDE-like editing experiences with syntax highlighting, IntelliSense, find/replace, and comprehensive editing features for multiple programming languages.

When to Use This Skill

Use this skill when you need to:

  • Create code editors with syntax highlighting for C#, VB, XAML, XML, and custom languages
  • Build IDE-like applications with advanced text editing capabilities
  • Implement IntelliSense with auto-completion and code suggestions
  • Add text editors to applications with find/replace, line numbers, and folding
  • Support multiple file formats with syntax-aware editing
  • Create custom language editors with user-defined syntax rules
  • Implement advanced editing features like drag-drop, undo/redo, printing
  • Build source code viewers or editors for development tools
  • Create log file viewers with syntax highlighting
  • Implement configuration file editors with validation

This skill covers the complete Syntax Editor implementation including basic setup, language configuration, editing features, customization, and advanced scenarios.

Component Overview

The Syntax Editor (EditControl) is a high-performance text and code editor control that provides:

  • Syntax Highlighting - Built-in support for C#, VB.NET, XAML, XML, and custom languages
  • IntelliSense - Auto-completion, parameter info, and code suggestions
  • File Operations - Open, save, new file with encoding support
  • Advanced Editing - Multi-level undo/redo, clipboard operations, drag-drop
  • Find and Replace - Search with regex, match case, whole word
  • Text Navigation - Go to line, bookmarks, scroll synchronization
  • Line Numbers - Display with customizable appearance
  • Code Folding - Expand/collapse code blocks
  • Context Menu - Fully customizable with built-in commands
  • Status Bar - Line/column position, insert/overwrite mode
  • Printing - Print preview and formatted output
  • Customization - Fonts, colors, backgrounds, margins
  • Read-only Mode - View-only with protection
  • Single-line Mode - Use as enhanced TextBox
  • Custom Languages - Define your own syntax rules

Control Structure

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

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

  • Assembly deployment and dependencies
  • Adding EditControl via designer, XAML, and C#
  • Loading files into the editor
  • Basic configuration
  • First code editor example

📄 Read: references/overview.md

  • Component introduction
  • Key features overview
  • Real-world scenarios
  • Architecture and design
  • Performance considerations

📄 Read: references/file-operations.md

  • Opening files (Stream, file path)
  • Saving files with encoding
  • Creating new documents
  • File type detection
  • Encoding support (UTF-8, ASCII, Unicode)
  • Recent files management

Syntax and Language Support

📄 Read: references/syntax-highlighting.md

  • Enabling syntax highlighting
  • Built-in language support
  • Configuring language-specific settings
  • Syntax highlighting customization
  • Color schemes and themes
  • Token-based highlighting

📄 Read: references/supported-languages.md

  • C# language support
  • Visual Basic support
  • XAML language support
  • XML language support
  • SQL language support
  • Language switching at runtime

📄 Read: references/custom-language-support.md

  • Creating custom language configurations
  • Language base classes (LanguageBase, ProceduralLanguageBase, MarkupLanguageBase)
  • Defining lexical states
  • Token definitions and patterns
  • Custom syntax rules
  • Language inheritance

📄 Read: references/intellisense.md

  • Enabling IntelliSense features
  • Auto-completion lists
  • Parameter info tooltips
  • Custom IntelliSense data sources
  • Triggering IntelliSense programmatically
  • IntelliSense appearance customization

Editing Features

📄 Read: references/editing-text.md

  • Basic text editing operations
  • Programmatic text manipulation
  • Text insertion and deletion
  • Document navigation
  • Text properties and methods
  • Line-based operations

📄 Read: references/edit-commands.md

  • Built-in editing commands
  • Undo/Redo operations
  • Clipboard operations (Cut, Copy, Paste)
  • Select All, Delete
  • RoutedUICommands usage
  • Custom command implementation
  • Command bindings

📄 Read: references/selection.md

  • Text selection methods
  • Selection properties (SelectedText, SelectionStart, SelectionLength)
  • Programmatic selection
  • Selection appearance customization
  • Multi-line selection handling

📄 Read: references/find-and-replace.md

  • Find text functionality
  • Replace operations
  • Find and replace dialog
  • Search options (match case, whole word, regex)
  • Programmatic search API
  • Search result navigation

📄 Read: references/text-navigation.md

  • Go to line functionality
  • Scroll to position
  • Bookmark support
  • Keyboard navigation
  • Line and column position tracking
  • Viewport management

UI Features

📄 Read: references/line-numbers.md

  • Enabling line numbers
  • Line number appearance customization
  • Line number margin width
  • Line highlighting
  • Current line indicator

📄 Read: references/expand-collapse.md

  • Code folding regions
  • Expand/collapse functionality
  • Outlining configuration
  • Custom folding rules
  • Collapse indicators appearance
  • Programmatic expand/collapse

📄 Read: references/context-menu.md

  • Default context menu
  • Context menu customization
  • Adding custom menu items
  • Menu command bindings
  • Disabling context menu

📄 Read: references/status-bar.md

  • Enabling status bar
  • Line and column position display
  • Insert/Overwrite mode indicator
  • Custom status bar content
  • Status bar appearance

Customization and Advanced Features

📄 Read: references/customization.md

  • Font and color customization
  • Background customization
  • Line background customization
  • Margin and padding settings
  • Cursor appearance
  • Scroll bar customization
  • Visual styles and themes

📄 Read: references/advanced-features.md

  • Drag and drop text editing
  • Read-only mode
  • Single-line mode (enhanced TextBox)
  • Printing and print preview
  • Split view support
  • Performance optimization
  • Memory management

Quick Start Example

Basic Code Editor Setup

<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 -->
        <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>
        
        <!-- Syntax Editor -->
        <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;
        }
    }
}

Common Patterns

Pattern 1: Load and Save Files with Encoding

// 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);
}

Pattern 2: Custom IntelliSense with Auto-Completion

// 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;
};

Pattern 3: Find and Replace with Regex

// 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;
}

Pattern 4: Custom Language Definition

Define formats and lexems as XAML resources, then apply them to a class that inherits ProceduralLanguageBase:

<!-- Define formats in XAML Resources -->
<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>

<!-- Define lexems in XAML Resources -->
<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;

Pattern 5: Code Folding and Outlining

// 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}");
};

Key Properties

Core Properties

PropertyTypeDescription
TextstringGets/sets the entire text content
DocumentLanguageILanguageCurrent language for syntax highlighting
ShowLineNumberboolShows/hides line numbers
EnableIntellisenseboolEnables IntelliSense features
EnableOutliningboolEnables code folding
IsReadOnlyboolMakes editor read-only
SingleLineModeboolUses editor as single-line TextBox

Selection Properties

PropertyTypeDescription
SelectedTextstringGets/sets currently selected text
SelectionStartintSelection start position
SelectionLengthintLength of selection
CurrentLineintCurrent cursor line number
CurrentColumnintCurrent cursor column position

Appearance Properties

PropertyTypeDescription
FontFamilyFontFamilyEditor font
FontSizedoubleEditor font size
BackgroundBrushEditor background
ForegroundBrushDefault text color
LineNumberForegroundBrushLine number color
SelectionBrushBrushSelection background color

Behavior Properties

PropertyTypeDescription
AllowDragDropboolEnables text drag-drop
WordWrapboolEnables word wrapping
TabSizeintTab character width
UseSpacesInsteadOfTabsboolConverts tabs to spaces
AutoIndentboolAutomatic indentation

Events

EventDescription
TextChangedFired when text content changes
SelectionChangedFired when selection changes
DocumentLanguageChangedFired when language changes
IntellisenseOpeningFired before showing IntelliSense popup
OutlineCollapsedFired when outline region collapses
OutlineExpandedFired when outline region expands

Common Use Cases

1. Source Code Editor for IDEs

Build development environments with syntax highlighting, IntelliSense, and debugging integration.

2. Configuration File Editor

Create editors for XML, JSON, YAML configuration files with validation and auto-completion.

3. Log File Viewer

Display and analyze log files with syntax highlighting for different log levels and patterns.

4. SQL Query Editor

Build database query tools with SQL syntax highlighting and query execution.

5. Script Editor

Create scripting environments for PowerShell, Python, or custom scripting languages.

6. Markdown Editor

Implement markdown editors with live preview and syntax highlighting.

7. Template Editor

Build template editing tools for code generation or document templates.

8. Educational Coding Tools

Create learning applications with code highlighting and interactive examples.

Best Practices

  1. Language Selection

    • Set DocumentLanguage based on file extension
    • Provide UI for manual language switching
    • Support language-specific configurations
  2. Performance

    • Use BeginUpdate()/EndUpdate() for bulk text operations
    • Enable virtualization for large files
    • Consider read-only mode for view-only scenarios
  3. User Experience

    • Always show line numbers for code editing
    • Enable IntelliSense for better productivity
    • Provide find/replace functionality
    • Support standard keyboard shortcuts
  4. File Operations

    • Always specify encoding when loading/saving
    • Handle encoding detection for existing files
    • Implement auto-save or prompt for unsaved changes
  5. Customization

    • Use themes for consistent appearance
    • Allow users to customize fonts and colors
    • Provide syntax highlighting customization options
  6. Accessibility

    • Support keyboard navigation
    • Provide screen reader compatibility
    • Ensure sufficient color contrast

Troubleshooting

Syntax Highlighting Not Working

  • Verify DocumentLanguage is set correctly
  • Check if language is properly initialized
  • Ensure custom language definitions are complete

IntelliSense Not Appearing

  • Verify EnableIntellisense is true
  • Check IntellisenseMode setting
  • Ensure IntelliSense items are populated

Performance Issues with Large Files

  • Enable virtualization
  • Use BeginUpdate()/EndUpdate() for batch operations
  • Consider pagination or lazy loading for very large files

Line Numbers Not Showing

  • Verify ShowLineNumber is true
  • Check if line number margin has sufficient width
  • Ensure visual style doesn't hide line numbers

Next Steps: Navigate to specific reference documents based on your implementation needs. Start with getting-started.md for initial setup, then explore syntax highlighting, IntelliSense, and editing features as needed.

FAQ

What does the syncfusion-wpf-syntax-editor skill do?

Implement Syncfusion WPF Syntax Editor (EditControl) for code editors and advanced text editing applications. Use this when building syntax-highlighted code editors, IDE-like editors, or source code editing interfaces in WPF. Covers syntax highlighting, IntelliSense, find/replace, programming language support, and Visual Studio-style editing features.

How do I install syncfusion-wpf-syntax-editor?

Run npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-syntax-editor in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-wpf-syntax-editor/ (personal) or .claude/skills/syncfusion-wpf-syntax-editor/ (project).

Which AI agents can use syncfusion-wpf-syntax-editor?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-wpf-syntax-editor safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-wpf-syntax-editor?

It is published by syncfusion in syncfusion/wpf-ui-components-skills. It has 154 recorded installs.

More from syncfusion/wpf-ui-components-skills

View all →

syncfusion-wpf-theming

syncfusion/wpf-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design184 installs

syncfusion-wpf-datagrid

syncfusion/wpf-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design176 installs

syncfusion-wpf-carousel

syncfusion/wpf-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design164 installs

syncfusion-wpf-button

syncfusion/wpf-ui-components-skills

Implement Syncfusion WPF ButtonAdv controls for configurable button UIs. Use this when adding, configuring, or customizing a Syncfusion WPF ButtonAdv — including labels, icons, size modes, toggle/checkable behavior, MVVM command binding, multiline text, corner radius, IsDefault/IsCancel modes, icon templates, and themes.

Frontend & Design163 installs

syncfusion-wpf-combobox

syncfusion/wpf-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design163 installs

syncfusion-wpf-getting-started

syncfusion/wpf-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design162 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs