Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

【朗報?】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.vbApp.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 を別プロジェクトで用意して参照する形で、データバインディングなどを使用することは出来ます。こちら を参照してください。

サンプル・参考資料

画面写真

f:id:ytabuchi:20150909172418p:plain:w300 f:id:ytabuchi:20150909172433p:plain:w300 f:id:ytabuchi:20150909172444p:plain:w300

GitHub

UI だけ書いてみました。上記の写真のように ListView とか試しに使ってみてます。

Xamarin サンプル

参考資料

Xamarin.Forms using Visual Basic.NET - Xamarin ← 手順が詳しく載ってます。

Xamarin 気になった方は

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

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

以上です。

エクセルソフト | ダウンロード | 学習用リソース | JXUG リンクページ | ブログ購読