如何在.NET MAUI中生成QR碼

.NET MAUI是什麼？

.NET MAUI （多平台應用程式 UI）是 Xamarin Forms 框架的演進版本，它允許開發人員使用單一程式碼庫為多個平台建立原生使用者介面。 借助.NET MAUI，您可以創建 Android、iOS、macOS、Windows 等應用程序，從而減少開發時間和精力。

隆重推出IronBarcode

IronBarcode是一個功能強大的條碼和二維碼產生庫，適用於.NET應用程式。 它提供了一個易於使用的 API，用於創建各種類型的條碼，包括二維碼，並具有可自訂的設置，例如尺寸、糾錯和編碼選項。

設定.NET MAUI項目

首先，我們需要在 Microsoft Visual Studio 2022 中建立一個新的.NET MAUI專案。您也可以使用 Microsoft Visual Studio Code，但步驟會有所不同。 但是，建議使用 Visual Studio。 請依照以下步驟建立專案。

開啟 Visual Studio 2022。螢幕將顯示如下內容。

點擊"建立新專案"，然後搜尋如下所示的 MAUI 範本。

選擇.NET MAUI應用程式模板，然後按一下"下一步"按鈕。 將出現以下視窗。

為您的專案命名，選擇位置，然後按一下"下一步"按鈕，將出現如下所示的視窗。

選擇.NET Framework。 我選擇了.NET 7，您也可以選擇.NET 6.0。項目將按如下所示建立。

本教學主要介紹如何將.NET MAUI應用程式首次部署到本機 Windows 機器。您可以根據需要，使用相同的程式碼庫在 Android 或 iOS 模擬器上進行設定。

若要將.NET MAUI應用程式部署到本機 Windows 計算機，您可以使用 Visual Studio 依照下列步驟操作：

1. 確保偵錯目標設定為"Windows 電腦"。如果不是，請從工具列的下拉清單中選擇"Windows 電腦"。

2. 點選"開始偵錯"按鈕或按 F5 鍵，在 Windows 電腦上建置並執行應用程式。

   

如果您的 Windows 電腦上未啟用開發者模式，Visual Studio 會提示您啟用它。 為此，請按照以下步驟操作：

1. 在 Visual Studio 顯示的"為 Windows 啟用開發人員模式"對話方塊中，找到標記為"開發人員設定"的連結。

   

2. 點選"開發者設定"連結。 這將開啟Windows電腦上的"設定"應用程式。

3. 開啟開發者模式下的開關，如下圖所示。

   

開啟開發者模式後執行專案。 將出現以下視窗：

這是 Visual Studio 2022 在建立專案時自動建立的範本應用程式。 現在我們將安裝IronBarcode並根據我們的需求修改程式碼。

安裝IronBarcode

若要安裝IronBarcode ，請開啟NuGet程式包管理器控制台。 若要在 Visual Studio 中開啟程式包管理器控制台，您可以依照下列步驟操作：

1. 在您的 Windows 電腦上啟動 Visual Studio。
2. 開啟你想使用的專案或建立一個新專案。
3. 在 Visual Studio 選單中，前往"工具"。
4. 從下拉式功能表中，按一下"NuGet套件管理器"。
5. 將出現另一個下拉式選單，您應該選擇"軟體包管理器控制台"。

"套件管理器控制台"視窗將會打開，為您提供一個命令列介面，用於管理專案中的NuGet包。 在軟體包管理器控制台中輸入以下命令來安裝IronBarcode。

Install-Package BarCode

這將把IronBarcode庫添加到您的專案中，並使其可供使用。

使用IronBarcode的.NET MAUI二維碼產生器

現在，讓我們編寫程式碼來創建我們自己的二維碼生成器行動應用程式。 為了在螢幕上顯示產生的二維碼，我們將利用.NET MAUI的功能。 開啟 MainPage.xaml 文件，並將其替換為以下程式碼。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

以上 XAML 程式碼表示一個產生二維碼的.NET MAUI頁面。 以下是.NET MAUI元件的簡要說明：

• <Label>: 在螢幕上顯示文字。 在本應用程式中，它用於顯示歡迎訊息和標題，以便向使用者提供資訊和說明。
• <Entry>: 提供使用者文字輸入欄位。 在這個應用程式中，使用者可以輸入他們想要編碼到二維碼中的內容。
• <Image>: 在螢幕上顯示影像。 在這個應用程式中，它用於在用戶點擊生成按鈕後向用戶顯示生成的二維碼圖像。
• <Button>: 表示一個可點擊的按鈕。 它允許用戶在點擊時觸發操作。 在本應用程式中，按鈕用於根據使用者在 <Entry> 欄位中輸入的內容啟動二維碼的產生。

這些元件共同創建了一個介面，使用者可以在該介面中輸入文字、點擊按鈕，並在螢幕上看到相應的二維碼。

現在，讓我們來寫一個產生二維碼的後端程式碼。 開啟 MainPage.xaml.cs 文件，並如下更新程式碼隱藏類別：

using IronBarCode;

namespace QrCodeGeneratorMAUI
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

using IronBarCode;

namespace QrCodeGeneratorMAUI
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

以下是程式碼解釋。

1. OnButtonClicked 方法是按鈕點擊事件的處理程序。 點擊按鈕時，將執行此方法。
2. 在 OnButtonClicked 方法內部，qrCodeText 輸入欄位中包含的文字被賦值給 text 變數。
3. QRCodeWriter.CreateQrCode(text) 用於根據輸入的文字建立二維碼。
4. qrCode.ToJpegBinaryData() 將二維碼轉換為二進位 JPEG 資料。
5. 將 qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) 設定為 qrCodeImage 控制項的來源以顯示產生的二維碼影像。

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

.NET MAUI條碼產生器

您也可以藉助IronBarcode庫建立.NET MAUI條碼產生器。 你只需要對程式碼稍作修改，就可以像下面的程式碼範例所示那樣運行了。

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

結論

在本文中，我們學習如何使用.NET MAUI和IronBarcode庫來建立二維碼產生器和條碼產生器。 我們探索了安裝IronBarcode、建立二維碼以及使用.NET MAUI 的影像控制項在螢幕上顯示二維碼的步驟。

.NET MAUI為建立跨平台應用程式提供了一個強大的框架，而IronBarcode簡化了產生條碼和二維碼的過程。 透過結合這些技術，您可以創建功能多樣、高效的應用程序，充分利用現代設備的性能。