PR

DataGridへのデータの追加と削除

2010年8月23日(月)
PROJECT KySS

2週間の間隔が空きましたが、今日から「続・これからはじめるSilverlight 4」の後編(5回)の始まりです。前回の5回で、少しはSilverlight 4の凄さを実感していただけましたか?「面白そうだから、Silverlight 4をやってみようかな。。。」という気持ちに、少しでもなっていただければ幸いです。

MyDocumentsフォルダ内のXMLデータに新規にデータを追加し、DataGridに反映する

今回紹介するのは、MyDocumentsフォルダ内のXMLデータを読み込んでDataGridに表示し、新規に「氏名、年齢、住所、勤務先」のデータを追加し、DataGridコントロールに反映させるサンプルです。このサンプルは信頼されたTrustedモードのブラウザ外実行で動作します。SL4_DataGridSaveプロジェクトの、sampleDataフォルダ内にあるsampleData.xmlファイルをC:\ユーザー¥ユーザー名\MyDocuments(マイドキュメント)フォルダ内にコピーしておいてください。sampleData.xmlの構造はリスト1のようになっています。

リスト1: C:\ユーザー¥ユーザー名\MyDocuments(マイドキュメント)フォルダ内に置くsampleData.xmlの構造

実装する機能の動作は次の通りです。

「氏名、年齢、住所、勤務先」の入力ボックスにデータを入力し、[OK]ボタンをクリックすると、入力されたデータがXML化されて、MyDocuments内のsampleData.xmlに追加されます。追加されたXMLが再読み込みされ、DataGridコントロールに新規データが追加表示されます(図1)。追加されたXMLデータがDataGridコントロールに反映されない場合は、一度DataGrid内をクリックすると反映されます。また、削除したいデータを選択して、マウスの右クリックで表示される「削除」メニューで、指定したデータが削除できます(図2)。データを削除する場合は、必ず選択された行の先頭に三角マークが表示されて、行が選択されているのを確認してから削除してください。

図1: 追加されたデータがDataGridに反映されている(クリックで拡大)

図2: マウスの右クリックで表示される「削除」からデータを削除した(クリックで拡大)

サンプル・ファイルはこちらからダウンロードできます。

コントロールのレイアウトと、Trustedモードの設定

前回までのサンプル作成時と同様の手順で、新規Silverlight 4プロジェクト(プロジェクト名は「SL4_DataGridSave」)を作成し、プロジェクト依存関係も設定しておきます。また、XMLデータはLINQ to XMLで処理するため、「プロジェクト(P) > 参照の追加(F)」からSystem.Xml.Linqを追加しておきます。

ダウンロード・ファイルで、MyDocuments内に置くXMLファイルはsampleDataフォルダ内に収録しています。

UserControlのプロパティ内の[レイアウト]を展開して、Widthに800、Heightに600を指定します。ツールボックスから、まずDataGridコントロールを左側にレイアウトします。

今回はマウスの右クリックでメニューを表示させる際に、Canvas.TopとCanvas.Leftの値が必要になりますので、LayoutRootのに変更しておきます。

DataGridの[共通]プロパティから、Columnsプロパティの横にある、[…]ボタンをクリックして、「コレクションエディター」を起動します。[Add]ボタンで、DataGridTextColumnを4つ追加し、[共通]プロパティ内のHeaderにヘッダ名を指定します。上から順に「氏名、年齢、住所、勤務先」と指定していきます。[その他]を展開して表示されるSortMemberPathプロパティにFalseを指定し、ヘッダをダブルクリックした際のソートを禁じておきます(図3)。

図3: HeaderとSortMemberPathプロパティを設定した(クリックで拡大)

図3の状態から[OK]ボタンをクリックすると、ヘッダのついたDataGridが表示されます。このDataGridを選択し、[可視性]プロパティ内の、HeadersVisibilityに「All」を指定します。DataGridの先頭に選択列が1列追加されます。

次に右側にデータの入力ボックスをレイアウトします。まずBorderコントロールをレイアウトし、[共通]プロパティ内のBorderThicknessに3を指定して枠線を少し太くし、CornerRadiusに12を指定し、4隅を丸く縁取ります。

この要素内にリスト2のようにコードを記述し、2列4行のGridを作成します。表示されるGridの線をドラッグして適当な列幅に設定してください(図4)。

リスト2: 要素内に2列4行のGridを作成するコード(MainPage.xaml)

図4: Borderコントロール内に2列4行のGridを作成した

作成したGridの1列目にLabelコントロールをレイアウトし、項目名を指定します。2列目には入力用のTextBoxコントロールをレイアウトします(図6)。Borderコントロールの下方にButtonコントロールを1個レイアウトします。「年齢」のTextBox(ageTextBox)のTextプロパティに0と指定しておきます。またButton(Button1)コントロールのContentプロパティには「OK」と指定しておきます。

次にツールボックスからContexMenuを適当な場所にドラッグドロップします。ツールボックスにContextMenuコントロールは登録されていません。このように必要なコントロールが登録されてない場合は、手動で登録します。詳細については、「これからはじめるSilverlight 4」の第2回を参照してください。

ContextMenuの[共通]プロパティ内のItemsの横にある、[…]ボタンをクリックして、「コレクションエディター」を起動します。[Add]ボタンでMenuItemを1個追加し、[共通]プロパティ内のHeaderに「削除」と指定します。をクリックして選択し、文字のサイズを、それぞれ14に設定して、少し大きくしておきましょう。

ソリューションエクスプローラ内の「SL4_DataGridSave」を選択し、マウスの右クリックで表示されるメニューから、「追加(D) > 新しいフォルダー(D)」を選択し、新規フォルダを作成します。フォルダ名はデフォルトのNewFolder1ではなくImageに変更しておきましょう。作成したフォルダ上を右クリックして表示される[メニューから「追加(D) > 既存の項目(G)」を選択して、アイコン用の画像を追加します。ダウンロードできるサンプルには画像ファイルは追加済みです。

書き出されるContextMenuのXAMLをリスト3のように編集し、あらかじめソリューションエクスプローラ内のImageフォルダに取り込んでおいた画像を、プロパティ要素内に要素を記述して、Sourceプロパティに指定します。

リスト3: 要素に画像を指定するXAML(MainPage.xaml)

要素の子要素としてプロパティ要素を記述します(1)。さらに、その子として要素を記述し、SourceプロパティにImageフォルダ内の画像を指定します(2)。これで項目名の横にアイコンが表示されるようになります(図5)。要素のClickイベントに、SelectData_Deleteというイベントハンドラを指定します(3)。

図5: ContextMenuに画像を追加した

図6: Borderコントロール内のGrid内にLabelとTextBoxをレイアウトし、その下方にボタンを1個レイアウトした。ContextMenuコントロールもこの時点では適当な位置にレイアウトしている

このサンプルは信頼されたTrustedモードのブラウザ外実行で動作させます。VS 2010のメニューから「プロジェクト(P) > SL4_DataGridSaveプロパティ(P)」を選択し、「アプリケーションのブラウザ外実行を有効にする(B)」にチェックを付けます。さらに、[ブラウザ外実行の設定(S)]をクリックして表示される「ブラウザ外実行の設定」画面で、「ブラウザ外での実行時に昇格された信頼を要求する(E)」にチェックを付けます。

詳しい設定の手順および、デバッグの手順については、本連載第4回の記事を参照してください。

  • 1

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています