今回と次回は、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編集画面が表示されていると思います。それを、以下のように書き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 |
<Window x:Class="XamarinFormsTest.WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:XamarinFormsTest.WPF" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <Label Content="Hello, WPF" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/> </Grid> </Window> |
これを実行してみましょう。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」に書き換えます。
1 2 3 4 5 6 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinFormsTest.MainPage"> <Label Text="Hello, Xamarin.Forms" VerticalOptions="Center" HorizontalOptions="Center" /> </ContentPage> |
そして、次にApp.csを開きます。
こうなっていますので、
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
public App() { // The root page of your application MainPage = new ContentPage { Content = new StackLayout { VerticalOptions = LayoutOptions.Center, Children = { new Label { HorizontalTextAlignment = TextAlignment.Center, Text = "Welcome to Xamarin Forms!" } } } }; } |
こうしてしまいます。
12 13 14 15 16 |
public App() { // The root page of your application MainPage = new MainPage(); } |
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版の起動は完了です。