【Evolve 2016】Xamarin.Forms Previewerを試してみた！

Xamarin Evolve 2016のキーノートで遂に来ました！

念願のXAMLプレビューが！Xamarin.Formsに！

呼称は Xamarin.Forms Previewer だそうです。

というわけで早速試してみた様子がこちら

XAML Previewer動いたよん❤️ pic.twitter.com/Qtx9V7CKO1

— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年4月28日

どこまでが必須か分からないけどXAMLプレビュー動くまでにやった事

・Xamarin Studio(Mac)をAlphaチャネルでアップデート
・Mac OSを最新にアップデート
・Xcodeを最新にアップデート
・Xcodeを１度起動して、関連ツール(？)アップデート
続く

— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年4月28日

続き
・iOSシミュレータを再起動
・Xamarin.Formsの新規プロジェクト(PCL)を作成
・PCLプロジェクトのNuGetパッケージを一旦削除
・全てのプロジェクトにXamarin.Forms 2.3.0プレビューを追加
・全体ビルドしてiOSでハローワールド確認
続く

— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年4月28日

続き
・PCLプロジェクトに新規ページ(XAML)を追加
・.xamlファイルを開けばXAMLプレビュー！

AndroidのXAMLプレビューが動かないので別途何かする必要がある模様

— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年4月28日

後でXamarin Studioを再起動したらAndroidもプレビュー出来るようになりました。(でもImage表示できてない気がする....まぁまだAplha版だし)

必要な環境はXamarin StudioのAlphaチャネル最新版とXamarin.Forms 2.3プレビュー版、そしてその前提環境としてXcodeを最新にしておく必要があるみたい。

もうちょっと詳しく

※Xamarin.Forms Previewerはまだ正式リリースされた機能ではないので、不安定だったりバギーだったりするかも知れません。その点はご留意ください。(2016/4/29現在)

Xamarin.Forms Previewerの公式情報をXamarinのブログで確認してみましょう。

Live from Evolve: Faster and Easier Mobile App Development with Xamarin.Forms

You can get the Xamarin.Forms Previewer today from the alpha updater channel in Xamarin Studio for Mac. To use the Xamarin.Forms previwer, your project will need to reference Xamarin.Forms 2.3 prerelease NuGet.

ふんふん、必要なのは Alphaチャンネル のMac版Xamarin StudioとXamarin.Forms 2.3のプレビュー版ですね。Visual StudioやUWPはおいおいサポートされるでしょう。

Xamarin StudioをAlphaチャンネルへ

メニューから「Xamarin Studio > Check for Updates」を開いてAlphaチャンネルに切り替えます。

(画像はすでにAlphaチャンネルのものです)

更新データをダウンロード出来たらXamarin Studioを再起動。

Xcodeが古い場合はこちらも最新版に更新しておきます。更新後に一度Xcodeを起動して関連ツールの更新も忘れずに。

Xamarin.Fromsのプロジェクトを作成

Xamarin.Fromsの新規プロジェクト(PCL)を作成します。(Sharedプロジェクトで作ると.xmalファイルを編集出来なくなって詰みました)

ここで一度ビルドしてHello Worldが動くことを確認。(iOSシミュレータを再起動する必要があるかも)

各プロジェクトにXamarin.Forms 2.3プレビューを追加

各プロジェクトの「パッケージ」をダブルクリックしてNuGetパッケージマネージャを開きます。 「Show pre-release packages」をチェックして、「xamarin.forms」と検索すると、プレビュー版のXamarin.Formsが見つかるのでこれをAdd Packageします。(PCLプロジェクトでのNuGetパッケージの追加が失敗することがありました。その場合はXamarin.Forms一旦削除してから入れ直します。)

ここでも一度ビルドしてHello Worldが動くことを確認。

XAML Previewerを試す

PCLプロジェクトに「Forms ContentPage Xaml」を追加。

XAMLファイルの変更がプレビューに反映されない時は、プロジェクトをビルドしたりxamlファイルを開き直すと解消される模様です。