2016/11/05

在 Xamarin.Forms中，使用 ZXing.Net.Mobile 產生各種條碼圖片

若想要在 Xamarin.Forms 應用程式中，產生各種一維或者二維條碼圖片，可以按這這篇文章的設定步驟，就可以讓 Xamarin.Forms 的應用程式顯示這些圖片。

在 ZXing.Net.Mobile 環境中，支援底下的條碼

    public enum BarcodeFormat
    {
        AZTEC = 1,
        CODABAR = 2,
        CODE_39 = 4,
        CODE_93 = 8,
        CODE_128 = 16,
        DATA_MATRIX = 32,
        EAN_8 = 64,
        EAN_13 = 128,
        ITF = 256,
        MAXICODE = 512,
        PDF_417 = 1024,
        QR_CODE = 2048,
        RSS_14 = 4096,
        RSS_EXPANDED = 8192,
        UPC_A = 16384,
        UPC_E = 32768,
        All_1D = 61918,
        UPC_EAN_EXTENSION = 65536,
        MSI = 131072,
        PLESSEY = 262144,
        IMB = 524288
    }

建置一個 Prism 的 Xamarin.Forms 專案
在方案中啟動 NuGet 安裝工具，搜尋套件 ZXing.Net.Mobile.Forms，將這個套件安裝到所有的專案內。
修改首頁頁面，如底下的 XAML

底下的 XAML 首先命名了兩個額外的命名空間 Zxing / ZxingCommon，前者是要了要指向可以使用產生條碼圖片的控制項，而後者，則是為了要使用 BarcodeOptions 這個物件，用來設定條碼的大小等特性。

要顯示條碼，可以使用 ZXingBarcodeImageView 控制項，其中這個 Element 內的 Attribute 屬性，是用來設定要顯示的條碼類型，而該條碼的原始文字內容，需要使用 BarcodeValue 這個值來設定。

若要設定該條碼產生的圖片大小，則需要使用 Property-Element 的表示方式，設定 ZXingBarcodeImageView.BarcodeOptions 這個屬性值；而當要設定這個屬性值的時候，我們需要使用另外一個命名空間 ZxingCommon 來設定 EncodingOptions 這個物件屬性，在這裡，使用了 Width & Height 這兩個屬性值。

<?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"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:Zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
             xmlns:ZxingCommon="clr-namespace:ZXing.Common;assembly=zxing.portable"
             x:Class="XFGenBarcode.Views.MainPage"
             Title="MainPage">
    <StackLayout x:Name="stacklayout" HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="{Binding Title}" />
        <Zxing:ZXingBarcodeImageView
            BarcodeFormat="QR_CODE"
            Margin="10"
            WidthRequest="300" HeightRequest="300"
            BarcodeValue="多奇數位創意有限公司 Vulcan Lee">
            <Zxing:ZXingBarcodeImageView.BarcodeOptions>
                <ZxingCommon:EncodingOptions Width="300" Height="300" />
            </Zxing:ZXingBarcodeImageView.BarcodeOptions>
        </Zxing:ZXingBarcodeImageView>
        <Zxing:ZXingBarcodeImageView
            HorizontalOptions="Fill" VerticalOptions="Fill"
            WidthRequest="300" HeightRequest="70"
            BarcodeFormat="CODE_128"
            BarcodeValue="DoggyVulcan123">
            <Zxing:ZXingBarcodeImageView.BarcodeOptions>
                <ZxingCommon:EncodingOptions Width="300" Height="40" />
            </Zxing:ZXingBarcodeImageView.BarcodeOptions>
        </Zxing:ZXingBarcodeImageView>
    </StackLayout>
</ContentPage>

若想要在 Code Behind 中使用產生條碼圖片，可以參考底下程式碼

using Xamarin.Forms;
using ZXing.Net.Mobile.Forms;

namespace XFGenBarcode.Views
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            var barcode = new ZXingBarcodeImageView
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
            };
            barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
            barcode.BarcodeOptions.Width = 300;
            barcode.BarcodeOptions.Height = 300;
            barcode.BarcodeOptions.Margin = 10;
            barcode.BarcodeValue = "ZXing.Net.Mobile";

            stacklayout.Children.Add(barcode);
        }
    }
}