Xamarin.Forms for Windows を使ってみた

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

2016/1/22 追記：
最新の Xamarin.Forms 2.0.1.6495 用のプロジェクトテンプレートを作成しました。Xamarin.Forms の PCL、Android、iOS、UWP、Windows Store 8.1、Windows Phone 8.1 (WinRT) の 6つのプロジェクトが含まれていて、プロジェクトを作成してビルドするだけで、UWP, Windows Store, Windows Phone 8.1 アプリが作れます。ぜひ試してみてください。

ytabuchi.hatenablog.com

【速報】Xamarin.Forms がついにストアアプリと Windows Phone RT に対応！ - Xamarin 日本語情報 にも書きましたが、Xamarin.Forms が Windows ストアアプリ、Windows Phone 8.1 RT に対応しました。

Xamarin.Forms for Windows Phone 8.1 を使ってみた - Xamarin 日本語情報 で Windows Phone 8.1 プロジェクトの作成方法をアップしました。

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

はじめに

必要なシステム

• 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 を参照してください。

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

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

Xamarin.Forms プロジェクトを用意します。今回はサンプルとして、ほぼすべてのコントロールが見れる FormsGallery - Xamarin を Windows ストアアプリにしてみたいと思います。

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

Forms の PCL (移植可能) を

右クリック→プロパティからライブラリ > ターゲット の 変更 をクリックし

Windows Phone 8.1 を追加します。

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

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

Visual C# > ストアアプリ > Windows アプリ > 空のアプリケーション でプロジェクトを追加します。なお、Forms のプロジェクトは標準で物理フォルダを切るので、そのフォルダ以下にしても構わないと思います。(ハイライト部分)

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

作成された Windows ストアアプリのプロジェクトに NuGet から Xamarin.Forms.Windows を追加するのですが、プロジェクトを右クリックから NuGet パッケージの管理 で リリース前のパッケージを含める を選択して xamarin.forms などを検索します。

それでも良いのですが、時間が掛かりますので、Visual Studio のメニューから 表示 > その他のウィンドウ > パッケージマネージャーコンソール を開いて、PM> Install-Package Xamarin.Forms.Windows を入力した方が早いですね。以下の結果が返って来れば OK です。

依存関係 'Xamarin.Forms (≥ 1.4.2.6355)' の解決を試みています。
'Xamarin.Forms 1.4.2.6355' を XXX.Windows81 に追加しています。
'Xamarin.Forms 1.4.2.6355' が XXX.Windows81 に正常に追加されました。
'Xamarin.Forms.Windows 1.4.2.6355' を XXX.Windows81 に追加しています。
'Xamarin.Forms.Windows 1.4.2.6355' が XXX.Windows81 に正常に追加されました。

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

プロジェクトの 参照設定 を右クリックして 参照の追加 を選択し、Xamarin.Forms のプロジェクトを参照します。

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

// この行を
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> は削除しておきましょう。以下のようになります。

<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 です。

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

Package.appxmanifest ファイルを開き、機能タブの 場所 にチェックを追加します。

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

実際に動かしてみた

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

Label

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

BoxView
Box が表示されません

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

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

Button

SearchBar

Slider

Stepper

Switch

DatePicker

TimePicker

Entry (単数行)

Entry (複数行)

ActivityIndicator

ProgressBar

Picker

ListView

TableView メニュー用

TableView フォーム用(ここに次の Cells が含まれているので Cells は省略します)

ContentView

Frame

ScrollView

StackLayout (下が切れているのが気になりますが…)

AbsoluteLayout

Grid (Xamarin.Forms での Grid です)

RelativeLayout

ContentPage

NavigationPage (次のページから左矢印でここに戻ってきます)

MasterDetailPage (クリック/タップすると左に DetailPage が表示されます)

TabbedPage (右クリック/上からスワイプ すると画面上部にタブが表示されます)

CarouselPage (左右にスワイプできます)

ThinkPad 8 に リモートデバッガーツール を使ってリモートデバッグして触ってみた動画をアップしましたので、併せてご参照ください。

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

公式資料

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

James さんのブログ
Exciting Xamarin Announcements from dotnetConf | Xamarin BlogXamarin Blog

ドキュメント
Xamarin.Forms for Windows Preview - Xamarin

サンプルアプリ
jamesmontemagno/Hanselman.Forms

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソース や JXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

以上です。