【朗報？】Visual Basic ユーザーも Xamarin.Forms でモバイル開発者になれます！

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

2015/9/9 現在の最新 Stable Xamarin.Forms.1.4.4.6392 と Visual Studio 2015 を使用しています。

Mobile Apps with Visual Basic & Xamarin.Forms | Xamarin Blog

こんなエントリーがアップされていました。日本では VB.NET 開発者の方も多いと聞きます。社内アプリや受託開発の案件を VB.NET で開発されている方も Xamarin.Forms を使用すればすぐにモバイル開発を始めることができます！VB.NET の案件にモバイル化の提案を上乗せしてはいかがでしょうか？^^

私は VB.NET はほぼ書けませんが上記エントリーとリンクのドキュメントを見ながらやってみました。

準備

まずは通常通り Xamarin.Forms のプロジェクトを作成します。(本家ではプロジェクト残していますが、結果は同じなので) C# の PCL プロジェクトの名前空間だけ覚えておいて、プロジェクトは Visual Studio とエクスプローラーからも削除してしまいましょう。

Visual Basic＞クラスライブラリ (ポータブル) から先ほど消したプロジェクトと同じ名前で PCL を作成します。
f:id:ytabuchi:20150909165139p:plain:w450

プロジェクトのプロパティを開き、既定の名前空間が正しく設定されている事を確認し、
f:id:ytabuchi:20150909165515p:plain:w450

ターゲットを次のように修正します。
f:id:ytabuchi:20150909165758p:plain:w300

次に手動で NuGet から Xamarin.Forms を追加します。Xamarin.Forms プロジェクト作成時に標準でインストールされる 1.3.3 は iOS ListView の HasUnevenRows にバグがあるので、全プロジェクトを最新の 1.4.4.6392 に上げておきましょう。

iOS/Android/Windows Phone 各ネイティブプロジェクトから、Visual Basic の PCL を参照します。
f:id:ytabuchi:20150909170011p:plain:w300

最後に VB プロジェクトの Class1.vb を App.vb に変更します。(Visual Studio 2015 の場合はファイル名を変更するとクラス名も変えてくれます。便利ですね。)

開発

後は普通に VB の記述で Xamarin.Forms のページを書いていきます。IntelliSense も効きます！(Xaml で書きたい場合は、C# のコードビハインドの Xaml を含んだプロジェクトを別に用意するみたいです。こちら参照してみてください)
f:id:ytabuchi:20150909170233p:plain:w450

App クラスには、Xamarin のドキュメントのようにすぐにページを記述しても構いませんし、

Public Class App
    Inherits Application
    Public Sub New()
        Dim label = New Label With {.XAlign = TextAlignment.Center,
                                    .FontSize = Device.GetNamedSize(NamedSize.Medium, GetType(Label)),
                                    .Text = "Welcome to Xamarin.Forms with Visual Basic.NET"}
        Dim stack = New StackLayout With {
            .VerticalOptions = LayoutOptions.Center
        }
        stack.Children.Add(label)
        Dim page = New ContentPage
        page.Content = stack
        MainPage = page
    End Sub

以下のように NavigationPage を呼んでも良いですね。

Public Sub New()
    Dim navi = New NavigationPage(New Page1)
    navi.BarBackgroundColor = Color.FromHex("3498db")
    navi.BarTextColor = Color.White
    MainPage = navi
End Sub

ListView もやってみましたが、まったく問題ないですね。

Public Class MyCell
    Inherits ViewCell

    Public Sub New()

        Dim img = New Image With {.WidthRequest = 80,
            .HeightRequest = 80}
        img.SetBinding(Image.SourceProperty, "Image")
        Dim name As New Label With {.TextColor = Color.Default,
            .FontSize = Device.GetNamedSize(NamedSize.Large, GetType(Label))}
        name.SetBinding(Label.TextProperty, "Name")
        Dim birthday As New Label With {.TextColor = Color.Accent}
        birthday.SetBinding(Label.TextProperty,
                            New Binding("Birthday", stringFormat:="{0:yyyy年MM月dd日生まれ}"))

        Dim subCell = New StackLayout With {.Spacing = 10,
            .VerticalOptions = LayoutOptions.CenterAndExpand}
        subCell.Children.Add(name)
        subCell.Children.Add(birthday)

        Dim mainCell = New StackLayout With {.Orientation = StackOrientation.Horizontal,
            .Spacing = 10,
            .Padding = 5}
        mainCell.Children.Add(img)
        mainCell.Children.Add(subCell)

        Me.View = mainCell

    End Sub
End Class

こんな感じの ViewCell を

Dim list = New ListView With {.ItemsSource = persons,
    .ItemTemplate = New DataTemplate(GetType(MyCell)),
    .HasUnevenRows = True,
    .SeparatorVisibility = False}

とかで呼び出してあげる感じ。Forms の書き方は大分慣れてきたので、何とか書けました。VB.NET 開発者の皆様であれば、バックエンドの部分も VB.NET で書けるので、Xamarin で時々言われる「開発者の確保が大変」 という点が解消するかもしれませんね。

注意事項

現在利用できるのは、Xamarin.Forms で VB を使って PCL 内で記述する。というところだけです。

Custom Renderers は Visual Basic では記述出来ません。各ネイティブ iOS/Android/WP プロジェクトで C# で記述してください。
Dependency Service は Visual Basic では記述出来ません。各ネイティブ iOS/Android/WP プロジェクトで C# で記述してください。
XAML ページは Visual Basic プロジェクトにはありません。コードビハインドジェネレーターが C# のみを生成するため。Xaml を別プロジェクトで用意して参照する形で、データバインディングなどを使用することは出来ます。こちらを参照してください。