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

第1回では、SQL Serverデータベースの作成と、ADO.NET Entity Data Modelの作成、Domain Service Classの作成を行いました。今回は「データソース」内に作成されたudonデータソースを、MainPage.xamlのデザイン画面上にドラッグ&ドロップすることで、「ID、品名、画像、価格」ヘッダの追加されたDataGridを作成します。このDataGridにはSQL Server データベースの各項目がバインドされます。また、DataGridに表示されるデータの編集と更新を可能にします。

• ※最初の時点ではヘッダの項目名は、Database1.mdfと同じ項目順にはなっていません。

まずは、MainPage.xamlを表示し、「データソース」内のudonをMainPage.xaml内にドラッグ&ドロップします（図1）。

自動的にDataGridが追加されますので、適当にDataGridのサイズや文字のサイズを調整します。あらかじめタイトル用のTextBlockをレイアウトし、Textプロパティに「WCF RIA Services」と指定しています（図2）。

では、ここで一度「デバッグ(D)／デバッグ開始(S)」と選択して、デバッグを実行します。図3のようにDataGridにデータが表示されます。

ここまではコーディングなしで作成することができます。図3を見るとわかりますが、ヘッダ項目の並びがDatabase1.mdf内の並びと異なっています。項目の並びはアルファベット順、あいうえお順になっているようです。項目の並びをDatabase1.mdfと同じに設定してみましょう。同時に、項目の幅も設定しておきましょう。XAMLコードを変更するだけで簡単にできます。

ヘッダ項目の並びと幅を変更する

リスト1のMainPage.xaml内のDataGridの個所を、リスト2のように書き換えます。

リスト1 編集前のMainPage.xaml

リスト2　編集したMainPage.xaml

ここで、DataGridコントロールを選択し、[レイアウト]プロパティ内のWidthにAutoを指定しておきます。こうすることで、データ量によってDataGridコントロールの幅が自動調整されます。

実行すると図4のようになります。

DataPagerコントロールと関連付けてページングを可能にする

ツールボックスからDataPagerコントロールをドラッグ&ドロップして追加します（図5）。DataGridの1ページに表示するデータ件数を3件とするため、DataGridのHeightを245に設定します。

次に、「データソース」からudonをDataPagerコントロールの上にドラッグ&ドロップします（図6）。

DataPagerコントロールの[その他]プロパティ内のPageSizeプロパティに3を指定し（図7）、1ページに表示されるデータ件数を3件とします。

「画像」列に「うどん」の画像を表示する。

図4を見ると「画像」列には、Imageフォルダーと画像ファイル名の連結された文字列が表示されています。この「画像」列に「うどん」の画像を表示させます。MainPage.xamlをリスト3のように要素内を書き換えます。

リスト3：「画像」列に「うどん」の画像を表示させるXAML（MainPage.xaml）

では、ここで「デバッグ(D)／デバッグ開始(S)」と選択して、デバッグを実行します。図8のようにDataGridに3件のデータと「うどん」の画像が表示されます。

図8からナビゲーションアイコンをクリックして、次のページを表示させようとすると、エラーが表示されます（図9）。

エラーメッセージの内容を読むと、GetUdonメソッドに問題があるようです。DomainService1.vbでデータを取り出すGetUdonメソッドを確認してみましょう。リスト4のように記述されています。

リスト4　DomainService.vb内のGetUdonメソッド

図9のエラーメッセージを見ると、ここにOrderByの指定が必要なようです。ID順に表示されるよう、OrderByを追加します（リスト5）。

リスト5 ID順で表示されるよう、OrderByを追加したコード

では、再度実行してみましょう。今回はページングが問題なく動作します（図10）。