Windows PhoneでWebBrowserコントロールを使う

「Windows Phone Advent Calendar "ひとり" 2011」第3日目。

Windows Phoneアプリケーションで、任意のURLのウェブページを閲覧させたい場合、２種類の方法が提供されています。URLをパラメータにして標準のIE Mobileを起動させるWebBrowserTaskと、アプリケーション内でウェブページを表示させるWebBrowserコントロールです。

本日は後者のコントロールを使ったアプリケーションを作ってみましょう。

**WebBrowserコントロールを配置する

Windows Phoneアプリケーション内にWebBrowserコントロールを配置してみましょう。Visual Studioの左側にツールボックスがあります。Windows Phoneコントロールがリスト表示されています。WebBrowserを見つけられましたでしょうか？

WebBrowserを選択してドラッグアンドドロップでアプリケーションページへ配置します。

Sourceプロパティにあらかじめ表示させたいURLを設定しておくことも可能です。デザイナーにて配置したWebBrowserコントロールを選択した状態でプロパティリストを確認します。 Sourceプロパティの欄が空白になっていますので、ここでは仮に僕のサイトのURLを http://ch3cooh.jp/ と入力しておきます。

キーボードのF5ボタンを押下、またはVisual Studioのツールバーにある[デバッグ]→[デバッグ開始]を選択して、アプリケーションを実行します。

WebBrowserコントロールの表示後に、ウェブページの読み込みが開始されます。無事に表示されたでしょうか。 XAMLでも同様にWebBrowserの配置と初期表示のURLを指定してみましょう。

|xml| <phone:WebBrowser Name="webBrowser1" Source="http://ch3cooh.jp/" /> ||<

**任意のURLのウェブページへ遷移する

WebBrowserコントロールは、Navigateメソッドを使って任意のURLのウェブページへ遷移させることが出来ます。

|cs| webBrowser1.Navigate(new Uri("http://ch3cooh.jp/")); ||<

**ウェブページの遷移中に発生するイベント

WebBrowserコントロールは、ウェブページの遷移中に３つのイベントを発生させます。ページ遷移前に発生するNavigatingイベント、正常にページ遷移すると発生するNavigatedイベント、ページ遷移に失敗すると発生するNavigationFailedイベントの3つです。

基本的にはイベントが発生する順は以下の2通りとなります。

例外としてNavigatingイベントでキャンセルされた場合や、遷移したウェブページのステータスが移転を示す302が返ってきた場合などは、Navigatingイベントが複数回発生した後にNavigatedイベントが発生します。

イベントがどのように発生しているのかを調べるために、ユーザー操作でページが遷移されるサンプルコードを以下に示します。

|cs| using System; using System.Windows; using System.Windows.Navigation; using Microsoft.Phone.Controls;

namespace WebBroserTest { public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent();

        webBrowser1.Navigated += webBrowser1_Navigated;
        webBrowser1.Navigating += webBrowser1_Navigating;
        webBrowser1.NavigationFailed += webBrowser1_NavigationFailed;
    }

    private void ApplicationBarIconButton_Click(object sender, System.EventArgs e) {
        webBrowser1.Navigate(new Uri("http://ch3cooh.jp/"));
    }

    // 遷移中に発生するイベント
    void webBrowser1_Navigating(object sender, NavigatingEventArgs e) {
         MessageBox.Show("遷移中");
    }

    // 遷移に成功した場合に発生するイベント
    void webBrowser1_Navigated(object sender, NavigationEventArgs e) {
        MessageBox.Show("ページ遷移に成功しました");
    }

    // 遷移に失敗した場合に発生するイベント
    void webBrowser1_NavigationFailed(object sender,NavigationFailedEventArgs e) {
        MessageBox.Show("ページ遷移に失敗しました");
    }
}

} ||<

酢ろぐ！

カレーが嫌いなスマートフォンアプリプログラマのブログ。

Windows PhoneでWebBrowserコントロールを使う