Copyright © GrapeCity inc. All rights reserved.
True DBGrid for WinForms
チュートリアル10: セル内ビットマップを使ってユーザーインタフェースを強化する
チュートリアル > チュートリアル10: セル内ビットマップを使ってユーザーインタフェースを強化する

このチュートリアルでは、 ValueItems オブジェクトとValueItemオブジェクトのコレクションの使用方法を学びます。コードを1行も記述しないで、セルにビットマップやチェックボックスを表示します。

以下の手順を実行します。

  1. チュートリアル7: 組み込みコンボを使って変換データを表示する で使用したプロジェクトから始めます。
  2. Visual Studio のプロパティウィンドウで、Columns プロパティの横にある省略符ボタンをクリックします。C1TrueDBGrid デザイナが表示されます。
  3. How列を選択し、C1TrueDBGrid デザイナの左ペインで Caption プロパティを方法に設定します。同様に、連絡済み列の Caption プロパティを連絡?に設定します。
  4. この2つの列のHorizontalAlignment プロパティを、ビットマップが各セルの中央に配置されるように変更します。Visual Studio のプロパティウィンドウで、Splits プロパティの横にある省略符ボタンをクリックして、SplitCollection エディタを開きます。次に、このエディタで、DisplayColumn プロパティの横にある省略符ボタンをクリックして、C1DisplayColumnCollection エディタを開きます。左ペインで方法列を選択し、右ペインで Styles プロパティの横にある展開アイコンをクリックします。この列の Styles オブジェクトの下で、HorizontalAlignment プロパティを Center に設定します。同様に、連絡?列の HorizontalAlignment プロパティを設定します。
  5. 次に、選択した列にビットマップとチェックボックスを割り当てるために、対応する ValueItems オブジェクトにデータを挿入します。列1のビットマップから始めます。 Visual Studio のプロパティウィンドウで、Columns プロパティの横にある省略符ボタンをクリックして、C1TrueDBGrid デザイナを開きます。左ペインで「方法」列を選択し、右ペインで Value item オブジェクトの横にある展開アイコンをクリックします。Values プロパティの横にある省略符ボタンをクリックして、ValueItemsエディタを開きます。
  6. 左ペインの〈追加〉ボタンをクリックして、新しい ValueItem オブジェクトを3つ作成します。ContactTypeフィールドの有効な値は、0,1 と 2 で、それぞれ電話、メール、担当者を表します。これらの値の代わりにビットマップをセルに表示します。本製品の内容をすべてインストールしている場合は、True DBGrid for WinForms のインストールディレクトリの Tutorial10 サブディレクトリに、PHONE.BMP, MAIL.BMP, と PERSON.BMPM.BMP があります
  7. 右ペインで、最初の ValueItem の値として0を入力し、DisplayValue プロパティボックスの省略符ボタンをクリックします。これにより、セルに表示する画像ファイルを検索できます。True DBGrid for WinForms のインストールディレクトリの Tutorial10 サブディレクトリにある Phone.bmp ファイルを見つけます。同様に、もう一つの ValueItem オブジェクトを設定します。Value を 1 に、DisplayValue を Person.bmp に設定します。C1TrueDBGrid デザイナValueItems オブジェクトに戻り、Translate プロパティと CycleOnClick プロパティを True に設定します。
  8. 次に、列3のチェックボックスを設定します。C1TrueDBGrid デザイナの左ペインで、連絡済列を選択します。右ペインで、ValueItems オブジェクトを展開し、Presentation プロパティを CheckBox に設定します。これにより、列のブール値がチェックボックスとして表示されます。最後に、同じオブジェクトの下で、Translate プロパティと CycleOnClick プロパティを True に設定します。

プログラムを実行し、次の動作を確認します。

これでチュートリアル 10 は終了です。