続・これからはじめるSilverlight 4 第10回

VS 2010のデザイン画面上で、コントロールをレイアウトする

これまでのサンプル作成時と同様の手順で、新規Silverlight 4プロジェクト（プロジェクト名は「SL4_DataGrid_RowCopy」）を作成してください。プロジェクトの依存関係も設定してください。

次に、画像のファイル名を記録したXMLファイル（リスト1）を追加します。XMLデータはLINQ to XMLで処理するため、「プロジェクト（P） > 参照の追加（F）」からSystem.Xml.Linqを追加しておきます。

ソリューションエクスプローラ内にImageというフォルダを作成して、アイコン用の画像も追加しておきます。ダウンロードされたサンプル・ファイルにはXMLファイル、画像は追加済みです。

リスト1: XML文書ファイル（sampleData.xml）

UserControlのプロパティ内の[レイアウト]を展開して、Widthに800、Heightに600を指定します。今回はマウスの右クリックでメニューを表示させる際に、Canvas.TopとCanvas.Leftの値が必要になりますので、LayoutRootのを

次にツールボックスからTextBlockを2個、DataGrid、TextBox、ContextMenu、Buttonコントロールを1個ずつレイアウトします。ツールボックスにContextMenuコントロールが登録されていない場合は、第1回を参考にして登録してください。

まずDataGridを選択し、[共通]プロパティ内のColumnsの横にある[…]ボタンをクリックし、「コレクションエディター」を起動します。[Add]ボタンでDataGridTextColumnを4個追加し、Headerプロパティに上から順に「氏名、年齢、住所、勤務先」と指定します。[OK]ボタンをクリックすると、ヘッダの追加されたDataGridが表示されます。次に、DataGridの[可視性]プロパティから、HeadersVisibilityにAllを指定します。列の先頭に1列選択列が追加されます。DataGridの[その他]プロパティから、ClipboardCopyModeがExcludeHeaderになっているのを確認してください。このプロパティは、DataGrid のコンテンツをクリップボードにコピーできることを示しますが、列ヘッダはコピーされません（図5）。IncludeHeaderの場合はヘッダもコピーされます。IncludeHeader を試す場合は、DataGridの項目をマルチ選択し、[CTRL]+CでコピーしTextBoxの中に貼り付けてください。空白区切りでヘッダ部分も貼り付けられます。[CTRL]+Cではなく、マウスの右クリックで表示される、自前の「コピー」では、IncludeHeaderを指定していても、ヘッダ部分は表示されません。

図5: ClipboardCopyModeにExcludeHeaderを指定する

次に、ContextMenuの[共通]プロパティからItemsの横にある[…]ボタンをクリックして、「コレクションエディター」を起動します。[Add]ボタンでMenuItemを2個追加し、プロパティのHeaderに上から「コピー」、「貼り付け」と指定します。を選択し、文字のサイズを、14に設定して、少し大きくしておきましょう。

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

リスト2: 要素に画像を張り付けるXAML（MainPage.xaml）

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

TextBoxコントロールを選択し、[その他]プロパティのAcceptsReturnにチェックを付け、複数行の入力を可能としておきます。また、データ量が多い場合は、自動的に縦スクロールバーが表示されるよう、VerticalScrollBarVisibilityにAutoを指定しておきます。

「保存」用のButtonコントロールは初期状態では使用不可としておきます。[共通]プロパティの内のIsEnabledのチェックを外しておきます。

すべて設定すると図6のようになります。

図6: すべてのコントロールのプロパティを設定した（クリックで拡大）

書き出されるXAMLコードをリスト3のように編集します。

リスト3: 編集されたXAMLコード（Mainpage.xaml）

要素の親として、要素を追加し、ContextMenuを非表示状態にします。このContextMenuServiceは、ContextMenu を表示するためのシステム実装を提供するものです。さらに、要素を、要素の子要素にします（1）。要素は、必ず、親である要素ごと要素内に記述する必要があります。これによって、DataGridコントロール内で右クリックした場合に限り、Silverlight標準の「Silverlight（S）」メニューは表示されず、ContextMenuが表示されるようになります。TextBox内で、マウスの右クリックで「貼り付け」のメニューを表示させるには、xaml.vbコード内で設定します。