第2回 Hello, WPF or Xamarin.Forms(1)

今回と次回は、Windows Desktop、UWP、Android、iOS、Macの5つのプラットフォームで、Hello, WPFまたはHello, Xamarin.Formsをビルドすることをゴールとします。
なお、Android、iOSではエミュレータを利用します。その他に、筆者特有の環境として、Macもエミュレータ上で起動しています。すなわち、Macはエミュレータ上での実行になり、iOSはエミュレータ上で起動したMacの中のエミュレータ上で起動したものになります。

1回分だけで5つのプラットフォームのアプリをビルドするには少し長すぎるので、2回に分けます。今回はプロジェクトのセットアップと、Windows、UWP、Androidの3つ、すなわちWindowsだけでできる範囲でやります。

前準備(Visual Studio)

Visual Studio 2015 Communityを起動します。プロジェクトの作成ではなく、「ツール」→「拡張機能と更新プログラム」を選択します。
右上の検索ボックスに、「Xamarin.Forms Templates」と入力して検索します。

一番上に表示された「Xamarin.Forms Templates」をダウンロード・インストールします。そのあと、Visual Studioを再起動して、新しいプロジェクトの作成に進みます。(参考:Xamarin.Forms の完璧なプロジェクトテンプレート公開(Xamarin日本語情報)

プロジェクト作成時、「Cross-Platform」の「Xamarin.Forms (UWP/Android/iOS)」を選択します。(今回はWindows Phoneは扱いませんが、興味のある方は適当にいじってください)

途中で、以下の画面が出てきます。このままOKを押してしまって大丈夫です。

以下のように、4つのプロジェクトが生成されました。

ソリューションを右クリックして新しいプロジェクトを追加します。

今回追加するプロジェクトは2つです。まず1つ目のプロジェクトを追加します。WPFです。

次に、共有プロジェクトを追加します。今回はまだ使いませんが、これからMVVMを使うにあたって必要になります。

共有プロジェクトって聞き慣れませんね。私もXamarin.Formsで初めて存在を知りました。
6つ目のプロジェクトを作成したら、次は「参照を追加」します。

そして、共有プロジェクトへの参照を追加してOKを押します。

共有プロジェクトへの参照を追加する操作を、「XamarinFormsTest (移植可能)」と、やたら移植可能が目立つプロジェクトに対しても実行します。

Windows

その次ですが、画面の中央にはWPFのMainWindowのXAML編集画面が表示されていると思います。それを、以下のように書き換えます。

これを実行してみましょう。WPFプロジェクトを右クリックしてスタートアッププロジェクトに設定して、F5を押します。
以下の画面が表示されれば成功です。

Hello, Xamarin.Formsの準備

Xamarin.Formsプロジェクトには、「Hello, Xamarin.Forms」を表示するコードが最初から入っています。しかし、それはXAMLではなく通常のコードで書かれたものです。今後お話する上で不便なので、ここでXAMLに書き直しましょう。
UWPではなく「XamarinFormsTest (移植可能)」のプロジェクトに対して、項目を追加します。なお、UWPだけでなく、AndroidやiOSも、このプロジェクトによって設定された画面を表示します。ここを書き換えることで、AndroidやiOSでの画面を一度に変更することができます。

「Forms Xaml Page」を選択して、MainWindow.xamlを作成します。

こちらには最初から文字を表示するためのLabelが入っていますので、5行目の「{Binding MainText}」を「Hello, Xamarin.Forms」に書き換えます。

そして、次にApp.csを開きます。
こうなっていますので、

こうしてしまいます。

UWP

Xamarin.Formsを設定しました。それでは、Xamarin.FormsでUWPアプリをビルドしてみましょう。その前に、UWPって知ってますか?Windows 10で新たに追加されたプラットフォームで‥‥細かい説明は置いておいて、一言で言うと『意味不明』です。
UWPをビルドします。「XamarinFormsTest.UWP」プロジェクトをスタートアッププロジェクトに設定して、F5を押します。すると。

こんなのが表示されました。これでUWPの実行は成功です。

Android

エミュレータを起動しましょう。エミュレータの設定など細かいところは他のサイトに丸投げします。
私はIntel HAXMを使っていますが、Windows 8 Pro、10 ProではHyper-Vが最初から有効になっている(多分)ので、Hyper-Vを使用したエミュレータをおすすめします。Hyper-VでサクサクAndroidエミュレータを使おう(Qiita)
なお、Android標準のエミュレータ(AVD)をお使いの方は、Intel HAXMを利用することを強くおすすめします。詳しくはAndroid SDK の高速エミュレータ、使ってますか?(OPTPiX Blog)などを参照して下さい。

エミュレータが起動しましたので、「XamarinFormsTest.Droid」を実行します。
なお、Androidアプリを初めてビルドするときは、インターネットから大きなファイルをダウンロードします。インターネット接続環境も必須ですが、ビルドに30分くらい平気でかかりますので注意して下さい。なお、2回目以降のビルドはすぐ済みます。

これでAndroid版の起動は完了です。