syncfusion-winforms-syntax-editor について
Windows Forms アプリケーションに Syncfusion の EditControl を実装する開発者向けガイドです。構文強調表示、IntelliSense、コードの折りたたみ、ファイル操作などを扱います。
主な機能
- 01複数言語の構文強調表示
- 02IntelliSense の補完と自動修正
- 03コード折りたたみ、行番号、ブックマーク
- 04検索・置換とファイルのエクスポート
- 05元に戻す・やり直しと矩形選択
活用シーン
- 01多言語ソースコードエディターの構築
- 02SQL またはスクリプトエディターの作成
- 03設定ファイルエディターの開発
- 04構文強調表示付きログビューアーの作成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ winforms-ui-components-skills --skill syncfusion-winforms-syntax-editorインストール後、Claude Code で/syncfusion-winforms-syntax-editorを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/advanced-features.mdediting-features.mdfile-operations.mdgetting-started.mdintellisense.mdsyntax-highlighting.mdtext-visualization.md詳細
構文エディターの実装(EditControl)
このスキルでは、Syncfusion の EditControl を実装する方法を説明します。EditControl は、構文強調表示、IntelliSense、コードのアウトライン表示、包括的な編集機能など、Visual Studio のような機能を備えた対話型コードエディターアプリケーションを作成するための強力なテキストエディターコントロールです。
このスキルを使用する場面
次のような場合に、このスキルを使用してください。
- 人気のある言語の構文強調表示に対応したコードエディターアプリケーションを作成する
- Visual Studio のような編集機能を備えたテキストエディターを構築する
- IntelliSense に対応した構文認識型のコード編集を実装する
- テキストエディターにコードのアウトライン表示や折りたたみ機能を追加する
- 特殊な構文強調表示に対応するカスタム言語設定を作成する
- 複数のプログラミング言語に対応したソースコードビューアーやエディターを構築する
- クリップボード操作や取り消し/やり直しを備えた高度なテキスト編集を実装する
- テキスト編集アプリケーションに検索・置換ダイアログを追加する
- 複数のセクションを同時に表示する分割ビューのコードエディターを作成する
- 構文強調表示を維持したままコードをエクスポートまたは印刷する
- テキストエディターに自動補完や自動修正を実装する
- 行番号、ブックマーク、コードナビゲーションが必要なアプリケーションを構築する
- Visual Studio のような矩形ブロック選択に対応したテキストエディターを作成する
コンポーネントの概要
コントロール: EditControl
名前空間: Syncfusion.Windows.Forms.Edit
必要なアセンブリ:
Syncfusion.Edit.Windows.dll(主要)Syncfusion.Tools.Windows.dllSyncfusion.Shared.Base.dll
主な機能
EditControl は、包括的なコード編集機能を提供します。
- 構文強調表示: 11 言語(C#、VB.NET、XML、HTML、Java、SQL、PowerShell、JavaScript、VBScript、Delphi、C)を標準でサポートし、XML によるカスタム言語設定にも対応
- 編集機能: クリップボード操作、回数制限のない取り消し/やり直し、ドラッグ&ドロップ、通常の選択と矩形ブロック選択、行変更マーカーによる変更追跡
- IntelliSense: 定義済みデータによる自動補完、よくある入力ミスの自動修正、折りたたまれたコードブロックのコンテキストツールチップ、カスタム IntelliSense ポップアップ
- コードのアウトライン表示: 設定可能なアウトライン領域によるコードブロックの展開/折りたたみ、括弧の対応表示、折りたたみ可能なセクション
- テキストの視覚化: 行番号、ワードラップ、現在行の強調表示、コンテンツ区切り線、下線スタイル(実線/破線/波線/点線)、ブックマークとカスタムインジケーター
- ナビゲーション: 文字、単語、行、ページ、ドキュメント単位のナビゲーションと豊富な API
- 検索と置換: Visual Studio のような検索・置換機能を備えた組み込みダイアログ
- ファイル操作: エンコーディングに対応した作成、開く、保存、XML/RTF/HTML へのエクスポート、書式を保持した印刷
- 高度な機能: ドキュメントの複数セクションを表示する分割ビュー、行/列/キャレットの位置を追跡するステータスバー、TextBox のような動作をする単一行モード、カスタマイズ可能なショートカットキー
- グローバリゼーション: 完全なローカライズ対応、RTL(右から左)のテキストレイアウト
- イベント: ドキュメントの変更、選択、ナビゲーション、ユーザー操作に対応する包括的なイベントモデル
ドキュメントとナビゲーションガイド
はじめに
📄 参照: references/getting-started.md
次のような場合に参照してください。
- EditControl のアセンブリをインストールして参照する
- デザイナーまたはコードで EditControl を作成する
- 基本的なプロパティ(サイズ、境界線、ドック)を設定する
- エディターに初期コンテンツを読み込む
- 基本的なコードエディターアプリケーションをセットアップする
構文強調表示
📄 参照: references/syntax-highlighting.md
次のような場合に参照してください。
- C#、VB.NET、XML、HTML、Java、SQL、PowerShell、JavaScript などの組み込み構文強調表示を適用する
KnownLanguages列挙型でApplyConfiguration()を使用する- XML を使用してカスタム言語設定を作成する
- 字句要素、書式、コードの色分け規則を定義する
- 言語固有の構文要素を設定する
- 1 つのアプリケーションで複数の言語タイプを扱う
編集機能
📄 参照: references/editing-features.md
次の操作が必要な場合:
- クリップボード操作(切り取り、コピー、貼り付け)を実装する
- 無制限の元に戻す/やり直し機能を設定する
- 通常の選択モードまたは矩形ブロック選択モードを有効にする
- テキストのドラッグ&ドロップ編集に対応する
- ブロックのインデントおよびインデント解除機能を追加する
- 変更の追跡用に行の変更マーカーを表示する
- 編集操作用のコンテキストメニューをカスタマイズする
IntelliSense 機能
📄 参照: references/intellisense.md
次の操作が必要な場合:
- 定義済みのデータソースを使った自動補完を設定する
- よくあるタイプミスやスペルミスの自動修正を有効にする
- 折りたたまれたコードのコンテキストツールチップを表示する
- カスタムの IntelliSense ポップアップを作成する
- IntelliSense のイベントやユーザー操作を処理する
- IntelliSense 項目の外観や動作をカスタマイズする
テキストの視覚化
📄 参照: references/text-visualization.md
次の操作が必要な場合:
- カスタマイズ可能な行番号を表示する
- コードのアウトライン表示と折りたたみを有効にする
- ワードラップの動作を設定する
- カスタムカラーで現在の行を強調表示する
- セクション間にコンテンツ区切りを追加する
- 下線のスタイル(実線、破線、波線、点線)を適用する
- ブックマークとカスタムインジケーターを作成する
- ブックマーク間を移動する
ファイル操作とエクスポート
📄 参照: references/file-operations.md
次の操作が必要な場合:
- プログラムから新しいドキュメントを作成する
LoadFile()を使ってファイルを開いて読み込むSave()およびSaveAs()を使ってドキュメントを保存する- ファイルのエンコーディング(UTF-8、Unicode、ASCII)を処理する
- コンテンツを XML、RTF、HTML 形式にエクスポートする
- 構文強調表示付きでドキュメントを印刷する
- 印刷設定とページ設定を構成する
高度な機能
📄 参照: references/advanced-features.md
次の操作が必要な場合:
- 複数のドキュメントセクションを表示する分割ビューを作成する
- ステータスバーを設定およびカスタマイズする
- TextBox のような動作をする単一行モードを使用する
- 検索および置換ダイアログを実装する
- プログラムからテキストナビゲーションメソッドを使用する
- ショートカットキーの割り当てをカスタマイズする
- RTL(右から左)表示に対応する
- エディターを別の言語にローカライズする
- 包括的なイベントモデルを処理する
- 大きなファイルでのスクロール動作を最適化する
クイックスタートの例
C# 構文強調表示を備えた基本的なコードエディター
C#:
using Syncfusion.Windows.Forms.Edit;
using Syncfusion.Windows.Forms.Edit.Enums;
using System;
using System.Drawing;
using System.IO;
using System.Windows.Forms;
public class CodeEditorForm : Form
{
private EditControl editControl1;
public CodeEditorForm()
{
InitializeComponent();
SetupCodeEditor();
}
private void SetupCodeEditor()
{
// Create EditControl
editControl1 = new EditControl();
// Basic configuration
editControl1.Dock = DockStyle.Fill;
editControl1.BorderStyle = BorderStyle.Fixed3D;
// Apply C# syntax highlighting
editControl1.ApplyConfiguration(KnownLanguages.CSharp);
// Enable line numbers
editControl1.ShowLineNumbers = true;
// Enable code outlining
editControl1.ShowOutliningCollapsers = true;
// Add to form
this.Controls.Add(editControl1);
// Load sample code (optional)
string sampleCode = @"using System;
namespace HelloWorld
{
class Program
{
static void Main(string[] args)
{
Console.WriteLine(""Hello, World!"");
}
}
}";
editControl1.Text = sampleCode;
}
private void InitializeComponent()
{
this.Text = "C# Code Editor";
this.Size = new Size(800, 600);
}
}
VB.NET:
Imports Syncfusion.Windows.Forms.Edit
Imports Syncfusion.Windows.Forms.Edit.Enums
Imports System
Imports System.Drawing
Imports System.IO
Imports System.Windows.Forms
Public Class CodeEditorForm
Inherits Form
Private editControl1 As EditControl
Public Sub New()
InitializeComponent()
SetupCodeEditor()
End Sub
Private Sub SetupCodeEditor()
' Create EditControl
editControl1 = New EditControl()
' Basic configuration
editControl1.Dock = DockStyle.Fill
editControl1.BorderStyle = BorderStyle.Fixed3D
' Apply C# syntax highlighting
editControl1.ApplyConfiguration(KnownLanguages.CSharp)
' Enable line numbers
editControl1.ShowLineNumbers = True
' Enable code outlining
editControl1.ShowOutliningCollapsers = True
' Add to form
Me.Controls.Add(editControl1)
' Load sample code (optional)
Dim sampleCode As String = "using System;" & vbCrLf & vbCrLf & _
"namespace HelloWorld" & vbCrLf & _
"{" & vbCrLf & _
" class Program" & vbCrLf & _
" {" & vbCrLf & _
" static void Main(string[] args)" & vbCrLf & _
" {" & vbCrLf & _
" Console.WriteLine(""Hello, World!"");" & vbCrLf & _
" }" & vbCrLf & _
" }" & vbCrLf & _
"}"
editControl1.Text = sampleCode
End Sub
Private Sub InitializeComponent()
Me.Text = "C# Code Editor"
Me.Size = New Size(800, 600)
End Sub
End Class
よくあるパターン
パターン 1:複数言語対応のコードエディター
複数のプログラミング言語を切り替えられるエディターを作成します。
C#:
private ComboBox languageSelector;
private EditControl editControl1;
private void SetupMultiLanguageEditor()
{
// Language selector
languageSelector = new ComboBox
{
Dock = DockStyle.Top,
DropDownStyle = ComboBoxStyle.DropDownList
};
languageSelector.Items.AddRange(new object[]
{
"C#", "VB.NET", "XML", "HTML", "Java", "SQL", "PowerShell", "JavaScript"
});
languageSelector.SelectedIndex = 0;
languageSelector.SelectedIndexChanged += LanguageSelector_SelectedIndexChanged;
// Editor
editControl1 = new EditControl
{
Dock = DockStyle.Fill,
ShowLineNumbers = true,
ShowOutliningCollapsers = true
};
this.Controls.Add(editControl1);
this.Controls.Add(languageSelector);
// Apply initial language
ApplyLanguage("C#");
}
private void LanguageSelector_SelectedIndexChanged(object sender, EventArgs e)
{
ApplyLanguage(languageSelector.SelectedItem.ToString());
}
private void ApplyLanguage(string language)
{
switch (language)
{
case "C#":
editControl1.ApplyConfiguration(KnownLanguages.CSharp);
break;
case "VB.NET":
editControl1.ApplyConfiguration(KnownLanguages.VB);
break;
case "XML":
editControl1.ApplyConfiguration(KnownLanguages.XML);
break;
case "HTML":
editControl1.ApplyConfiguration(KnownLanguages.HTML);
break;
case "Java":
editControl1.ApplyConfiguration(KnownLanguages.Java);
break;
case "SQL":
editControl1.ApplyConfiguration(KnownLanguages.SQL);
break;
case "PowerShell":
editControl1.ApplyConfiguration(KnownLanguages.PowerShell);
break;
case "JavaScript":
editControl1.ApplyConfiguration(KnownLanguages.JScript);
break;
}
}
パターン 2:保存/読み込み機能を備えたファイルエディター
ファイル操作ができるエディターを作成します。
C#:
private EditControl editControl1;
private string currentFilePath = null;
private void SetupFileEditor()
{
editControl1 = new EditControl
{
Dock = DockStyle.Fill,
ShowLineNumbers = true
};
// Menu bar
MenuStrip menuStrip = new MenuStrip();
ToolStripMenuItem fileMenu = new ToolStripMenuItem("File");
fileMenu.DropDownItems.Add("New", null, NewFile_Click);
fileMenu.DropDownItems.Add("Open...", null, OpenFile_Click);
fileMenu.DropDownItems.Add("Save", null, SaveFile_Click);
fileMenu.DropDownItems.Add("Save As...", null, SaveFileAs_Click);
menuStrip.Items.Add(fileMenu);
this.Controls.Add(editControl1);
this.Controls.Add(menuStrip);
this.MainMenuStrip = menuStrip;
}
private void NewFile_Click(object sender, EventArgs e)
{
editControl1.Text = string.Empty;
currentFilePath = null;
this.Text = "Untitled - Code Editor";
}
private void OpenFile_Click(object sender, EventArgs e)
{
OpenFileDialog openDialog = new OpenFileDialog
{
Filter = "All Files (*.*)|*.*|C# Files (*.cs)|*.cs|VB Files (*.vb)|*.vb"
};
if (openDialog.ShowDialog() == DialogResult.OK)
{
editControl1.LoadFile(openDialog.FileName);
currentFilePath = openDialog.FileName;
this.Text = Path.GetFileName(currentFilePath) + " - Code Editor";
// Auto-detect language based on extension
string ext = Path.GetExtension(currentFilePath).ToLower();
if (ext == ".cs")
editControl1.ApplyConfiguration(KnownLanguages.CSharp);
else if (ext == ".vb")
editControl1.ApplyConfiguration(KnownLanguages.VB);
else if (ext == ".xml")
editControl1.ApplyConfiguration(KnownLanguages.XML);
}
}
private void SaveFile_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(currentFilePath))
{
SaveFileAs_Click(sender, e);
}
else
{
editControl1.SaveFile(currentFilePath);
}
}
private void SaveFileAs_Click(object sender, EventArgs e)
{
SaveFileDialog saveDialog = new SaveFileDialog
{
Filter = "All Files (*.*)|*.*|C# Files (*.cs)|*.cs|VB Files (*.vb)|*.vb"
};
if (saveDialog.ShowDialog() == DialogResult.OK)
{
editControl1.SaveFile(saveDialog.FileName);
currentFilePath = saveDialog.FileName;
this.Text = Path.GetFileName(currentFilePath) + " - Code Editor";
}
}
パターン 3:IntelliSense を備えたコードエディター
C#:
editControl1 = new EditControl { Dock = DockStyle.Fill, ShowLineNumbers = true };
editControl1.ApplyConfiguration(KnownLanguages.CSharp);
// Configure IntelliSense suggestions using ContextChoiceController
// Populate suggestions when the context choice opens so they are context-aware
editControl1.ContextChoiceOpen += (s, e) =>
{
var controller = editControl1.ContextChoiceController;
controller.Items.Clear();
controller.Items.Add("Console");
controller.Items.Add("Console.WriteLine");
controller.Items.Add("string");
controller.Items.Add("int");
controller.Items.Add("public");
controller.Items.Add("private");
controller.Items.Add("class");
};
// Configure simple auto-replace (auto-correct) triggers on the editor language
editControl1.Language.AutoReplaceTriggers.Add(new AutoReplaceTrigger("teh", "the"));
editControl1.Language.AutoReplaceTriggers.Add(new AutoReplaceTrigger("cosole", "console"));
editControl1.UseAutoreplaceTriggers = true;
this.Controls.Add(editControl1);
主なプロパティとメソッド
基本的なプロパティ
| Property | Type | Description |
|---|---|---|
| Text | string | エディターのテキスト内容を取得または設定します |
| ShowLineNumbers | bool | 余白部分の行番号を表示または非表示にします |
| ShowOutliningCollapsers | bool | コードのアウトライン表示を折りたたむ/展開するコントロールを有効にします |
| WordWrap | bool | ワードラップを有効または無効にします |
| ReadOnly | bool | エディターを読み取り専用にします |
| TabSize | int | タブ文字に使用するスペースの数を設定します |
| AutoCompleteMode | AutoCompleteMode | 自動補完の動作(All、Suggest、None)を設定します |
| EnableAutoCorrect | bool | よくあるタイプミスを自動修正する機能を有効にします |
| StatusBarSettings | StatusBarSettings | 組み込みのステータスバーを設定します |
| ContextChoiceOpen | bool | IntelliSense のコンテキストメニューが開いているかどうかを取得します |
| CanUndo | bool | 元に戻す操作が可能かどうかを示します |
| CanRedo | bool | やり直し操作が可能かどうかを示します |
| IsModified | bool | ドキュメントが変更されているかどうかを示します |
主なメソッド
| メソッド | 説明 |
|---|---|
| ApplyConfiguration(KnownLanguages) | 組み込みの構文ハイライト設定を適用します |
| LoadFile(string) | ファイルをエディターに読み込みます |
| Save() | 保存ダイアログを開きます(引数なし) |
| SaveFile(string) | 現在の内容を指定したパスに保存します |
| SaveAs() | 名前を付けて保存ダイアログを開きます |
| Undo() | 元に戻す操作を実行します |
| Redo() | やり直し操作を実行します |
| Cut() | 選択したテキストをクリップボードに切り取ります |
| Copy() | 選択したテキストをクリップボードにコピーします |
| Paste() | クリップボードからテキストを貼り付けます |
| SelectAll() | エディター内のすべてのテキストを選択します |
| ShowFindDialog() | 検索ダイアログを開きます |
| ShowReplaceDialog() | 置換ダイアログを開きます |
| GoTo(int) | 指定した行番号に移動します |
| Text (property) | エディターのテキスト内容を取得または設定します |
| SaveAsXML(string), SaveAsHTML(string), SaveAsRTF(string) | 内容を XML、HTML、RTF 形式にエクスポートします |
| Print() | ドキュメントの印刷ダイアログを開きます |
一般的なユースケース
- ソースコードエディター:構文ハイライトと IntelliSense を備えた、C#、VB.NET、Java 用の Visual Studio のようなコードエディターを構築します
- 設定ファイルエディター:構文検証機能を備えた XML、JSON エディターを構築します
- SQL クエリエディター:SQL 構文ハイライト機能を備えたデータベースクエリエディターを構築します
- スクリプトエディター:自動化向けの PowerShell、JavaScript エディターを構築します
- コードスニペットマネージャー:構文ハイライト機能を備えたコードスニペットを保存、整理します
- ログファイルビューアー:構文ハイライト機能を備えた構造化ログを表示します
- 多言語 IDE:分割ビューに対応した、複数の言語をサポートする IDE を構築します
次のステップ
まず はじめに を参照して EditControl をインストール、設定し、アプリケーションの要件に応じて、上記のナビゲーションガイドから特定の機能を確認してください。