WebBrowserコントロールはWebサイトを表示するためのコントロールです。
このコントロールを使用することで簡単に任意のURLのWebサイトを表示させることができます。
またこの記事ではWebBrowserコントロールでJavaScriptを動作させるための方法も紹介します。
詳細は以下から。
WebBrowserコントロールを配置してみよう
WebBrowserコントロールはxamlを使用して簡単に配置することができます。
注意点として、Name属性を必ず指定しないと正常に動作しません。
下記はWebBrowserコントロールをxamlに配置したサンプルです。
[アプリ名].xaml
<!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="ページ名" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - 追加コンテンツをここに入力します-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser HorizontalAlignment="Left" Margin="6,6,0,0" Name="webBrowser1" VerticalAlignment="Top" Height="514" Width="444" />
</Grid>
</Grid>
15行目～16行目でWebBrowserコントロールを配置しています。
任意のURLのWebページを表示させてみよう
配置が完了したら、今度はWebサイトを表示させてみましょう。
下図のようにTextBoxに入力したURLをWebBrowserコントロールで表示されるサンプルを作成してみましょう。
まずはWebサイトのURLを入力するTextBoxと表示させるアクションを行うためのButtonを追加します。
[アプリ名].xaml
<!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="ページ名" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - 追加コンテンツをここに入力します-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="15,183,9,12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="239*" />
<ColumnDefinition Width="217*" />
</Grid.ColumnDefinitions>
<phone:WebBrowser HorizontalAlignment="Left" Margin="6,6,0,0" Name="webBrowser1" VerticalAlignment="Top" Height="514" Width="444" Grid.ColumnSpan="2" />
</Grid>
<TextBox Grid.RowSpan="2" Height="73" HorizontalAlignment="Left" Margin="0,139,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="460" />
<Button Content="表示" Grid.Row="1" Height="72" HorizontalAlignment="Left" Margin="145,57,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
</Grid>
22行目でTextBoxを、23行目でButtonを追加しています。
また、ButtonにはClickイベント発生時にbutton1_Clickというメソッドが実行されるようにClick属性を設定しています。
次はbutton1_Clickメソッドの中身を実装していきましょう。
下記はTextBoxに入力されたUrlをWebBrowserコントロールで表示させるサンプルです。
public partial class MainPage : PhoneApplicationPage
{
// コンストラクター
public MainPage()
{
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
string site = textBox1.Text;
webBrowser1.Navigate(new Uri(site, UriKind.Absolute));
}
}
12行目にてWebBrowserコントロールのNavigateメソッドを使用して入力されたURLのWebサイトを表示させています。
引数にはUriクラスのオブジェクトを指定します。
試しにhttps://techbooster.orgと入力してButtonを押下すると以下のような画面が表示されます。
JavaScriptを動作させる
ここまでで、Webサイトを表示することができましたが、この状態ではJavaScriptが動作しません。
techboosterのトップページを表示させてみるとよくわかると思いますが、真ん中の部分が読み込み中のままとなっています。
JavaScriptを動作させたい場合はWebBrowserコントロールのIsScriptEnabledプロパティにtrueを設定する必要があります。
このプロパティのデフォルト値はfalseとなっているため、JavaScriptが動作しません。
下記は画面読み込み時にIsScriptEnabledプロパティの値をtrueにし、JavaScriptを動作できるようにするサンプルです。
public partial class MainPage : PhoneApplicationPage
{
// コンストラクター
public MainPage()
{
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
string site = textBox1.Text;
webBrowser1.Navigate(new Uri(site, UriKind.Absolute));
}
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
webBrowser1.IsScriptEnabled = true;
}
}
17行目にて、IsScriptEnabledプロパティの値をtrueにして、JavaScriptが動作するようにしています。
ではもう一度techboosterのトップページを表示させてみましょう。
下記のように読み込み中であった部分が正常に読み込まれます。
