DataGridコントロールの追加と、データの編集、更新

編集時に「画像」列にComboBoxを表示する、クラスの定義

DataGridコントロール内の「画像」の列を編集するとき、ComboBoxを表示させて、画像の一覧（Imageフォルダーと連結した画像のファイル名）を選択させるようにします。

まず、クラス内に、ComboBoxコントロールに表示させる、画像のファイル名を値として持つプロパティを定義します。このクラスは、データの修正、データの追加の両方に使用します。VS2010メニューの「プロジェクト(P)／クラスの追加(C)」と選択します。「新しい項目の追加」画面が表示されますので、「クラス」を選択し、「名前(N)」にはAddImage.vbと指定します。[追加(A)]をクリックします（図18）。

表示されるAddImage.vb内にリスト6のコードを記述します。

リスト6　Imageフォルダーと「うどん」の画像ファイル名を連結した、UdonInfoクラスを定義したAddImage.vb

次に、MainPage.xamlコード内をリスト7のように編集します。

リスト7　編集されたMainPage.xaml

リスト6のAddImage.vbクラスで定義したクラスを参照するために、名前空間を宣言します。ここでは、kyssという名前空間を定義しています。xmlns:kyss=””と入力すると、名前空間の候補が表示されますので、今回作成しているプロジェクト名の名前空間を選択します(図19（１）)
次に、プロパティ要素内で、リスト6のAddImage.vbで定義したクラスを参照します（２）。

ここで定義したResourcesを（４）の要素内のItemsSourceプロパティのSourceでSource={StaticResource UdonInfo}と記述して、参照させます。

（３）のプロパティ要素は、編集モードでないセルの内容を表示するときに使用するテンプレートです。よって、通常の状態では、「画像」列内には、要素が記述されSourceプロパティに「画像」がバインドされていますので、SQL Serverデータベースに記述された画像ファイルに該当する、「うどん」の画像が表示されます。

ダブルクリックで編集状態になったとき、ComboBoxを表示させます。それには、（４）のプロパティ要素内に、要素を記述し、中に要素を記述します。

SelectedItemプロパティに"{Binding 画像,Mode=TwoWay}"と指定します。この記述で、SQL Serverデータベース内に記述されている画像ファイル名がComboBox内で選択された状態になります。ModeにはTwoWayを指定します。

「ToWay」はバインディング・ソースかバインディング・ターゲットのどちらか一方のデータが変更されると、もう一方も自動的に更新されることを意味します。

ItemsSourceプロパティには、"{Binding udonList, Source={StaticResource UdonInfo}}"と指定します（４）。Bindingに指定しているudonListは、リスト6のAddImage.vbで、UdonInfoクラス内で定義したプロパティ名です。SourceにはStaticResourceを用いて、（２）で定義している、KeyがUdonInfoのResourceを参照します。

StaticResourceは定義済みのリソースを参照します。プロパティ要素は、編集モードのセルの内容を表示するときに使うテンプレートです。これで、編集時に、Imageフォルダーと「うどん」のファイル名を連結した文字列の表示された、ComboBoxが現れます。

では、ここで一度実行し、編集状態時にComboBoxが表示され、「うどん」画像の更新が可能になるかを確認しておきましょう。図21のように編集時にComboBoxが表示されます。品名と画像を変更して、[更新]ボタンをクリックします。「うどん」画像が変更され、SQL Server データベース内にも変更が反映されているのがわかります（図22）。

次回、最終回ではSQL Serverデータベースに新規にデータを追加する処理を解説します。

------------------------------------------------------------------------

• 編集部注：文中に一部誤りがあったため、修正を行いました。（2010/11/19）