syncfusion-wpf-syntax-editor

構文エディターの実装

Syncfusion® WPF Syntax Editor（EditControl）を実装するためのガイドです。構文の強調表示、IntelliSense、検索と置換、複数のプログラミング言語に対応した包括的な編集機能を備え、IDE のような編集エクスペリエンスを実現する高度なコード／テキストエディターコントロールです。

このスキルを使用する場面

次のような場合にこのスキルを使用してください。

• コードエディターを作成する：C#、VB、XAML、XML、カスタム言語の構文を強調表示する
• IDE のようなアプリケーションを構築する：高度なテキスト編集機能を備える
• IntelliSense を実装する：自動補完やコード候補を表示する
• テキストエディターを追加する：検索と置換、行番号、折りたたみに対応する
• 複数のファイル形式に対応する：構文を認識した編集を実現する
• カスタム言語エディターを作成する：ユーザー定義の構文ルールを使用する
• 高度な編集機能を実装する：ドラッグ＆ドロップ、元に戻す／やり直し、印刷などに対応する
• ソースコードビューアーまたは開発ツール用エディターを構築する
• 構文の強調表示に対応したログファイルビューアーを作成する
• 検証機能を備えた構成ファイルエディターを実装する

このスキルでは、基本的な設定、言語の構成、編集機能、カスタマイズ、高度なシナリオを含む、Syntax Editor の実装全般を扱います。

コンポーネントの概要

Syntax Editor（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

• ドラッグ＆ドロップによるテキスト編集
• 読み取り専用モード
• 1 行モード（拡張 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	エディターを単一行の TextBox として使用します

選択範囲のプロパティ

プロパティ	型	説明
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、編集機能を確認してください。