注意
この記事は2008年6月25日に公開しましたが,2008年9月9日に更新しました。この記事のコードはSilverlight Beta 2をもとにしています。そのため,2008年秋にリリース予定の正式版では,そのままのコードでは動作しない可能性があります。

記事中のサンプル・コードをこちらからダウンロードできます。

 今回は,Silverlight 2のHTML(Hypertext Markup Language) DOM(Document Object Model)やJavaScriptとの統合,Webサービスの利用,Silverlight 2の特徴であるデータグリッド・コントロールの使用を解説します*1

SilverlightとWebブラウザの統合

 SilverlightはWebブラウザのプラグインですから,SilverlightアプリケーションからWebブラウザを制御したり,逆にWebブラウザからSilverlightアプリケーションを制御したりできます。HTML DOMとのインタラクションも可能なので,文書(ドキュメント)とSilverlightを組み合わせて使うこともできます。簡単な例でそれぞれの機能を見ていきましょう。

SilverlightとHTML DOMの連携

 まず,HTML DOMとの連携です。Visual Studio 2008でSilverlightアプリケーションのテンプレートから新規プロジェクトを作成してください。ここではプロジェクト名をBrowserIntegrationとしました。

図1●リスト1の表示結果
図1●リスト1の表示結果

 まず,Webブラウザのサイズに合わせてSilverlightの描画領域の大きさを変えられるようにしましょう。Silverlightテンプレートで作成されたプロジェクトでは,ブラウザのサイズと無関係に,幅400ピクセル(画素),高さ300ピクセルの固定サイズです。これを可変にするにはPage.xamlのUserControlにあるWidthとHeightプロパティを削除します。リスト1のようにUserControlタグを書き換えて,Silverlightの描画領域をわかりやすくするように,背景色を指定する「Background」プロパティをYellowに変更し,マージンを指定する「Margin」プロパティを追加しています。また,あとで使うために,マウス左ボタンをクリックした際のイベントハンドラ「MouseLeftButtonDown」も追加しています。F5キーを押して,図1のような画面が出ることを確認してください。

リスト1●サイズの指定を取り除き,イベントハンドラを追加する(Page.xaml)
リスト1●サイズの指定を取り除き,イベントハンドラを追加する(Page.xaml)
[画像のクリックで拡大表示]

 もう少し細かく設定したいときは,CSS*2を使うこともできます。BrowserIntegrationTestPage.aspx内でリスト2(1)のようにスタイルを定義してみましょう。(2)の<body>や(3)の<form>にあったstyle属性は削除してあります。(4)のSilverlightのタグにはデフォルトでheightとwidthが記述されていますが,これらも削除し,その代わりにCssClass属性を使って(1)で定義したスタイルを指定しています。すると,Silverlightの描画領域の幅はWebブラウザの幅をフルに使いますが,高さは200ピクセルで固定となります。やはりF5キーを押せば確認できます。

リスト2●CSSを使ったスタイルの指定(BrowserIntegrationTestPage.aspx)
リスト2●CSSを使ったスタイルの指定(BrowserIntegrationTestPage.aspx)
[画像のクリックで拡大表示]

 これだけでは面白くありません。リスト2の下から4行目からは,ページ内に独立したブロックを作るdivタグと順序なしリストのulタグを記述しています。Silverlightからは,id属性でこのulタグを参照できます。Silverlightのコードでリストを変化させてみます。Silverlightの描画領域(図1にあった黄色い部分)をクリックすると,そのときの日時がHTMLのliタグでリストされるようにしましょう。

 Page.xaml.csファイルを開き,名前空間の参照として

using System.Windows.Browser;

を追加します。このSystem.Windows.Browser名前空間にはHTML DOMやJavaScriptなどとやり取りするためのHtmlElementやHtmlDocumentなどのクラスが定義されています。続いて,マウス左ボタンのクリックに対応するコールバック関数LayoutRoot_MouseLeftButtonDownをリスト3のように実装します。

リスト3●マウスクリックで呼び出されるコールバック関数(Page.xaml.cs)
リスト3●マウスクリックで呼び出されるコールバック関数(Page.xaml.cs)

 F5キーで起動し,黄色い部分をクリックすると,図2のように日時がその下にリストされていきます。

図2●リスト3追加後の実行結果。黄色い領域をクリックすると日時が下のリストに追加される
図2●リスト3追加後の実行結果。黄色い領域をクリックすると日時が下のリストに追加される