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

2010年6月9日(水)
PROJECT KySS

ブラウザ外実行の設定をする

次に、ブラウザ外実行(アウト・オブ・ブラウザ)の設定を行います。

VS 2010のメニューから「Project/SL4_WebBrowser Properties」を選択し、「Silverlight」ペインの「Enable running application out of browser(アプリケーションのブラウザ外実行を有効にする)」にチェックを付けます。

さらに、「Debug」ペインのStart Actionも設定してみましょう。デフォルトでは「Out-of-browser application」にチェックが付いています。この状態で実行すると、即座にブラウザ外実行で動作するようになります。 今回は、このデフォルトの設定ではなく、「Dynamically generate a test page」に変更してみましょう(図4)。

図4:「Enable running application out of browser」にチェックを付け、「Dynamically generate a test page」に変更しておく(クリックで拡大)

「Silverlight」ペインに戻り、[Out-of-Browser Settings]ボタンをクリックすると、「Out-of-Browser Settings」画面が表示されます。

この画面では、ブラウザ外実行時の各種設定を変更することができます。

今回のサンプルでは、「Require elevated trust when running outside the browser(ブラウザ外で実行されているときは、高い信用性を必要とする)」 の箇所にチェックを付け、信頼されたTrustedモードで実行するようにしておきましょう(図5 [1])。 また、実行時にインストールメニューを表示するよう「Show install menu」にチェックが付いていることを確認します(図5 [2])。

ここでは、Shortcut name(ショートカット名)とIcon(アイコン)も変更してみましょう。

「Shortcut name」は、仮に「Silverlight4_第3回サンプル」と指定しておきます(図5 [3])。また、先のXML文書ファイルの追加と同じ手順で、 48×48サイズのアイコン用画像ファイルを追加しておき、これを参照して設定します(図5 [4])。 アイコンの画像ファイル(icon48_1.png)は、ダウンロード用サンプルには追加済みです。

図5:Trustedモードに設定し、Shortcut NameとIconを変更する(クリックで拡大)

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

ブラウザ外実行の設定ができたら、コントロールをレイアウトしていきます。

「Out-of-Browser Settings」画面をCloseして、MainPage.xamlを表示してください。UserControlのPropertiesペインの[Layout]を展開して、Widthに800、Heightに600を指定します。

ToolboxからWebBrowserコントロールをデザイン画面上にドラッグ&ドロップしてください。もし、ToolboxにWebBrowserコントロールが登録されていない場合は、ツールボックスの「Common Silverlight Controls」のタブ上でマウスを右クリックして表示されるショートカット・メニューから、「Choose Items」を選択し、「Choose Toolbox Items」ウィンドウ内のコントロールの中でWebBrowserにチェックを付けます(詳しい手順は第2回を参照)。

さらに、ListBoxとTextBox、Buttonコントロールをレイアウトします。それぞれUserControlのPropertiesペインの[Layout]を展開して、Width、Height、Marginを調整しておきましょう。

TextBoxコントロールについては、PropertiesのOtherを展開して、AcceptsReturnにチェックを付け、改行を許可して表示できるようにします。また、内容がコントロールのサイズよりあふれる場合には垂直スクロールバーを表示させるため、 VerticalScrollBarVisibilityプロパティにAutoを指定します(図6)。ButtonコントロールのContentプロパティには「OK」と指定します。

全て設定すると図7のようになります。

図6: TextBoxコントロールの各種プロパティを設定する

図7: WebBrowser、ListBox、TextBox、Buttonコントロールをレイアウトし、プロパティを設定した(クリックで拡大)

以上のレイアウトによって書きだされるXAMLコードは、リスト3のとおりです。

要素内に記述された各コントロールの位置はMargin属性で設定されています。Margin属性の値は、「左、上、右、下」の順で設定されます(太字アミかけ部分)。前回のサンプルのように、クリックした位置を取得するなど、座標値を取得あるいは設定する必要する場合は、各コントロールの位置をCanvas.Top、Canvas.Leftで指定する必要があるため、要素を要素に変更します。が、今回は、座標値を制御する処理ではないため、その必要はありません。

NameがTextBox1である要素のAcceptsReturn属性にはTrueが指定され、改行を許可して表示されるようになっています。また、VerticalScrollBarVisibility属性にはAutoが指定され、垂直スクロールバーの表示が可能となっています(下線部分)。

リスト3 書き出されたXAMLコード(MainPage.xaml)

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600">

 
    Margin="20,110,0,0" Name="WebBrowser1" VerticalAlignment="Top" Width="760" />
    Margin="20,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="260" />
    Margin="290,10,0,0" Name="TextBox1" VerticalAlignment="Top" Width="400" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
   


四国の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メルマガ会員のサービス内容を見る

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