[Xamarin][CrossPlatform][Control] WebView

2017.01.23

WebViewコントロールを使用すると、Webブラウザを実装することができます。

WebViewコントロールに表示するページ（URL）は、Sourceプロパティで指定します。

戻れるページがあるかどうかはCanGoBackプロパティ、進めるページがあるかどうかはCanGoForwardプロパティがTrueかどうかを確認します。

以下はWebViewコントロールを配置するXAMLの例です。

一番上にはSearchBarコントロール、次にWebViewコントロール、一番下にButtonコントロールを2つ（戻る、進む）配置しています。

[<]ボタンはWebViewのCanGoBackプロパティと、[>]はCanGoForwadプロパティをバインディングし、戻るページがある場合と、進むページがある場合に押せるようになります。

<StackLayout Margin="10,30,10,10">
  <SearchBar x:Name="searchBar" Placeholder="Enter url" />
  <WebView x:Name="webView" 
    VerticalOptions="FillAndExpand"
    Source="https://www.xamarin.com/" />

  <StackLayout Orientation="Horizontal" 
    BindingContext="{x:Reference webView}">
    <Button x:Name="btnBack" Text="&lt;" 
      IsEnabled="{Binding CanGoBack}" />
    <Button x:Name="btnForawd" Text="&gt;" 
      IsEnabled="{Binding CanGoForward}" />
  </StackLayout>
</StackLayout>

次に、それぞれのイベントを使用する例をみていきましょう。

検索用の入力エリアではSearchBarのボタンが押されたときのイベントで、入力されたURLへ移動できるようにしています。入力されたURLはWebViewコントロールのSourceプロパティに設定します。

ページが遷移するときは、Navigatingというイベントが発生します。ページ遷移中はSearchBarコントロールが使用できないようにIsEnabledプロパティにfalseを設定しています。ページ遷移が完了したときはNavigatedイベントが発生するのでIsEnabledイベントにtrueを設定して再び使用できるようにしています。

[<]ボタンがクリックされたときは、WebViewコントロールのGoBack()メソッドを実行し、[>]ボタンが句陸されたときはGoForward()メソッドを実行するようにしています。

public MainPage()
{
  InitializeComponent();

  // [検索]ボタンタップ時の処理
  searchBar.SearchButtonPressed += (sender, e) =>
  {
    // 指定されたURLを開く
    webView.Source = searchBar.Text;
  };

  // ページ遷移中の処理
  webView.Navigating += (sender, e) =>
  {
    searchBar.IsEnabled = false;  
  };

  // ページ遷移完了時の処理
  webView.Navigated += (sender, e) =>
  {
    searchBar.IsEnabled = true;
  };

  // [<]ボタンクリック時の処理
  btnBack.Clicked += (sender, e) =>
  {
    webView.GoBack();
  };

  // [>]ボタンクリック時の処理
  btnForawd.Clicked += (sender, e) =>
  {
    webView.GoForward();
  };
}