WebBrowserコントロールにWebサイトを表示する

2010年6月9日(水)
PROJECT KySS

WebBrowserコントロールでHTMLコンテンツを表示する

Silverlight 4で追加されたWebBrowserコントロールでは、Silverlightプラグインの中にHTMLコンテンツをホストすることができます。今回は、Trustedモード(高い信頼性に基づいたモード)のブラウザ外実行で、WebBrowserコントロール内にHTMLコンテンツを表示してみましょう。

筆者の開発環境は、Microsoft Windows7 Professional(32bit)、Visual Studio 2010 Ultimate、Silverlight 4 Tools RC2 for Visual Studio 2010、Expression Blend 4 RC、Silverlight_4_Toolkit_April_2010です(いずれも英語版)。ダウンロード用サンプルは、Silverlight 4 Tools for Visual Studio 2010でも動作確認済みです。開発環境の構築については、第1回目を参照してください。これ以降、Visual Studio 2010 はVS 2010、Expression Blend 4 RCはBlendと略します。

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

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

まず、ListBoxコントロールに表示されているメニューを選択すると、リンク先のページがWebBrowserコントロール内に表示されます(図1)。また、TextBoxコントロール内にHTMLもしくはXHTMLでマークアップした内容を記述して[OK]ボタンをクリックすると、WebBrowser内にHTMLコンテンツが表示されます。あるいは、HTMLファイルのソースコードをコピーしておき、キーボードの[Ctrl]+[V]キーを使ってTextBoxコントロール内にペーストしてもかまいません。図2は、リスト1のXHTMLコードを入力して表示した例です。

図1: ListBoxコントロールのメニューを選択し、該当するページが表示されている(クリックで拡大)

図2: TextBox内に記述したXHTMLでマークアップされたコンテンツが、WebBrowser内に表示されている(クリックで拡大)

リスト1: TextBoxに入力したXHTMLコード


br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">





サンプルXHTML



Information(2010/04/27)



先般よりアナウンスしております新サーバへの移設作業中です。

いましばらくお待ちください。



XML文書ファイルを追加して、参照を追加する

では、さっそくサンプルを作っていきましょう。

ツールの操作手順については第1回目で述べましたので、ここでは簡単に説明します。

VS 2010のメニューから[File/New/Project]を選択します。本稿では開発言語としてVisual Basicを使いますので、開発言語がVisual Basicになっていることを確認のうえ「Silverlight Application」を選択して、「Name」に任意のプロジェクト名(サンプルでは「SL4_WebBrowser」)を入力します。

.NET Frameworkのバージョンはデフォルトの「4」、「New Silverlight Application」の[Options]の「Silverlight Version」もデフォルトの「Silvelright 4 」のままで[OK]ボタンをクリックします。

Solution Explorerペインのプロジェクト名を選択して、マウスの右クリックで表示されるショートカット・メニューから、「Project Dependencies(プロジェクト依存関係)」を選択します。「Project Dependencies」ダイアログボックスの「Depends on(依存先)」内のチェックボックスにチェックを付けておきます。

次に、Solution Explorer(ソリューションエクスプローラ)内の「SL4_WebBrowser」を右クリックして、「Add/Existing Item…」から、ListBoxコントロールに表示するデータを記録したXML文書を参照して追加します(リスト2)。このXML文書ファイルは、ダウンロード用サンプルには追加済みです。なお、データは1冊の本の情報以外はサンプル用のダミーです。

リスト2 使用するXML文書の例(bookInfo.xml)



 
    XML設計の心得書籍名>
    ~書籍名>繰り返し~
  書籍>
書籍情報>

このXMLデータの処理にはLINQ to XMLを用いますので、VS 2010のメニューから「Project/Add Reference」(参照の追加)を選択して、System.Xml.Linqを追加しておきます(図3)。

図3: System.Xml.Linqを追加する(クリックで拡大)

四国の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 Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

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