syncfusion-winforms-editable-listbox

Syncfusion Windows Forms EditableList の実装

EditableList コントロールを実装およびカスタマイズするための包括的なガイドです。Windows Forms アプリケーションでインライン編集、項目管理、豊富なカスタマイズオプションを実現する強力なリストボックスコンポーネントです。

このスキルを使用するタイミング

ユーザーが次のことを必要としている場合に、このスキルを使用します。

• Windows Forms アプリケーションに EditableList コントロールを実装する
• リストボックス内で直接リスト項目の インライン編集を有効にする
• ユーザーが実行時に項目を追加、編集、削除できる 動的なリストを管理する
• DataSource または手動入力で リストにデータを設定する
• 編集用 TextBox と AutoComplete 機能を統合する
• 埋め込みコントロール、スクロール、レイアウトなどの 外観をカスタマイズする
• 編集可能なリストに 最新のテーマ（Metro、Office2016）を適用する
• 編集イベントとユーザー操作を処理する
• ドックの余白とコントロールのサイズを設定する
• EditableList 内に埋め込みコントロール（Button、TextBox、ListBox）を 設定する

EditableList コントロールは、ユーザーが編集できるコレクション、フォームへのデータ入力、タグ管理など、リストをインライン編集すると使いやすさが向上するあらゆるインターフェイスに適しています。

コンポーネントの概要

EditableList（Editable ListBox とも呼ばれます）は、ListBox、TextBox、およびオプションの Button を組み合わせて、インライン編集機能を提供する複合コントロールです。ユーザーは項目を選択し、リストインターフェイス内で直接編集できます。

主な機能：

• インライン編集：項目をクリックして、その場で直接編集できます
• DataSource バインディング：データソースに接続するか、手動でデータを設定できます
• 埋め込みコントロール：子 Button、TextBox、ListBox にアクセスして設定できます
• AutoComplete 統合：編集中にスマートなテキスト候補を表示できます
• 最新のスタイル：Metro および Office2016 のテーマと配色をサポートします
• 柔軟なレイアウト：AutoScroll、ドックの余白、サイズを設定できます
• 外観のカスタマイズ：ボタンの表示と外観を制御できます

埋め込みコントロール：

• Button：追加の操作に使用するオプションのボタンです（WantButton プロパティで制御します）
• TextBox：選択した項目のインライン編集に使用します
• ListBox：ListBox の全機能を備え、リスト項目を格納します

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとアセンブリの配置
• Visual Studio デザイナーからコントロールを追加する方法
• コードからプログラムでコントロールを追加する方法
• 必要な名前空間のインポート
• 基本的な初期化とセットアップ
• 埋め込みコントロールについて

リストへのデータ設定と編集

📄 参照： references/populating-editing.md

• DataSource バインディングによるデータ設定
• プロパティエディターを使用した手動でのデータ設定
• 実行時の編集ワークフロー
• 項目の選択とインライン編集の手順
• ListBox.Items の操作
• 完全なコード例（C# および VB.NET）

外観と動作の設定

📄 参照： references/appearance-behavior.md

• 埋め込みコントロールの概要とアクセス方法
• 大きなリスト向けの AutoScroll の設定
• レイアウト制御のためのドックの余白
• ボタンの表示を制御する WantButton プロパティ
• コントロールのサイズと位置
• 実用的な設定例

AutoComplete の統合

📄 参照： references/autocomplete-integration.md

• AutoComplete コンポーネントのセットアップ
• AutoComplete と EditableList の TextBox の関連付け
• 候補の DataSource 設定
• AutoCompleteModes のオプション
• フォームの Load イベントの実装
• 統合の完全な例

スタイルとテーマ

📄 参照： references/styling-themes.md

• ビジュアルスタイル（Default、Metro、Office2016）
• Style プロパティの適用
• Office2016 の配色（Colorful、White、DarkGray、Black）
• フォーム全体でのテーマの統一
• スタイル設定の完全なコード例

クイックスタート

基本的な実装（デザイナー）

1. ツールボックスからコントロールを追加する：

   • Visual Studio デザイナーでフォームを開きます
   • ツールボックスの Syncfusion Controls セクションで EditableList を探します
   • フォームにドラッグ＆ドロップします
   • アセンブリが自動的に追加されます

2. プロパティウィンドウで設定する：

   • Size、Location、その他の基本プロパティを設定します
   • ListBox プロパティを展開して項目を設定します
   • モダンな外観にするには Style プロパティを設定します

基本的な実装（コード）

using Syncfusion.Windows.Forms.Tools;

namespace MyWinFormsApp
{
    public partial class Form1 : Form
    {
        private EditableList editableList1;
        
        public Form1()
        {
            InitializeComponent();
            SetupEditableList();
        }
        
        private void SetupEditableList()
        {
            // Create and initialize
            this.editableList1 = new EditableList();
            this.editableList1.Location = new System.Drawing.Point(20, 20);
            this.editableList1.Size = new System.Drawing.Size(300, 200);
            
            // Populate items
            this.editableList1.ListBox.Items.AddRange(new object[] {
                "Item 1",
                "Item 2", 
                "Item 3"
            });
            
            // Apply modern style
            this.editableList1.Style = Syncfusion.Windows.Forms.Appearance.Office2016;
            
            // Add to form
            this.Controls.Add(this.editableList1);
        }
    }
}

Imports Syncfusion.Windows.Forms.Tools

Public Class Form1
    Private editableList1 As EditableList
    
    Public Sub New()
        InitializeComponent()
        SetupEditableList()
    End Sub
    
    Private Sub SetupEditableList()
        ' Create and initialize
        Me.editableList1 = New EditableList()
        Me.editableList1.Location = New System.Drawing.Point(20, 20)
        Me.editableList1.Size = New System.Drawing.Size(300, 200)
        
        ' Populate items
        Me.editableList1.ListBox.Items.AddRange(New Object() {
            "Item 1",
            "Item 2",
            "Item 3"
        })
        
        ' Apply modern style
        Me.editableList1.Style = Syncfusion.Windows.Forms.Appearance.Office2016
        
        ' Add to form
        Me.Controls.Add(Me.editableList1)
    End Sub
End Class

よく使われるパターン

パターン 1：DataSource バインディング

// Bind to a data source
List<string> dataSource = new List<string>();
dataSource.Add("Product A");
dataSource.Add("Product B");
dataSource.Add("Product C");

this.editableList1.ListBox.DataSource = dataSource;

パターン 2：実行時の編集ワークフロー

User Interaction:
1. Click on an item to select it
2. Click again to enter edit mode (TextBox appears)
3. Edit the text in the TextBox
4. Change focus (click elsewhere, press Tab)
5. List updates automatically with edited value

パターン 3：大きなリストで AutoScroll を有効にする

// Enable automatic scrollbars
this.editableList1.AutoScroll = true;
this.editableList1.AutoScrollMargin = new System.Drawing.Size(2, 2);
this.editableList1.AutoScrollMinSize = new System.Drawing.Size(3, 3);

パターン 4：編集中にボタンを表示する

// Display button on the right during editing
this.editableList1.WantButton = true;

// Handle button click if needed
this.editableList1.Button.Click += (s, e) => {
    MessageBox.Show("Button clicked!");
};

パターン 5：モダンなテーマを適用する

// Apply Office2016 theme with color scheme
this.editableList1.Style = Syncfusion.Windows.Forms.Appearance.Office2016;
this.editableList1.Office2016ColorScheme = ScrollBarOffice2016ColorScheme.Colorful;

主なプロパティとイベント

基本的なプロパティ

プロパティ	説明	例
ListBox	埋め込み ListBox コントロールにアクセスします	editableList1.ListBox.Items.Add("Item")
TextBox	編集用 TextBox コントロールにアクセスします	editableList1.TextBox.Text
Button	オプションのボタンコントロールにアクセスします	editableList1.Button.Click += Handler
WantButton	編集中のボタンの表示／非表示を切り替えます	editableList1.WantButton = true
AutoScroll	スクロールバーを自動的に有効にします	editableList1.AutoScroll = true
Style	外観のスタイル	editableList1.Style = Appearance.Office2016
DockPadding	ドッキングされたコントロールのパディング	editableList1.DockPadding.All = 5

よく使われるイベント

埋め込みコントロールを通じてイベントにアクセスします。

// ListBox events
this.editableList1.ListBox.SelectedIndexChanged += ListBox_SelectedIndexChanged;
this.editableList1.ListBox.Click += ListBox_Click;

// TextBox events
this.editableList1.TextBox.TextChanged += TextBox_TextChanged;
this.editableList1.TextBox.Leave += TextBox_Leave;

// Button events (if WantButton = true)
this.editableList1.Button.Click += Button_Click;

よくあるユースケース

ユースケース 1：タグ管理システム

ユーザーは、タグをインラインで追加、編集、削除できるタグ管理機能を必要としています。 → DataSource バインディングを使用し、インライン編集を有効にして、項目選択の処理を追加します

ユースケース 2：動的なカテゴリリスト

ユーザーは、リスト内でカテゴリを直接編集できる設定フォームを必要としています。 → 手動で項目を追加し、削除機能に WantButton を使用して、モダンな UI 用のスタイルを適用します

ユースケース 3：メールの宛先リスト

ユーザーは、オートコンプリート候補を表示できる、編集可能なメールアドレスのリストを必要としています。 → オートコンプリートを統合し、候補に DataSource を使用して、TextBox.Leave で検証します

ユースケース 4：ToDo リスト管理

ユーザーは、インライン編集機能を備えたシンプルな ToDo リストを必要としています。 → 基本設定と実行時編集を使用し、タスク完了時の ListBox イベントを処理します

ユースケース 5：設定エディター

ユーザーは、リスト形式で設定値を編集できるフォームを必要としています。 → DataSource バインディングとテーマ付きの外観を使用し、レイアウトにはドックパディングを設定します

ヒントとベストプラクティス

1. 動的なデータには DataSource を使用する：コレクションにバインドすると、自動的に更新されます
2. TextBox.Leave イベントを処理する：編集完了時に入力を検証します
3. AutoScroll を有効にする：項目が多いリストで、内容のはみ出しを防ぎます
4. 一貫したテーマを適用する：フォーム内のすべてのコントロールで同じ Style を使用します
5. 埋め込みコントロールにアクセスする：Button、TextBox、ListBox を設定して、細かくカスタマイズします
6. オートコンプリートを検討する：予測可能な入力でユーザーエクスペリエンスが向上します
7. 編集の流れをテストする：クリックして編集する動作がスムーズに機能することを確認します
8. 適切なサイズを設定する：項目を快適に表示・編集できるよう、十分な高さを確保します

トラブルシューティング

問題：項目を編集できない → 適切にフォーカスが処理されていることを確認し、TextBox にアクセスできるか確認します

問題：スクロールバーが表示されない → AutoScroll = true を設定し、AutoScrollMinSize を構成します

問題：テーマが適用されない → Style プロパティが設定されていること、および Office2016 スタイルでは Office2016ColorScheme が設定されていることを確認します

問題：オートコンプリートが機能しない → Form_Load で AutoComplete.SetAutoComplete() が正しいパラメーターで呼び出されていることを確認します

問題：編集中にボタンが表示されない → WantButton = true プロパティを設定します