syncfusion-winforms-multicolumn-listbox

GridList Control の実装

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

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

• ヘッダー付きで項目を複数列形式で表示する
• Windows Forms アプリケーションでデータバインドされたリストコントロールを作成する
• リストビューで単一選択または複数選択を実装する
• ComboBoxBase を使用して複数列のドロップダウンコントロールを作成する
• リストの外観（色、グリッド線、ヘッダー、背景）をカスタマイズする
• 仮想モードを使用して大規模なデータセットを処理する
• リストコントロールにツールチップ、数式、またはタッチ操作のサポートを追加する
• 標準の ListBox から高度な複数列リストビューに移行する

コンポーネントの概要

GridListControl は、標準の ListBox コントロールよりも豊富なデータ表示機能を提供する、Windows Forms 用の複数列リストビューコンポーネントです。グリッドのような機能とリストの動作を組み合わせ、デスクトップアプリケーション向けの強力な機能を備えています。

主な機能：

• カスタマイズ可能なヘッダー付きの複数列表示
• あらゆるデータソース（ArrayList、DataTable、カスタムオブジェクト）へのデータバインド
• 3 種類の選択モード：単一、複数（シンプル）、複数（拡張）
• 豊富なスタイル設定（色、グリッド線、背景、画像）
• ドロップダウン用途向けの ComboBoxBase との連携
• 大規模なデータセットを高性能に処理する仮想モード
• 計算値に対応する数式サポート
• タッチ操作とキーボード操作によるナビゲーション
• 列と行のサイズ変更
• セル単位のツールチップ

主な機能

• データの読み込み - データベース、コレクション、カスタムオブジェクトなど、あらゆるデータソースにバインドします
• スタイル設定 - セルのスタイル、色、フォント、グリッド線、背景をカスタマイズします
• 選択 - キーボード操作に対応した単一行および複数行の選択
• ツールチップ - セルにポインターを合わせたときにテキストを表示します
• サイズ変更 - コンテンツに応じて列と行のサイズを自動調整します
• ビジュアルスタイル - 複数の組み込みテーマとカスタムスタイル設定
• 仮想モード - パフォーマンスを最適化するため、必要に応じてデータを読み込みます
• 数式 - 代数式と算術式に対応します
• ドロップダウン - ComboBoxBase と組み合わせて複数列のドロップダウンを作成します
• タッチ操作のサポート - タッチデバイスでの選択とスワイプに対応します

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

はじめに

📄 参照先： references/getting-started.md

• アセンブリの配置と依存関係
• デザイナーによる GridListControl の追加（ドラッグ＆ドロップ、SqlDataAdapter ウィザード）
• コードによる GridListControl の追加（プログラムによるセットアップ）
• 基本的な構成プロパティ（DataSource、MultiColumn、ShowColumnHeader）
• 初期データバインドの例
• デザイナーとコードによる方法の比較

データバインドと選択モード

📄 参照先： references/data-binding-selection.md

• データバインドの概要と DataSource プロパティ
• ArrayList とカスタムオブジェクトへのバインド
• DataTable/DataSet を使用したデータベースへのバインド
• 選択モードの種類（One、MultiSimple、MultiExtended）
• SelectionMode プロパティの設定
• 複数選択（拡張）モードでのキーボードナビゲーション
• 選択した項目の取得（SelectedIndex、SelectedItem）

カスタマイズとスタイル設定

📄 参照先： references/customization.md

• TransparentBackground プロパティ
• グリッド線の表示（DisplayVertLines、DisplayHorzLines）
• GridLineColor のカスタマイズ
• ヘッダーの外観（Buttons3D、HeaderBackColor、HeaderTextColor）
• コントロールの BackColor と BackgroundImage
• ビジュアルスタイルとテーマ設定
• タッチ操作サポートの設定
• 列と行のサイズ変更
• ツールチップの設定

ComboBoxBase との連携

📄 参照先： references/combobox-integration.md

• GridListControl と ComboBoxBase の組み合わせ
• ListControl プロパティの設定
• 複数列のドロップダウン表示の作成
• DropDownWidth の設定
• ドロップダウンリストの使用例
• 連携コードの例

クイックスタートの例

データバインドを使用した基本的な複数列リスト

using Syncfusion.Windows.Forms.Grid;
using System.Collections;

// Create data source
ArrayList states = new ArrayList();
states.Add(new StateInfo { LongName = "California", ShortName = "CA" });
states.Add(new StateInfo { LongName = "Texas", ShortName = "TX" });
states.Add(new StateInfo { LongName = "New York", ShortName = "NY" });

// Configure GridListControl
gridListControl1.DataSource = states;
gridListControl1.MultiColumn = true;
gridListControl1.ShowColumnHeader = true;
gridListControl1.SelectionMode = SelectionMode.One;
gridListControl1.FillLastColumn = true;

// Custom class for data
public class StateInfo
{
    public string LongName { get; set; }
    public string ShortName { get; set; }
}

ComboBoxBase を使用した複数列ドロップダウン

// Setup GridListControl
gridListControl1.DataSource = dataSource;
gridListControl1.MultiColumn = true;

// Attach to ComboBoxBase for dropdown
comboBoxBase1.ListControl = gridListControl1;

よく使われるパターン

デザイナーを使用したセットアップ

1. ツールボックスから SqlDataAdapter をドラッグ → データベース接続を構成
2. アダプターから DataSet を生成
3. GridListControl をフォームにドラッグ
4. DataSource プロパティを DataSet に設定
5. プロパティ ウィンドウで表示プロパティを構成

コードを使用したセットアップ

1. データソース（ArrayList、List、DataTable）を作成
2. GridListControl を初期化
3. DataSource プロパティを設定
4. MultiColumn、ShowColumnHeader を構成
5. SelectionMode を設定
6. 必要に応じて外観をカスタマイズ

大規模なデータセット向けの仮想モード

// Enable virtual mode for performance
gridListControl1.VirtualMode = true;

// Implement on-demand data loading
// (Refer to customization.md for details)

主なプロパティ

データと表示

• DataSource - リストのデータソース（ArrayList、DataTable、IList）を設定します
• MultiColumn - 複数列の表示を有効にします（デフォルト：false）
• ShowColumnHeader - 列ヘッダーの表示／非表示を切り替えます（デフォルト：false）
• FillLastColumn - 最後の列を残りのスペースに合わせて広げます（デフォルト：false）

選択

• SelectionMode - 選択動作を制御します：
  • SelectionMode.One - 単一行のみ選択
  • SelectionMode.MultiSimple - 複数行を選択。クリックで選択状態を切り替え
  • SelectionMode.MultiExtended - SHIFT／CTRL／矢印キーで複数行を選択

外観

• BackColor - コントロールの背景色
• TransparentBackground - 背景を透明にします（デフォルト：false）
• HeaderBackColor - 列ヘッダーの背景色
• HeaderTextColor - 列ヘッダーの文字色
• BackgroundImage - コントロールの背景画像

グリッド線

• Properties.DisplayHorzLines - 水平グリッド線を表示します
• Properties.DisplayVertLines - 垂直グリッド線を表示します
• Grid.Properties.GridLineColor - グリッド線の色
• Properties.Buttons3D - 3D スタイルのヘッダーを描画します

高度な設定

• VirtualMode - パフォーマンス向上のため、必要に応じたデータ読み込みを有効にします
• ImageList - リスト項目に画像を関連付けます
• ToolTip - セルのツールチップを構成します

主なユースケース

1. データベースレコードビューアー

データベースレコードをヘッダー付きの複数列リストに表示し、ユーザーがレコードを閲覧、選択できるようにします。

使用する場面： データの閲覧、レコードの選択、マスター／詳細ビュー

2. 複数列のドロップダウンセレクター

ComboBoxBase と組み合わせて、複数列（例：顧客名＋ID＋市区町村）を表示するドロップダウンリストを作成します。

使用する場面： 複雑な選択シナリオ、ルックアップフィールド、豊富なデータを表示するピッカー

3. カテゴリー別項目リスト

項目の複数の属性（名前、カテゴリー、価格、ステータス）を構造化されたリスト形式で表示します。

使用する場面： 商品カタログ、在庫管理、注文リスト

4. 選択インターフェイス

視覚的なフィードバックを伴う、単一または複数項目の選択が必要なインターフェイスを構築します。

使用する場面： 一括操作、複数選択フォーム、チェックリスト UI

5. タッチ対応リスト

タブレットやタッチスクリーンのアプリケーション向けに、タッチ操作に適したリストコントロールを作成します。

使用する場面： キオスクアプリケーション、タブレットアプリ、タッチ操作に最適化された UI

6. 大規模データセットのブラウザー

仮想モードを使用して、数千項目のデータセットを効率的に表示、操作します。

使用する場面： ログビューアー、大規模なデータベーステーブル、大量のデータ

選択ガイド

次のような要件がある場合は GridListControl を選択してください：

• ✅ 複数列のリスト表示
• ✅ 列ヘッダー
• ✅ オブジェクト／データベースへのデータバインディング
• ✅ 高度な選択モード
• ✅ グリッド風のスタイル
• ✅ ComboBoxBase ドロップダウンとの連携
• ✅ パフォーマンス向上のための仮想モード

次のような場合は標準の ListBox を使用してください：

• ❌ 単一列のシンプルなリストで十分
• ❌ ヘッダーが不要
• ❌ スタイル要件が最小限
• ❌ シンプルなデータ表示のみ

ベストプラクティス

1. パフォーマンス

   • 1000 件以上のデータセットには仮想モードを使用します
   • 不要な場合はグリッド線を無効にして、描画を高速化します
   • 複数のプロパティを変更する場合は、BeginUpdate/EndUpdate を使用します

2. データバインディング

   • バインドする前にデータソースを検証します
   • 型安全性を確保するため、型指定されたコレクション（List）を使用します
   • データの変更を適切に処理します（更新、再バインド）

3. 選択

   • ユーザーのワークフローに適した SelectionMode を選択します
   • MultiExtended は最も柔軟ですが、ユーザーへのトレーニングが必要です
   • One は単一選択のシナリオに最適です

4. スタイル設定

   • アプリケーション全体で一貫したビジュアルテーマを適用します
   • TransparentBackground はパフォーマンスへの影響に注意して使用します
   • カスタムカラーの読みやすさをテストします

5. 統合

   • ComboBoxBase と併用する場合は、先に GridList を設定します
   • バインドする前に、データソースの準備ができていることを確認します
   • ComboBoxBase ではなく、親フォームで選択イベントを処理します

トラブルシューティング

よくある問題：

GridListControl にデータが表示されない

• DataSource が設定され、null ではないことを確認します
• 複数列で表示する場合は、MultiColumn = true になっていることを確認します
• データソースに項目が含まれていることを確認します

ヘッダーが表示されない

• ShowColumnHeader = true に設定します
• ヘッダーの色が背景色と一致していないか確認します

選択できない

• SelectionMode が None ではないことを確認します
• コントロールが有効になっていることを確認します
• コントロールにフォーカスがあることを確認します

パフォーマンスの問題

• 大規模なデータセットには仮想モードを有効にします
• 不要な機能（グリッド線、ツールチップ）を無効にします
• 一括変更には BeginUpdate/EndUpdate を使用します

詳細なトラブルシューティングや高度なシナリオについては、リファレンスファイルを参照してください。

次のステップ

はじめに から始めて GridListControl をインストールおよび設定し、アプリケーションの要件に応じて、上記のナビゲーションガイドから各機能を確認してください。