RIAにおける、外部入力データの処理第1回

画面のレイアウトと画像の追加

コントロールのレイアウト

VS2010のToolbox（ツールボックス）から今回用いるコントロールをドラッグして、図7のようにレイアウトしてください。

このサンプルでは、ペン書きのためにInkPresenterコントロールを使います。このコントロールがToolboxに登録されていない場合は、手動で登録します。手動で登録します。Toolboxの「Common Silverlight Controls」のタブ上でマウスを右クリックして表示されるショートカット・メニューから、「Choose Items…」を選択してください「Choose Toolbox Items」ウインドウに表示されるコントロールのうち、InkPresenterにチェックを付けます。

図7：コントロールのレイアウト。VS2010のデザイン画面（クリックで拡大）

XAMLコードの編集

コントロールのレイアウトができたら、MianPage.xamlをダブルクリックして開き、ソースを編集します。"displayCapture"という名前のRectangle と、"Photo"という名前のImageは、"InkPresenter1"という名前のInkPresenterの子要素となるように変更してください。これは、「クリップ」ボタンをクリックした時の処理で、InkPresenterを指定することにより、子要素のRectangleとPhotoに指定されている動画と追加画像を、一括して切り出すためです。

また、ComboBox内の画像の候補を表示させるため、～を追加してください。KeyにComboBoxTemplateと指定し、要素のItemTemplateにItemTemplate="{StaticResource ComboBoxTemplate}"と指定します。StaticResourceは定義済みのリソースを参照します。

最終的に、リスト2のようになるよう、編集してください。

リスト2　編集したXAMLコード（MainPage.xaml）