DataGridコントロールへの新規データの追加

最終回の今回は、DataGridに新規データを追加する処理を作成します。入力ボックスがDataGridの下方に表示され、データを入力して[追加]ボタンをクリックすると、DataGridに新規データが追加されます。

はじめに、第2回の図16の[更新]、[キャンセル]ボタンの横に、[追加]ボタンを追加します。次にデータの追加画面を表示させるために、StackPanelコントロールをレイアウトします（図1）。このStackPanelコントロールにSilverlightユーザーコントロールで定義した入力ボックスが表示されます。

入力ボックスをレイアウトするための「Silverlightユーザーコントロール」を追加します。VS2010メニューの「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Silverlightユーザーコントロール」を選択します。「名前(N)」はデフォルトの「SilverlightControl1.xaml」のままにしておきます。[追加(A)]ボタンをクリックします（図2）。

SilverlightControl1.xamlの要素のWidthとHeightを適当なサイズに設定します。

次に、「データソース」のudonを展開し、表示される項目の「ID」に「なし」を選択します（図3）。「ID」は自動的に番号が振られますので、入力ボックスは不要となります。

udonのコントロールがデフォルトでDataGridになっているのを、「詳細」に変更します（図4）。

設定したudonをSilverlightControl1.xamlのデザインフォーム上にドラッグ&ドロップします（図5）。

デザインフォーム上に項目名とTextBoxの表示された、入力ボックスがレイアウトされます（図6）。

図6を見ると項目名の並びがばらばらになっています。「品名、画像、価格」の並びにするには、SilverlightControl1.xaml内の、リスト1のコードをリスト2のように修正します。

リスト1　編集前のSilverlightControl1.xaml