演练：使用Xamarin.Forms开发产品介绍性质的应用（VB版）

时间：2016-07-17 13:12:47 阅读：216 评论：0 收藏：0 [点我收藏+]

标签：

概述

Xamarin这个使用mono和.net core的跨平台开发框架这几年在不断发展。被微软收购后的Xamarin为个人开发者提供了免费版的Xamarin for Visual Studio，吸引了更多开发人员的关注。

Xamarin.Forms用起来比较方便，因为用这种方式编写一次就能到处运行。但是不知道为什么，Xamarin目前只完整支持C#。他们宣称支持的F#实际上只是比C#多了一些文档和不常用的工具上的支持，缺少Xaml后代码生成器等重要功能支持。

而VB就更受冷落了。用户建议Xamarin支持VB的票数截止这篇博客发布已经有397票（查看投票），但是Xamarin并没有明确表示是否为VB提供支持。

幸运的是，Xamarin并没有把习惯使用VB的开发人员的路堵死。在Xamarin的GitHub示例库中藏着几个VB代码文件，教程区一个不起眼的角落里有关于在Xamarin使用VB代码的教程。教程和示例文件都是用C#建立Xamarin.Forms项目，然后把C#可移植类库替换成VB可移植类库就可以用VB写共用的UI代码和业务逻辑代码。缺陷是不能使用Xaml文件产生所需的代码。

现在，Xamarin缺的VB开发实战教程由我来填补。

第一步，新建项目

按照Xamarin.Forms的教程，先新建C# Xamarin.Forms 可移植项目。然后把C#可移植类库删掉，用相同的目标，相同的项目名称和命名空间新建一个VB可移植项目替代它。重新在C#项目添加对可移植类库的引用。如果需要，在VB项目的默认导入添加Xamarin.Forms。

第二步，更新Nuget包

使用Nuget软件包管理器对每个项目的Xamarin.Forms包进行更新。如果忽略这一步，会导致运行时错误。

第三步，建立App.vb文件

默认的模板会创建Class1.vb文件。把它重命名为App.vb，然后填充以下内容：

Public Class App
    Inherits Application

    Sub New()
        MainPage = New NavigationPage(New MainPage)
    End Sub

End Class

使用 NavigationPage 可以方便页面间的导航，当然也可以不用它。

插入这段代码后，Intellisense会提示你创建 MainPage 类。点击在新文件中创建它。

第四步，建立软件中的页面

假设第一个页面是 ContentPage。把自动生成的继承语句改一下。

Public Class MainPage
    Inherits ContentPage

End Class

既然Xamarin不让在VB中用Xaml，那我们就不要用类似于UWP的开发方式了。让我们回归原生态，寻找十年前用Winform打代码的感觉。

新建一个名为 MainPage.Designer.vb 的文件。

像当年一样，这个文件中的 MainPage 类用 Partial 标记

Option Strict On

Partial Public Class MainPage

End Class

接下来要做什么想必有读者可以猜到。写构造函数和 InitializeComponents 方法。

    Protected Sub InitializeComponents()

    End Sub

    Sub New()
        InitializeComponents()
    End Sub

假设我们的页面顶部要放一个类似于Windows商店的控件，下面放置一组介绍用的横幅。

首先，下面的东西多的话页面可能放不下。所以需要一个滚动显示框。里面的内容是依次向下排列的。最顶上的控件是旋转木马。

WithEvents sclContentViewer As New ScrollView,
    stkContent As New StackLayout,
    crsBanner As New CarouselControl

由于Xamarin没有旋转木马，下一步是新建用户控件。

第五步，新建用户控件

使用Intellisense快速新建 CarouselControl.vb 文件

同样，手动新建CarouselControl.Designer.vb文件。

旋转木马控件具有向左转，向右转按钮，按钮底下压着要呈现的内容，使用滑动手势可以向左转或向右转，点击会触发点击事件。控件的底部有个指示器显示旋转木马的旋转进度。

Partial Public Class CarouselControl
    Inherits ContentView

    WithEvents btnLeft As New Button With {
        .Text = "<", .HorizontalOptions = LayoutOptions.Start, .VerticalOptions = LayoutOptions.Fill, .FontSize = 32,
        .BackgroundColor = Color.FromRgba(0, 0, 0, 0.01), .BorderWidth = 0, .TextColor = Color.FromRgba(0, 0, 0, 0.7), .BorderColor = Color.Transparent
    },
    btnRight As New Button With {
        .Text = ">", .HorizontalOptions = LayoutOptions.End, .VerticalOptions = LayoutOptions.Fill, .FontSize = 32,
        .BackgroundColor = Color.FromRgba(0, 0, 0, 0.01), .BorderWidth = 0, .TextColor = Color.FromRgba(0, 0, 0, 0.7), .BorderColor = Color.Transparent
    },
    cntDetail As New Grid,
    grdItemView As New Grid,
    panDetector As New PanGestureRecognizer,
    layoutRoot As New StackLayout,
    indicator As New CarouselIndicator With {
        .HorizontalOptions = LayoutOptions.Center
    }

    Sub New()
        InitializeComponents()
    End Sub

    Protected Sub InitializeComponents()
        With grdItemView.Children
            .Add(cntDetail)
            .Add(btnLeft)
            .Add(btnRight)
        End With
        GestureRecognizers.Add(panDetector)
        layoutRoot.Children.Add(grdItemView)
        layoutRoot.Children.Add(indicator)
        Content = layoutRoot
    End Sub
End Class

由于篇幅有限，旋转木马的指示器代码见文章最后的GitHub链接。

回到旋转木马类没有分部的那个文件。

这个控件要写的东西很多，我挑重要的讲解。处理事件与使用Winform的时候是一样的，在下拉列表点控件和事件就可以生成空白的事件处理代码。

以滑动手势识别为例，在自动生成的代码中填充处理滚动的代码。

    Private Sub panDetector_PanUpdated(sender As Object, e As PanUpdatedEventArgs) Handles panDetector.PanUpdated
        If Math.Abs(e.TotalX) > Math.Abs(e.TotalY) Then
            Dim threshold = btnLeft.Width
            If e.TotalX > threshold Then
                MoveBack()
            ElseIf e.TotalX < -threshold Then
                MoveForward()
            End If
        End If
    End Sub

横幅控件 MediumBanner 也是类似的写法。如果不想给ContentView控件写新的模板，新建这个横幅控件是合适的。

横幅控件的数据绑定比较简单，贴一些代码。

首先是在构造函数设定绑定。这里的概念与UWP的数据绑定是类似的。注意，某些转换器需要自己写的情况是没有变的。

imgIcon.SetBinding(Image.SourceProperty, NameOf(MediumBannerData.IconImage), converter:=New EmbeddedImageLoader)

设定完绑定，在创建控件的时候指定数据上下文。注意，Xamarin的数据上下文属性是 BindingContext而不是DataContext。

WithEvents btnAbout As New MediumBanner With {.BindingContext = New MediumBannerData("aboutbanner.png", "关于本软件", "about.png")}

一般的控件没有点击事件，那么我们可以给点击手势识别器的Command属性进行数据绑定，也可以利用它的Tapped事件自己写一个Clicked事件。

btnTapHitTest.SetBinding(TapGestureRecognizer.CommandProperty, NameOf(CarouselControlDefaultModel.OnClick))

第六步，进一步使用Mvvm模式

旋转木马控件用Mvvm模式可以省去不少麻烦。

首先是新建Model。

Public Class CarouselControlDefaultModel
    Sub New(functionName As String, embeddedImageFileName As String, onClick As ICommand)
        Me.FunctionName = functionName
        Me.EmbeddedImageFileName = embeddedImageFileName
        Me.OnClick = onClick
    End Sub
    Public Property FunctionName As String
    Public Property EmbeddedImageFileName As String
    Public Property OnClick As ICommand
End Class

接下来是它对应的 ViewModel

集合用什么类型取决于相应的控件实现到什么程度。

Public Class HoneyCarouselViewModel
    Sub New(items As List(Of CarouselControlDefaultModel))
        Me.Items = items
    End Sub

    Public Property Items As New List(Of CarouselControlDefaultModel)
End Class

数据最好放到资源文件里。如果数据少，可以直接写到代码里。

View与ViewModel的绑定代码是在相应的页面里写的。

    Sub New()
        InitializeComponents()
        crsBanner.ItemsSource = vm.Items
    End Sub

重复前几步直到首页写完。

第七步，处理页面间的导航

导航的代码很简单。

不管是导航到某个页面还是导航回来，都是使用Navigation对象进行操作。

    Private Sub btnAbout_Clicked(sender As Object, e As EventArgs) Handles btnAbout.Clicked
        Navigation.PushAsync(New AboutPage)
    End Sub

第八步，处理平台特定的功能

我搜索了Xamarin.Forms的教程，结果没发现打开浏览器这个功能。缺少这个功能的话，就得自己分别在其它项目实现了。

新建一个类或者是一个模块，包含打开浏览器用的事件和引发事件的过程。

Public Class HyperlinkNavigationService
    Public Shared Event NavigationRequested(link As Uri)
    Public Shared Sub NavigateTo(link As Uri)
        RaiseEvent NavigationRequested(link)
    End Sub
End Class

在安卓项目里处理浏览器导航请求事件

    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            HyperlinkNavigationService.NavigationRequested += HyperlinkNavigationService_NavigationRequested;
            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }

        private void HyperlinkNavigationService_NavigationRequested(Uri link)
        {
            StartActivity(new Intent("android.intent.action.VIEW", Android.Net.Uri.Parse(link.OriginalString)));
        }

        protected override void OnDestroy()
        {
            base.OnDestroy();
            HyperlinkNavigationService.NavigationRequested -= HyperlinkNavigationService_NavigationRequested;
        }
    }