Moonmile Solutions Blog

先日の F# Meet up であった TypeProvider の資料をもとに、Xamarin.Forms 用の TypeProvider を作ろうとしたのですが、ちょっと挫折…の記録です。

TypeProviderについて、勝手に補足 – ぐるぐる～
http://bleis-tift.hatenablog.com/entry/kos59125-typeprovider
type-providers.pptx – Microsoft PowerPoint Online
http://onedrive.live.com/view.aspx?resid=FD448A567D4BC37E!5132&ithint=file%2cpptx&app=PowerPoint&authkey=!ADhuGqIaXBhs0ak

TypeProvider 自体が悪いのではなくて、Xamarin.Forms が PCL で提供しているのと、TypeProvider 自体がネイティブ環境（Windows環境で動く）のと関係で、断念しています。何か回避策があったら教えてください～。

■XFormsPreviewer から移植する

もともと、TypeProvider もどきのロジックはあって、以下の中にある XFormsProvider がそれです。動的に XAML ファイルをロードして Xamarin.Forms.Page を返します。

XFormsPreviewer
http://github.com/moonmile/XFormsPreviewer

XAML に書かれている x:Name 部分は、FindByName メソッドで取り出しができるので実用的には問題ないのですが、型が決まっていないのがアレだし、いちいち FindByName で取り出すのも変な感じです。なので、TypeProvider の作り方がわかったら、いずれ移行する予定にしていました。

■ざっと移植する

XamarinFormsTypeProvider
http://github.com/moonmile/XamarinFormsTypeProvider

それなりに苦労しましたが１日ちょっとで移植できました。プロパティを順々に生成するところと、内部のデータの保持が結構肝なのですが、<a href=”https://github.com/fsprojects/FsXaml”>FsXaml</a> を参考にして作っています。

type MainPage = Moonmile.XamarinFormsTypeProvider.XAML<"MainPage.xaml">

こんな感じで、XAML のファイルを指定することで、MainPage というクラスが生成すると、結構「おおおッ」ってな感じになります。ファイルの更新を監視していない（FsXamlは監視してます）ので、先の XAML ファイル名の部分をちょっといじる（コメントアウトして元に戻すとか）して、再生成させると x:Name で指定した名前がそのままプロパティになります。
テスト用に Literal な XAML 文字列も XamarinFormsTypeProvider.XAML に渡すこともできます。

この時点で、結構動いて Android エミュレータで画面が表示できるところまで出来たので、これはいけるなーと思ったのです。ラベルの表示もできて、Text プロパティで変更できるところまで確認島した。

■Clicked.Add すると「静的リンクエラー」になる。

お次は、ボタンイベントを作ろうとして、

type MainPageEx(target:MainPage) =
    let mutable count = 0
    do
        target.btn1.Clicked.Add( fun e ->
            count <- count + 1
            target.btn1.Text <- "Clicked " + count.ToString())
    member this.CurrentPage
        with get() = target.CurrentPage

な感じで、Clicked イベントをつけてビルドしようとすると、

FSC: エラー FS2024: 静的リンクでは、別のプロファイルを対象にしたアセンブリは使用されない場合があります。
プロジェクト "SimpleEventTypeLocalLib.fsproj" のビルドが終了しました -- 失敗。

というエラーメッセージがでビルドができません。このエラーがどういう意味なのか分からなくて、1日ほど悩みました。TypeProvider のプロジェクトは、F# ライブラリで作ってあり、MainPage のプロジェクトも F# ライブラリで作ってあります。本当は PCL で作りたかったのですが、TypeProvider のクラス自体が PCL に対応していません。System.Reflection.Emit.TypeBuilder が potable library のほうにはないのです。

タイプライブラリを作るときは Windows 上で動くけど、生成されたクラスは Android 上で動くわけだから、参照されるライブラリ自体が異なるんですよね。動作環境も異なる。

■FS2024 のエラー

Static linking PCL assembly with mscorlib reference ・ Issue #224 ・ fsharp/fsharp
http://github.com/fsharp/fsharp/issues/224
Consider merging this packaging repository with the contribution repository ・ Issue #303 ・ fsharp/fsharp
http://github.com/fsharp/fsharp/issues/303#issuecomment-39557870

似たパターンがあって、どうやら直っているらしいんだけど、私の環境だといまだに静的リンクエラーが出てます。たぶん原因が違うのかなと思って、実験用のサンプルコードを書きました。

■SimpleEventTypeProvider

moonmile/SimpleEventTypeProvider
http://github.com/moonmile/SimpleEventTypeProvider

プロジェクトの構造がややこしいですが、こんな感じです。

• SimplePclTypeProvider タイププロバイダ本体
• XamlPcl プリミティブなクラスのみ使ったイベント処理
• XamlPclXamarin Xamarin.Forms を使ったイベント処理
• SimpleEventTypeLib PCL で作ったライブラリ
• SimpleEventTypeLocalLib Library で作ったライブラリ

タイププロバイダ本体は、こんなコードになります。

namespace Moonmile.FSharp.Lib
open System
open Microsoft.FSharp.Core.CompilerServices
open ProviderImplementation.ProvidedTypes
open System.Reflection

[<assembly:TypeProviderAssembly>]
do ()

type MyButton() =

    let event1 = new Event<_>()
    [<CLIEvent>]
    member this.Click = event1.Publish
    member this.ClickEvent(arg) =
        event1.Trigger(this, arg)    

[<TypeProvider>]
type SimpleEventType(config:TypeProviderConfig) as this = 
    inherit TypeProviderForNamespaces()
    let namespaceName = "Moonmile.SimpleEventTypeProvider" 
    let thisAssembly = Assembly.GetExecutingAssembly()


    /// 型生成を残す場合
    /// [<Litelal>]
    /// let xaml = "<ContentPage>...</ContentPage>"
    /// type MainPage = SimpleEventTypeProvider.XAML< xaml >
    // 型の定義
    let t = ProvidedTypeDefinition(thisAssembly, namespaceName, "XAML", Some(typeof<obj>), IsErased = false )
    do t.DefineStaticParameters(
        [ProvidedStaticParameter("xaml", typeof<string>)],
        fun typeName parameterValues -> 

            let outerType = 
                ProvidedTypeDefinition (thisAssembly, namespaceName, 
                    typeName, Some(typeof<obj>), IsErased = false )
            // テンポラリアセンブリに出力
            let tempAssembly = ProvidedAssembly(System.IO.Path.ChangeExtension(System.IO.Path.GetTempFileName(), ".dll"))
            tempAssembly.AddTypes <| [ outerType ]

            // コンストラクタの生成
            let ctor = ProvidedConstructor([], 
                            InvokeCode = fun args -> <@@ () @@> )
            do outerType.AddMember( ctor )

            // プロパティを追加
            let prop = 
                ProvidedProperty( "Name", typeof<string>, 
                    GetterCode = fun args -> <@@ "masuda tomoaki" @@> )
            do outerType.AddMember( prop )

            // ボタンを追加
            let propButotn = 
                ProvidedProperty( "Button", typeof<MyButton>, 
                    GetterCode = fun args -> 
                        <@@  
                            // let me = %%(args.[0]):obj
                            new MyButton()
                        @@> )
            do outerType.AddMember( propButotn )
            (*
            // 直接参照しても駄目
            let propXButton =
                ProvidedProperty( "XButton", typeof<Xamarin.Forms.Button>, 
                    GetterCode = fun args -> 
                        <@@  
                            // let me = %%(args.[0]):obj
                            new Xamarin.Forms.Button()
                        @@> )
            do outerType.AddMember( propXButton )
            *)


            let propXamlPcl =
                ProvidedProperty( "XmlPCL", typeof<XamlPcl.XamlPage>, 
                    GetterCode = fun args -> 
                        <@@  
                            // let me = %%(args.[0]):obj
                            new XamlPcl.XamlPage()
                        @@> )
            do outerType.AddMember( propXamlPcl )
            /// Xamarin.Forms 関連を PCL 外出しにしても駄目    
            let propXamarinPcl =
                ProvidedProperty( "XmlXamarinPCL", typeof< XamlPclXamarin.XamarinButton >, 
                    GetterCode = fun args -> 
                        <@@  
                            // let me = %%(args.[0]):obj
                            new XamlPclXamarin.XamarinButton()
                        @@> )
            do outerType.AddMember( propXamarinPcl )

            outerType
    )
    // 名前空間に型を追加
    do this.AddNamespace( namespaceName, [t] )

    // Xamarin.Forms.Core 用に追加
    override this.ResolveAssembly(args) = 
        let name = System.Reflection.AssemblyName(args.Name)
        let existingAssembly = 
            System.AppDomain.CurrentDomain.GetAssemblies()
            |> Seq.tryFind(fun a -> System.Reflection.AssemblyName.ReferenceMatchesDefinition(name, a.GetName()))
        match existingAssembly with
        | Some a -> a
        | None -> 
            // Fallback to default behavior
            base.ResolveAssembly(args)

ResolveAssembly がオーバーライドされているのは、タイププロバイダを利用するプロジェクト（SimpleEventTypeLocalLib）がビルドをするときに、Xamarin.Forms.Core を要求するためにこうしています。他にも別なのを要求してるのですが、まあ、こうやっておくと同じフォルダにある DLL を読み込んでくれます。

呼び出し側のコードはこんな感じです。Xamarin.Forms.Color.Black のようなプロパティの設定はうまくいくのですが、target.XButton.Clicked を呼び出した途端に「静的リンクエラー」になります。逆に言えば、Clicked を使わない限りは、ビルドが正常に通ります。

namespace SimpleEventTypeLocalLib

type MainPage = Moonmile.SimpleEventTypeProvider.XAML<"MainPage.xaml">

type MainPageEx(target:MainPage) =
    let mutable Name = ""
    
    do
       Name <- target.Name
       target.Button.Click |> Event.add( fun e -> ())  
       // Xamarin.Forms.Core が動的ロードされているので、静的リンクエラーになる
       // target.XButton.Clicked |> Event.add( fun e -> ())  
       (*
       let col = target.XButton.BackgroundColor
       let a = col.A
       target.XButton.BackgroundColor <- Xamarin.Forms.Color.Black
       target.XButton.Clicked |> Event.add( fun e -> ())
       *)
       let pcl = target.XmlPCL.Xaml
       target.XmlPCL.Click |> Event.add( fun e -> ())

       let xpcl = target.XmlXamarinPCL
       xpcl.Text <- "test"
       // この時点で、Xamarin.Forms の型が参照されて静的リンクエラーになる
       xpcl.Clicked |> Event.add( fun e ->())
       ()

■アセンブリを動的生成すると Native から Portable ライブラリが参照できない？？？

Static linking PCL assembly with mscorlib reference ・ Issue #224 ・ fsharp/fsharp
http://github.com/fsharp/fsharp/issues/224

の最初のコメントにあるコードを見ていくと

http://github.com/TIHan/fsharp/blob/master/src/fsharp/fsc.fs#L1656

error を出しているところがあります。これはオープンソース版ですが、行数は違いますが同じチェックがあります。

              // Rewrite type and assembly references
              let ilxMainModule =
                  let isMscorlib = ilGlobals.primaryAssemblyName = PrimaryAssembly.Mscorlib.Name
                  let validateTargetPlatform (scopeRef : ILScopeRef) = 
                      let name = getNameOfScopeRef scopeRef
                      if (isMscorlib && name = PrimaryAssembly.DotNetCore.Name) || (not isMscorlib && name = PrimaryAssembly.Mscorlib.Name) then
                          error (Error(FSComp.SR.fscStaticLinkingNoProfileMismatches(), rangeCmdArgs))
                      scopeRef
                  let rewriteAssemblyRefsToMatchLibraries = NormalizeAssemblyRefs tcImports
                  Morphs.morphILTypeRefsInILModuleMemoized ilGlobals (Morphs.morphILScopeRefsInILTypeRef (validateTargetPlatform >> rewriteExternalRefsToLocalRefs >> rewriteAssemblyRefsToMatchLibraries)) ilxMainModule

アセンブリを書き込むとき（ビルドするとき？）に .NETCore や mscorlib の整合性をチェックしているので、これにひっかかっているのかもしれません。

図解したように、出来るだけ遠くに（苦笑）Xamarin.Forms の PCL を置いて、直接 Android のほうから呼び出してやればうまくいくかもしれません。少なくとも、F# で作成するコードビハイドのような SimpleEventTypeLocalLib からは Clicked のような PCL の型を呼び出そうとすると「静的リンクエラー」になります。

まあ、コードビハイドはやめて、MVVM にして ICommand オンリーにすれば通るのですが…ちょっと面白くない。せっかくだから、Clicked のままやりたいのです。そうすると、内部的にリフレクションを使って iPhone の TouchUpInside も取れるのですがね。ムズイ。

コンパイラを直してしまう方法も考えたのですが、タイププロバイダ部分のビルドならともかく、コードビハイド部分の生成にオレオレコンパイラを使うのもちょっと難点が多いのでパスです。先のバグが直ったのか直ってないのかわかりませんが、現状の最新を取ってきても同じ現象になります。

にしても、最初の TypeProvider の作成で1日以内にできたのは、F# meet up のおかげです。感謝。

Xamarin.Forms で、次のページに遷移させるときには NavigationPage クラスを使って置いて、遷移先のページに対して、

await this.Navigation.PushAsync(new SubPage());

なことをやります。NavigationPage を使うと複数ページを簡単に扱えるので、超簡単なスマートフォンアプリを作る分には楽ですよね。テスト的に作るときにいいです。

これを F# でやります。

■サンプルコード

FSharpNavigationPushAsync
http://github.com/moonmile/XamarinSamples/tree/master/FSharpNavigationPushAsync

簡単な遷移だけのサンプルコードです。
iOS/Android/Windows Phone で動くようにしてあります。フロントは面倒なので C# で書いてありますが、中身の PCL のところは F# になっています。フロント部分は、基本そのままなので C# でも良いかと。

以下、F# で Xamarin.Forms を扱う時の手順も含めて書いておきます。

■Xamarin.Forms のプロジェクトを作る

残念ながら F# には、Mobile Apps がないので、C# で作ります。

Xamarin.Forms を使う PCL は Visual Studio 2013 でしか作れません。Xamarin Studio では作れません。これを、元の C# の PCL とすり替えます。

NuGet で Xamarin.Forms を更新しておきます。

各プロジェクトのバージョンが違うと、実行エラーになります。Android/iOS の場合は、特に問題がでないのですが、Windows Phone の場合は実行時にコケルので曲者です。

■F# PCL を standalone でビルドする

F# 単体で動かす場合には、FSharp.Core を気にしなくていいのですが、Xamarin を使って Android/iOS/Windows Phone で共通のライブラリを作るときは、standalone スイッチをつけてビルドをします。

standalone をつけなくても、Android/iOS の場合は大丈夫なのですが、何故か Windows Phone のときだけうまくいきません。FSharp.Core のバージョン違いのようで、Windows Phone SL なので、これは仕方がないっぽいです。
まあ、standalone の注意は、以下を見てください。

恐ろしい standalone オプション – 2つのアンコール
http://hafuu.hatenablog.com/entry/20121214

複雑に絡みあいはじめると、変なことになりそうですが、F# で作った PCL を C# のフロントで使う場合にはこれで十分でしょう。

■Windows Phone の ProductID を直す

Xamarin.Forms のプロジェクトテンプレートのバグです。Windows Phone のプロジェクトの ProductID のところを手作業で直しておきます。Properties/WMAppManifest.xml を Visual Studio で開こうとすると、「マニフェストを読む込むことができません」というエラーがでます。

このまま、XML エディタを開いて、

  <App xmlns="" ProductID="f653f4bf-b71d-4572-b073-bc2c48395070" Title="FSharpNavigationPushAsync.WinPhone" RuntimeType="Silverlight" Version="1.0.0.0" Genre="apps.normal"  Author="FSharpNavigationPushAsync.WinPhone author" Description="Sample description" Publisher="FSharpNavigationPushAsync.WinPhone" PublisherID="f1f3a5b4-b6e0-4488-9fde-ac0b70a9f79e">

これを、以下のように {} が付くように直します。プロジェクトテンプレートの {} 忘れです。

  <App xmlns="" ProductID="{f653f4bf-b71d-4572-b073-bc2c48395070}" Title="FSharpNavigationPushAsync.WinPhone" RuntimeType="Silverlight" Version="1.0.0.0" Genre="apps.normal"  Author="FSharpNavigationPushAsync.WinPhone author" Description="Sample description" Publisher="FSharpNavigationPushAsync.WinPhone" PublisherID="{f1f3a5b4-b6e0-4488-9fde-ac0b70a9f79e}">

Visual Studio Mobile Apps – Blank App (Portable/Shared) – Xamarin Forums
http://forums.xamarin.com/discussion/18694/visual-studio-mobile-apps-blank-app-portable-shared

あたりを参考にしてください。

■F#版の App.fs

C# で書いてある、Hello Forms をそのまま F# で書き直すと、こんな感じになります。

type App() =
    static member GetMainPage() =
        new ContentPage(
            Content = new Label(
                Text = "Hello, Forms !",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand ))

この状態で、Android/iOS/Windows Phoneが動作することを確認してください。

■F#で PushAsync する

遷移先のページを作っておきます。

type SubPage() as this =
    inherit ContentPage()
    do
        this.Content <-
            new Label(
                Text="This is SubPage",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand )

遷移元（メインページ）は、こんな感じです。StackLayout.Children のところが入れ子にできないので、C# のように書けないのが残念なのですが（今度、拡張メソッドを作りましょう）、ひとつひとつ組み立てていきます。

type App() =
(*
    static member GetMainPage() =
        new ContentPage(
            Content = new Label(
                Text = "Hello, Forms !",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand ))
*)

(*
    let pushNextPage(next) =
            let AwaitTaskVoid : (Task -> Async<unit>) =
                Async.AwaitIAsyncResult >> Async.Ignore
            page.Navigation.PushAsync(next) |> AwaitTaskVoid |> ignore
*)
    static member GetMainPage() =
        let button = new Button( Text = "Go Next Page")
        let layout = new StackLayout()
        layout.Children.Add( new Label( Text = "Navigation.PushAsync"))
        layout.Children.Add( button )
        let page = new ContentPage ( Content = layout )
        button.Clicked.Add( fun(_) ->

                // C# の場合は
                // await page.Navigation.PushAsync(new SubPage())
                // これで動作する

                /// 1.これで良さそうな気もするのだがこれは動かない
                // let t = button.Navigation.PushAsync( page )
                // t.Start()
                // t.Wait()
                ///

                /// 2.スレッドを変えてみたが、Android/iOS だけ動く
                // 何故か Windows Phone では動かず
                // let tk = new Task(fun() ->
                //    let t = page.Navigation.PushAsync(new SubPage())
                //    t.Start()
                // )
                // tk.RunSynchronously()

                /// 3. async すると戻り値がvoidなので、ややこしいのだが、
                /// この方式だと3プラットフォームで動く
                /// 参考 http://stackoverflow.com/questions/8022909/how-to-async-awaittask-on-plain-task-not-taskt
                /// async {} の場合、戻り値を持たない Task が使えないのでこうやるらしい。
                /// Page.Navigation.PushAsync が戻り値を持たないのでややこしいだけ。
                let AwaitTaskVoid : (Task -> Async<unit>) =
                    Async.AwaitIAsyncResult >> Async.Ignore
                page.Navigation.PushAsync(new SubPage()) |> AwaitTaskVoid |> ignore

            )
        new NavigationPage(page)

結論から言うと、PushAsync するときに、async の結果を捨てるための補助関数が必要になります。
F# では async/await を書けないので、async {} を使うわけですが、動きが微妙に違うのが曲者です。いや、どちらがいいという訳ではないのですが、一対一にコンバートできません。

/// 1.これで良さそうな気もするのだがこれは動かない
let t = button.Navigation.PushAsync( page )
t.Start()
t.Wait()

一見、これで動きそうな気もするのですが、iOS/Android の実装が異なるらしく動きません。Windows Phoneのほうも駄目なので、PushAsync が返している Task は別ものっぽいです。

/// 2.スレッドを変えてみたが、Android/iOS だけ動く
// 何故か Windows Phone では動かず
let tk = new Task(fun() ->
   let t = page.Navigation.PushAsync(new SubPage())
   t.Start()
)
tk.RunSynchronously()

描画スレッドの違いがおかしいらしいので、別に Task を作ると動くようになります。最初、Xamarin.Forms.XamlProvider は、この方式でやっていたのですが、昨晩 Windows Phone で動かしてみると実行エラーがでることがわかりました。

/// 3. async すると戻り値がvoidなので、ややこしいのだが、
/// この方式だと3プラットフォームで動く
/// 参考 http://stackoverflow.com/questions/8022909/how-to-async-awaittask-on-plain-task-not-taskt
/// async {} の場合、戻り値を持たない Task が使えないのでこうやるらしい。
/// Page.Navigation.PushAsync が戻り値を持たないのでややこしいだけ。
let AwaitTaskVoid : (Task -> Async<unit>) =
    Async.AwaitIAsyncResult >> Async.Ignore
page.Navigation.PushAsync(new SubPage()) |> AwaitTaskVoid |> ignore

結果的に async {} に沿う形に直してやると Windows Phone でも動くようになります。async {} の場合は、戻り値を持たない Task を扱うことができないので、AwaitTaskVoid のような補助メソッドを用意してやります。

Async を拡張して、Async.AwaitTaskVoid にすると、それっぽくなります。

module AsyncExtentions =
    type Async with
        static member AwaitTaskVoid : (Task -> Async<unit>) =
                        Async.AwaitIAsyncResult >> Async.Ignore
open AsyncExtentions
...
page.Navigation.PushAsync(new SubPage()) |> Async.AwaitTaskVoid |> ignore

調子に乗って、コンピュテーション式でやろうとして async do! を使うと動かないんですよねー。これは3機種とも動きません。

async {
    do! page.Navigation.PushAsync(new SubPage()) |> Async.AwaitTaskVoid
} |> ignore

というわけで、F# で PushAsync するときは、Async.AwaitIAsyncResult 拡張を作ってから呼び出すといい、というか注意書きということです。

1週間ほど掛けて、おおまかなところが動いてきたのでアルファ版で公開します。
何ができるかというと、Xamarin.Forms の XAML ファイルを動的にロードして、エミュレータ上に表示させます。現在のところ、Xamarin Studio にも Visual Studio にも GUI ベースのデザイナがないので、XAML コードを手打ちしています。まあ、手打ち自体は構わないのですが、画面の表示を確認するのに、いちいちビルドしてエミュレータなどにデプロイしないと画面が分かりません。勢い、StatckLayout などの汎用的な画面を作ることが多いのですが、それにしても色とか微妙な文字の配置とかが面倒です。そこで、XAML 記述を HTTP 経由で持ってきて、エミュレータ内で再構築するプレビューツールを作りました。エミュレータ上で画面をリロード（HTTP 経由で XAML ファイルを再びロード）することで、画面の状態が更新できます。これにより、ひとまず、XAMLのコードを書く→デプロイ→デザインの確認→XAMLのコード直し、というサイクルがなくなり、XAMLのコードを書く→画面をリロードする→XAMLの手直し、の手順だけで良くなります。ちょっと、使ってみた感じでは、表示している文字変更とか色変更が手軽にできるので、Xamarin Studio で本格的なデザイナが作られるまでのツナギになるとは思います。

■ダウンロード

moonmile/XFormsPreviewer
https://github.com/moonmile/XFormsPreviewer

まだ、NuGet を作っていないので、github から直接取ってきてください

■構成

• Host/XFormsPreviewerHost ? XAML データを提供する簡易ホスト
• Sample/XFormsSampleApp — サンプルプロジェクト（XAMLファイルが含まれる）
• Viewer/XFormsPreviewer — 簡易プレビューア
• XFormsProvider ? Xamarin製XAMLのパーサ
• XFormsProvider.Test ? テストプロジェクト

プレビューアが、簡易ホストを経由してサンプルプロジェクト内の XAML ファイルを表示させます。プレビューア自体は、iOS/Android/Windws Phoneエミュレータなので、適当にカスタマイズしてリロードしてください。今後はもうちょっとプレビューア/簡易ホストをもう少しリッチにしていきましょう。

■使い方

応答する XAML ファイルを指定する。
簡易ホストを書き換えて、応答する XAML ファイルを指定します。/get/item のような形式で、プレビューアから呼び出されます。

 
public PreviewHost()
{
    this.Port = 10150;
    this.LoadPaths = new Dictionary<string, string>();
    // TODO: change load xaml file
    // ここで、レスポンスを返す XAML ファイルを指定。
    // 作成中のプロジェクトフォルダを指定すればok.
    // 後で WPF あたりで作成してドラッグ＆ドロップ.
    // mac のためにコマンドラインで使えるようにしておく。
    var basefolder = @"..\..\..\Sample\XFormsSampleApp\XFormsSampleApp\";
    this.LoadPaths.Add("0", basefolder + "MainPage.xaml");
}

簡易クライアントを管理者モードで立ち上げる。
Windows 8.1 の場合は、ローカルサーバーを立ち上げるときに指定ポートを明示的に開ける必要があります。面倒な場合は、コマンドプロンプトを管理者モードで立ち上げてください。

プレビューアで要求ボタンを書き換える。
新しくボタンを作ってもよいし、既存のボタンを書き換えてもよいです。

/// <summary>
/// HTTP クライアント経由で XAML ファイルをロードする
/// http://hostname:10150/get/[num] 形式で取得する
/// [num] 部分は XFormsPreviewHost と合わせる
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
async void OnClickSample0(object sender, EventArgs e)
{
    var hc = new HttpClient();
    try
    {
        var res = await hc.GetStringAsync(this.Uri + "0");
        var page = PageXaml.LoadXaml(res);
        await this.Navigation.PushAsync(page);
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(ex.Message);
    }
}

呼び出しは /get/item 形式です。XAML データのローディングは非常に簡単ですPageXaml.LoadXaml(res) のように LoadXaml メソッドを呼び出すことで Page オブジェクト（内部で設定している ConentPage オブジェクトなど）を受け取ることができます。ここでは Navigation を使って PushAsync メソッドで画面遷移をさせます。これにより、ボタンを押すごとに XAML データのリロードができます。

ホスト名を書き換える。通常、エミュレータからは名前解決ができないと思うので、IP アドレスを直書きしています。このあたりは、別途設定ファイルから読み込ませる予定です。

public MainPage()
{
    InitializeComponent();

    this.Port = 10150;
    // TODO: Change IP address of XFormsPreviewHost.exe on machine.
    // XAML ファイルをホスティングしている PC の IP アドレスを書く。
    // エミュレータから名前解決ができれば、マシン名でもOK.
    this.Hostname = "172.16.0.9";
}

一度作ったプレビューアは何度も再利用ができます。/get/item コマンドだけ変更しなければ、簡易ホストのほうで、自由に応答 XAML ファイルを変更できます。

Visual Studio のほうでは、XAML のインテリセンスが効かないので、Xamarin Studio で XAML ファイルを編集します。属性などをコード補間してくれるので、多少は間違いがすくないかも。

■Type Provider 風に提供

XFormsPreviewer/XFormsProvider/PageXaml.fs at master ・ moonmile/XFormsPreviewer
https://github.com/moonmile/XFormsPreviewer/blob/master/XFormsProvider/PageXaml.fs

パーサ自体は F# で書いています。PCL の場合 FSharp.Core の競合があって懸念点が多いのですが、各種のワーニングは無視です。警告がいやだったので、最初は C# で書いていたのですが、今後のメンテを考えると F# のほうが良いかなと（単なる趣味…かもしれません）。

すごい大ざっぱに書いているので、タグ名とプロパティ名の対応を取ってない（DTDを考慮していない…というか、そもそも Xamarin.Forms の XAML に DTD が用意されていないのが問題では？…とも思ったけど、MS製XAML http://schemas.microsoft.com/winfx/2006/xaml/presentation のほうの記述もないので、そういうものかもしれない）のですが、まあツナギなので動けばよいという考えて作っています。が、どうせならば、F# の Type Provider と互換をとりたいですよね。FsXaml な感じで、WPF 製 XAML と互換を取るぐらいまでは作る予定です。最終的には、Windows Store 製 XAML や Android の axml, Xcode の storyboard の互換までいきたい。

■できないこと

本格的にデザイナ/プレビューアとして使うには、足りない機能が満載なのですが、

• static resource の参照ができない。
• 外部 UI モジュールを呼び出せない。
• x:Name を参照できない。
• ICommand が動かない。
• MVVM の Binding が動かない。
• デザイン時の Data Binding がないので、ListView が表示できない。

の項目ができません。このあたりは、おいおい実装していく予定です。これを実装すると、動的に XAML をロードするだけで、本体に View がいらないという状態になって、本格的に MVVM での View と ViewModel の疎結合が実現できそうです。