rksoftware

Visual Studio とか C# とかが好きです

Xamarin Live Player で XAML をプレビューする

sual Studio 15.6 のアップデートを確認していました。

すると

iOS シミュレーターでのライブ XAML プレビュー
Xamarin Live Player では、開発者は Visual Studio と iOS または Android デバイスを使用するだけでアプリの展開、テスト、デバッグを継続的に行うことができます。 Visual Studio 2017 バージョン 15.5 では、開発者が再コンパイルや再展開を必要とせずに、Android エミュレーター内でリアルタイムの XAML の変更を直接プレビューできるようにサポートを追加しました。 このリリースでは、Windows 用のリモートの iOS シミュレーターに、この機能が追加されました。

という項目を見つけました。

15.5 からあったということろが気になったのでとりあえず Android の方試してみることにしました。

■ Android 端末に Xamarin Live Player をインストール

まず、実機に Xamarin Live Player をインストールする必要がありますが、これは以前にインストール済みなのでスキップ。
まだ、インストールされていない方はこちらからインストールできるようです。

■ Xamarin.Forms プロジェクトの新規作成

Visual Studio から普通に新規作成します。
私は、.NET Standard で作成しました。 あと、ターゲットのプラットフォームから UWP を外しておきました。Windows 10 Mobile には Live Player ない様ですし。

■ ペアリング

Visual Studio と実機(にインストールした Xamarin Libe Player)をペアリングします。

普通に解説通り QR 取り込みです。PC と Android を同一 WiFi ネットワークに接続するところがポイントです。

■ 実行

準備が整ったら、Shift + Alt + F5 という、ちょっと普通は押さないキーで実行です。
XAML はプロジェクト新規作成時から変えていません。

f:id:rksoftware:20180331144428j:plain

黄色いバーで live running と表示され実行されているのがわかります。
もう一か所注目のポイントは、デバッグ実行されていない点です。皆さんがこれまで何度も押してきたであろう緑の左三角アイコンが緑のままになっています。
Android 実機では Xamarin Live Player 上で、いつもの Welcome to Xamarin.Forms! が表示されています。

■ XAML を変更

この状態で、XAML を変更してみます。

f:id:rksoftware:20180331144459j:plain

Welcome to Xamarin.Forms!! と ! を増やしてみました。
そして、コマンド Ctrl + S(ファイルの保存)。

Android 実機上の表示が変更されました!

■ XAML の確認に便利

今回 試してみましたが、XAML の確認に便利そうですね。