Xamarin.Forms for Windows を使ってみた

こんにちは。エクセルソフトの田淵です。

[【速報】Xamarin.Forms がついにストアアプリと Windows Phone RT に対応！ - Xamarin 日本語情報](http://ytabuchi.hatenablog.com/entry/2015/03/20/010950) にも書きましたが、Xamarin.Forms が Windows ストアアプリ、Windows Phone 8.1 RT に対応しました。

簡単にストアアプリの追加方法とどんなコントロールが現時点で使えるのか？を調べてみました。

# はじめに

## 必要なシステム

- Windows 8.1
- Visual Studio 2013 以上
- Xamarin ライセンス (評価版でも可のはず)

です。
なお、現時点では以下の制限があります。

## 制限

- Map がない - 現段階では Map のサポートはありません。
- Grid View がない - Grid View なしではネイティブの操作感の Windows アプリケーションはほぼビルドできません。Xamarin.Forms は現在は (ネイティブの) Grid View コントロールはサポートしていませんが、先のリリースでサポートする予定です。(田淵補足：多分ネイティブの Grid View は横にスクロールしていくいわゆるタイル的なやつだと思いますが、それはまだみたいです。)
- コントロール - すべてのコントロールレンダラーが新しい Windows ターゲットに用意されているわけではありません。これはプレビューのため、リリース毎にサポートレベルが上がっていくでしょう。
- リソース - WinRT の標準のセキュリティレベルで、ReflectionPermission パーミッションが正しく設定されていない異なるアセンブリからの埋め込みリソースのロードは動作しません。このパーミッションは PCL アセンブリには設定できません。

その他の違いは [Differences - Xamarin](http://developer.xamarin.com/guides/cross-platform/xamarin-forms/windows/controls/) を参照してください。

なお、後半の使ってみたで列挙しますが、幾つか使えないコントロールがありました。

# Xamarin.Forms for Windows の追加・設定方法

Xamarin.Forms プロジェクトを用意します。今回はサンプルとして、ほぼすべてのコントロールが見れる [FormsGallery - Xamarin](http://developer.xamarin.com/samples/xamarin-forms/FormsGallery/) を Windows ストアアプリにしてみたいと思います。

### Forms の PCL プロジェクトを Profile 259 に変更します

Forms の PCL (移植可能) を
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324113336.png)
右クリック→プロパティからライブラリ > ターゲット の ``変更`` をクリックし
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324114739.png)
Windows Phone 8.1 を追加します。 
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324113210.png)

### ソリューションに Windows ストアアプリプロジェクトを追加します

ソリューションを右クリックして、``追加 > 新しいプロジェクト`` をクリック

``Visual C# > ストアアプリ > Windows アプリ > 空のアプリケーション`` でプロジェクトを追加します。なお、Forms のプロジェクトは標準で物理フォルダを切るので、そのフォルダ以下にしても構わないと思います。(ハイライト部分)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324120407.png)

### NuGet パッケージを追加します

作成された Windows ストアアプリのプロジェクトに NuGet から ``Xamarin.Forms.Windows`` を追加するのですが、プロジェクトを右クリックから ``NuGet パッケージの管理`` で ``リリース前のパッケージを含める`` を選択して ``xamarin.forms`` などを検索します。
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324121843.png)
それでも良いのですが、時間が掛かりますので、Visual Studio のメニューから ``表示 > その他のウィンドウ > パッケージマネージャーコンソール`` を開いて、``PM> Install-Package Xamarin.Forms.Windows -Pre`` を入力した方が早いですね。以下の結果が返って来れば OK です。

> 依存関係 'Xamarin.Forms (≥ 1.4.1.6347-pre2)' の解決を試みています。
'Xamarin.Forms 1.4.1.6347-pre2' をインストールしています。
'Xamarin.Forms 1.4.1.6347-pre2' が正常にインストールされました。
'Xamarin.Forms.Windows 1.4.1.6347-pre2' をインストールしています。
'Xamarin.Forms.Windows 1.4.1.6347-pre2' が正常にインストールされました。
'Xamarin.Forms 1.4.1.6347-pre2' を FormsGallery.Windows81 に追加しています。
'Xamarin.Forms 1.4.1.6347-pre2' が FormsGallery.Windows81 に正常に追加されました。
'Xamarin.Forms.Windows 1.4.1.6347-pre2' を FormsGallery.Windows81 に追加しています。
'Xamarin.Forms.Windows 1.4.1.6347-pre2' が FormsGallery.Windows81 に正常に追加されました。

### ストアアプリプロジェクトの設定をします

プロジェクトの ``参照設定`` を右クリックして ``参照の追加`` を選択し、Xamarin.Forms のプロジェクトを参照します。
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324121810.png)

 ``App.xaml.cs`` を開き、``OnLaunched`` メソッド内の 65行目くらいにある以下の行の前に ``Init()`` メソッドを追加します。以下のようになります。

```csharp
// この行を
Xamarin.Forms.Forms.Init(e); // requires LaunchActivatedEventArgs
// この下の行の前に追加します。
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)

```


``MainPage.xaml`` を開き、``Page`` を ``forms:WindowsPage`` にし、``xmlns:forms="using:Xamarin.Forms.Platform.WinRT"`` を追加します。元からある ``<Grid>`` は削除しておきましょう。以下のようになります。

```xml
<forms:WindowsPage
    x:Class="FormsGallery.Windows81.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FormsGallery.Windows81"
    xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

</forms:WindowsPage>
```

``MainPage.xaml.cs`` を開き、``: Page`` を削除し、``InitializeComponent()`` の後に ``LoadApplication`` の呼び出しを追加します。以下のようになります。＜名前空間＞ は今回は FormsGallery.App です。

```csharp
public sealed partial class MainPage
{
    public MainPage()
    {
        this.InitializeComponent();
        // add this line
        LoadApplication(new ＜名前空間＞.App());
    }
}
```

``Package.appxmanifest`` ファイルを開き、機能タブの ``場所`` にチェックを追加します。
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324123512.png)

後は画像などのリソースファイルを追加してビルドすれば OK です！


# 実際に動かしてみた

ここからは実際のストアアプリとして、[FormsGallery - Xamarin](http://developer.xamarin.com/samples/xamarin-forms/FormsGallery/) を動かしてみた画面写真などを記載していきます。Xaml だとどうなるの？ってのが知りたい方は、[XAML Samples - Xamarin](http://developer.xamarin.com/samples/xamarin-forms/XAMLSamples/) をストアアプリにしてみてください。こちらも問題なく動作します。

Label
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324130304.png)

Image
ファイルを WP と同じ Images/ide-xamarin-studio.png に配置しても戻る時にエラーが出ました。

BoxView
Box が表示されません
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324130520.png)

WebView
Web は表示できたのですが、多分ストアの Webview コントロールのセキュリティ制限ですね。``0x800a138f - JavaScript 実行時エラー: 未定義または NULL 参照のプロパティ 'ajax' は取得できません`` というエラーが出ました。

Map
現時点での制限事項ですので表示されません。

Button
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324130047.png)

SearchBar
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324130753.png)

Slider
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324130817.png)

Stepper
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324130850.png)

Switch
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324130924.png)

DatePicker
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131001.png)

TimePicker
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131014.png)

Entry (単数行)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131050.png)

Entry (複数行)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131111.png)

ActivityIndicator
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131146.png)

ProgressBar
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131205.png)

Picker
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131232.png)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131239.png)

ListView
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131254.png)

TableView メニュー用
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131326.png)

TableView フォーム用(ここに次の Cells が含まれているので Cells は省略します)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131411.png)

ContentView
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131508.png)

Frame
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131535.png)

ScrollView
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131601.png)

StackLayout (下が切れているのが気になりますが…)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131646.png)

AbsoluteLayout
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131734.png)

Grid (Xamarin.Forms での Grid です)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131811.png)

RelativeLayout
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131841.png)

ContentPage
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131854.png)

NavigationPage (次のページから左矢印でここに戻ってきます)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324131921.png)

MasterDetailPage (クリック/タップすると左に DetailPage が表示されます)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324132040.png)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324132129.png)

TabbedPage (右クリック/上からスワイプ すると画面上部にタブが表示されます)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324132257.png)![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324132306.png)

CarouselPage (左右にスワイプできます)
![画像](http://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20150324/20150324132404.png)


ThinkPad 8 に [リモートデバッガーツール](https://msdn.microsoft.com/ja-jp/library/bt727f1t.aspx) を使ってリモートデバッグして触ってみた動画をアップしましたので、併せてご参照ください。

[Xamarin.Forms for Windows 試してみました - Youtube](https://www.youtube.com/embed/ciI_QTs6kqs)


ここまで来ると、完全に Mobile First で開発が出来ちゃうのでは？と思ってワクワクしますね。

# 公式資料

Xamarin.Forms for Windows の詳細は以下の公式資料をご覧ください。

James さんのブログ
[Exciting Xamarin Announcements from dotnetConf | Xamarin BlogXamarin Blog](http://blog.xamarin.com/xamarin.forms-for-windows-store-preview-and-xamarin-for-oss/)

ドキュメント
[Xamarin.Forms for Windows Preview - Xamarin](http://developer.xamarin.com/guides/cross-platform/xamarin-forms/windows/)

サンプルアプリ
[jamesmontemagno/Hanselman.Forms](https://github.com/jamesmontemagno/Hanselman.Forms)

# Xamarin 気になった方は

是非 [ダウンロード(直接)](http://xamarin.com/download) / [ダウンロード(弊社経由)](https://www.xlsoft.com/jp/products/download/index.html?option=Xamarin&r=ythb) して触ってみてください。
[学習用リソース](http://ytabuchi.hatenablog.com/entry/2014/08/26/191759) や [JXUG リンクページ](http://jxug.org/links.html) に参考資料を纏めてますので併せてどうぞ。

以上です。