在 Xamarin.Forms / .NET Standard 體驗之旅 4 的文章中,我們將要來測試每次進行 Xamarin.Forms 實戰課程,大家最想要學習與使用的這個 NuGet 套件:ZXing.Net.Mobile,也就是要開發出具有跨平台的條碼掃描程式。
我們從這個套件在 NuGet 官網上的內容可以看的出來,這個 NuGet 套件尚未支援 .NET Standard 標準類別庫,而是之前的可攜式 PCL 類別庫,不過,因為 .NET Standard 2.0 類別庫也支援可以使用 PCL 類別庫,因此,我們來測試看看,這個套件可否用於 Prism Template Pack 2.0.7 產生的 Xamarin.Forms 跨平台專案,並且進行一維條碼或者二維條碼 QR Code。
測試範例專案原始碼
這篇文章中的測試範例專案原始碼,您可以從這裡取得 https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFQRCode
開始建立專案
請點選功能表 [檔案] > [新增] > [專案],此時,您會看到底下的 [新增專案] 對話視窗。
我們點選 Prism Template Pack 提供的 Xamarin.Forms 專用的專案樣板,請點選 [已安裝] > [Visual C#] > [Prism] > [Prism Blank App (Xamarin.Forms)]。
接著在名稱欄位輸入該專案名稱後,點選 [確定] 按鈕,以建立此練習專案。
然後,在 [PRISM PROJEC WIZAD] 對話窗中,選擇您要跨平台的作業系統,容器 (Container) 這裡,我個人喜歡與習慣使用 Prism,您可以選擇您自己要用的容器,最後,點選 [CREATE PROJECT] 按鈕。
安裝 ZXing.Net.Mobile.Forms NuGet 套件
在這裡,請使用滑鼠右建,點選剛剛建立好的共用類別庫(也就是 .NET Standard 標準類別庫)節點,選擇 [管理方案的 NuGet 套件] 項目。
在 [瀏覽] 標籤頁次上,輸入
ZXing.Net.Mobile
這個關鍵字,搜尋出這個套件。請選擇 ZXing.Net.Mobile.Forms
這個套件,要來安裝到 .NET Standard 專案內。
從下圖中,我們可以看到這個套件並不支援 .NET Standard,不過,我們還是要把這個套件安裝到 .NET Standard 專案內。
當我們點選 [安裝] 按鈕之後,會看到 Visual Studio 會提示您這樣會安裝那些相依性的套件。
修正首頁頁面
我們對於這個應用程式的設計構想是這樣的,當這個應用程式一旦啟動,會在螢幕上顯示一個按鈕,和一些 Label 欄位,這些 Label 欄位是要用來顯示掃描到的條碼資訊。因此,當使用者按下 Scan... 按鈕之後,就會切換到另外一個頁面,這個頁面將會使用 ZXingScannerView 用來進行協助我們做到條碼掃描的工作。
安裝好套件之後,讓我們打開 MainPage.xaml 檔案,修改XAML內容。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XFQRCode.Views.MainPage"
Title="ZXing.Net.Mobile 條碼掃描">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Label Text="Welcome to Xamarin Forms and Prism!" />
<Label
Text="條碼類型"/>
<Label
Text="{Binding BarcodeFormatType}"/>
<Label
Text="{Binding BarcodeResult}"/>
<Button
Text="Scan..."
Command="{Binding ScanCommand}"/>
</StackLayout>
</ContentPage>
接著我們打開
MainPageViewModel.cs
檔案,修正 ViewModel 的商業邏輯程式碼。
這裡特別說明的是,當掃描條碼的頁面有掃描到結果,我們是透過頁面導航機制提供的相關事件,進行讀取來自掃描頁面的掃描結果。因此,您可以觀察 OnNavigatingTo 方法,我們將會透過比對
parameters.ContainsKey("Result")
表示式,確認該事件可以讀取掃描結果內容。namespace XFQRCode.ViewModels
{
public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
{
public event PropertyChangedEventHandler PropertyChanged;
public string BarcodeFormatType { get; set; }
public string BarcodeResult { get; set; }
public DelegateCommand ScanCommand { get; set; }
private readonly INavigationService _navigationService;
public MainPageViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
ScanCommand = new DelegateCommand(() =>
{
_navigationService.NavigateAsync("ScanPage");
});
}
public void OnNavigatedFrom(NavigationParameters parameters)
{
}
public void OnNavigatingTo(NavigationParameters parameters)
{
if(parameters.ContainsKey("Result"))
{
var fooReslut = parameters["Result"] as Result;
BarcodeFormatType = fooReslut.BarcodeFormat.ToString();
BarcodeResult = fooReslut.Text;
}
}
public void OnNavigatedTo(NavigationParameters parameters)
{
}
}
}
新增條碼頁面
接下來,我們需要新建立一個頁面,ScanPage,我們將會在這個頁面上使用 ZXingScannerView 用來進行協助我們做到條碼掃描的工作。
當新增完成 ScanPage 頁面,讓我們打開 ScanPage.xaml 檔案,修改XAML內容。
首先我們先宣告一個新的命名空間,
xmlns:Zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
,這樣,我們就可以使用這個命名空間前置詞參考到這個 ZXingScannerView 控制項。<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:Zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="XFQRCode.Views.ScanPage"
Title="進行條碼掃描中..."
>
<Grid
>
<Zxing:ZXingScannerView
HorizontalOptions="Fill"
IsAnalyzing="{Binding IsAnalyzing}"
IsScanning="{Binding IsScanning}"
Result="{Binding ScanResult, Mode=TwoWay}"
ScanResultCommand="{Binding ScanResultCommand}"
/>
<Zxing:ZXingDefaultOverlay Opacity="0.9" ShowFlashButton="False" />
</Grid>
</ContentPage>
接著我們打開
ScanPageViewModel.cs
檔案,修正 ViewModel 的商業邏輯程式碼。
一旦條碼有掃描到之後,將會執行 ScanResultCommand 的委派方法,不過,您需要特別注意,我們需要使用
Device.BeginInvokeOnMainThread
方法,將您要執行的程式碼,全部都指定在 UI (Main) Thread 上運行。namespace XFQRCode.ViewModels
{
public class ScanPageViewModel : INotifyPropertyChanged, INavigationAware
{
public event PropertyChangedEventHandler PropertyChanged;
public bool IsAnalyzing { get; set; } = true;
public bool IsScanning { get; set; } = true;
public Result ScanResult { get; set; }
private readonly INavigationService _navigationService;
public DelegateCommand ScanResultCommand { get; set; }
public ScanPageViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
ScanResultCommand = new DelegateCommand(async () =>
{
Device.BeginInvokeOnMainThread(async () =>
{
IsAnalyzing = false;
IsScanning = false;
var fooPara = new NavigationParameters();
fooPara.Add("Result", ScanResult);
// 回到上頁,並且把掃描結果帶回去
await _navigationService.GoBackAsync(fooPara);
});
});
}
public void OnNavigatedFrom(NavigationParameters parameters)
{
}
public void OnNavigatingTo(NavigationParameters parameters)
{
}
public void OnNavigatedTo(NavigationParameters parameters)
{
}
}
}
進行測試
最後,設定預設起始專案為 Android 專案,並且需要使用實體手機來進行測試。
了解更多關於 [Xamarin.iOS] 的使用方式
了解更多關於 [Xamarin.Forms] 的使用方式
了解更多關於 [Hello, Android:快速入門] 的使用方式
了解更多關於 [Hello, iOS – 快速入門] 的使用方式
了解更多關於 [Xamarin.Forms 快速入門] 的使用方式