[Xamarin][CrossPlatform][Control] WebView

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();
  };
}

 

 

 

[Xamarin][CrossPlatform][Control] Stepper

Stepperコントロールは[+]と[-]のボタンが1つずつ付いているコントロールで、タップする毎に値を増減させることができます。

変更可能な値の範囲はMinimumプロパティとMaximumプロパティで設定します。

また、1回のタップによる値の増減値幅はIncrementプロパティで設定し、現在値の取得と設定はValueプロパティを使用します。

以下は、StepperとLabelボタンを1つずつ配置して、Stepperがタップされる毎に現在値を表示する例です。

最小値を-10、最大値を10に設定しています。

<StackLayout Margin="10,30,10,10"> 
  <Stepper x:Name="stepperRed"
    Minimum="-10" Maximum="10"
    Increment="1" Value="0" />

  <Label x:Name="label" Text="" />
</StackLayout>

Stepperは値が変化すると、ValueChangedイベントが発生します。

以下はValueChangedイベントが発生したときに、Labelに値を表示する例です。

public MainPage()
{
    InitializeComponent();

    stepper.ValueChanged += (sender, e) =>
    {
        label.Text = stepper.Value.ToString();
    };
}

実行例を以下に示します。

[Xamarin][CrossPlatform][Control] Switch

Switchコントロールは、文字通りスイッチを表現するためのコントロールです。

使用方法は簡単です。

スイッチの状態を変更するにはIsToggledプロパティを使用し、スイッチをONにするにはTrueを、スイッチをOFFにするにはFalseを設定します。

以下は、SwitchとLabelコントロールを1つずつ配置し、スイッチの状態をLabelに表示する例です。

<StackLayout>
  
  <Switch x:Name="mySwitch" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
			IsToggled="true" />
  
  <Label x:Name="lblStatus" FontSize="Large"
			HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
			Text="スイッチ ON" />

</StackLayout>

Switchの状態が変更されるとToggledイベントが発生します。このイベントを利用して、スイッチの状態を確認してLabelに表示するコード例を以下に示します。

public MainPage()
{
    InitializeComponent();

    mySwitch.Toggled += (sender, e) =>
    {
        lblStatus.Text = "スイッチ " + (mySwitch.IsToggled ? "ON" : "OFF");
    };
}

実行例は以下の通りです。

 

 

 

[Visual Studio for Mac] 画面にコントロールを配置する

前回は新規でプロジェクトを作成したので、今回はコントロールを配置して実行をしてみたいと思います。

はじめに、ソリューションエクスプローラーでXAMLファイルをダブルクリックして開きます。プロジェクト名.xaml というファイルがメイン画面のファイルです。

ファイルを開くと、左側にはXAMLコードが、右側にはそのプレビュー画面が表示されます。XAMLコードを編集するとプレビュー画面に反映されるので、自分が記述したXAMLがどのような見え方をするのかを、確認しながらデザインをすることができます。

またプレビュー画面の上にあるDevicesでPhoneを選ぶと携帯用、Tabletを選択するとタブレット用のプレビュー画面になります。また、PlatformでiOSやAndroidデバイスに切り替えてプレビューをみることができるので、それぞれのプラットフォームでどのように見えるかを確認することができます。このあたりはXamarin Studioを使用していた方にとっては、操作方法は変わらないため違和感なく使用可能でしょう。

とりあえず、なにも変更せずにiOSアプリとして実行をしてみましょう。

IDEの上にある右向きの▲ボタンをクリックすると、シミュレータが起動して作成したアプリの動作を確認することができます。

このとき、プロジェクト名.iOSを選択して実行するとiOSのエミュレーターが、プロジェクト名.Androidを選択するとAndoroidのエミュレーターを起動することができます。

また、iOSでもAndroidでも、起動するエミュレーターは変更することができるので、様々なデバイスを想定して動作確認をすることができます。

iOSのエミュレーターを起動すると以下のようになります。

続いて、XAMLの編集方法を確認していきましょう。

メイン画面のXAMLファイルは以下のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyFirstApp" x:Class="MyFirstApp.MyFirstAppPage">
	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

初期のXAMLは<Label>が1つ配置されていて、テキストに「Welcolme to Xamarin Forms!」が表示されるようになっています。

本サイトでは、これまでにXamarin.Formsで使用可能なコントロールを紹介してきていますので、それらを参考にして画面をデザインしてください。

今回は、StackLayoutを配置して、LabelとButtonを以下のように配置してみます。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyFirstApp" x:Class="MyFirstApp.MyFirstAppPage">
	<StackLayout Margin="10,30,10,10">
		<Label x:Name="lblText" Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
		<Button x:Name="button" Text="Click Me!" />
	</StackLayout>

</ContentPage>

XAMLを編集すると、リアルタイムでプレビュー画面が変更されていくことがわかります。

こうしてVisual Studio for Macを使用してみると、Xamarin Studioと同様であることがわかります。

WindowsのVisual StudioでもXamarin.Formsのプロジェクトを作成可能ですが、さくさく感があるのはMac版のVisual Studioです。

もし、Winodwsをターゲットにしないのであれば、Visual Studio for Macを使用して開発するのが良いかもしれません。