第２回　Hello, WPF or Xamarin.Forms（１）

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

１回分だけで5つのプラットフォームのアプリをビルドするには少し長すぎるので、２回に分けます。今回はプロジェクトのセットアップと、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を押してしまって大丈夫です。

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

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

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

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

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

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

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

Windows

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

<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>

<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>

</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」に書き換えます。

<?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>

<?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">

</ContentPage>

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

        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!"
                         }
                     }
                }
            };
        }

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!"

}

};

}

こうしてしまいます。

        public App()
        {
            // The root page of your application
            MainPage = new MainPage();
        }

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版の起動は完了です。