如何在 .NET MAUI 中生成 QR Code

在本文中，我們將探討如何使用 .NET MAUI 這個現代框架來建立跨平台應用程式的 QR 碼生成器。 我們將利用IronBarcode庫生成QR碼並將其顯示在螢幕上。

什麼是 .NET MAUI？

.NET MAUI(跨平台應用程式使用者介面)是對 Xamarin Forms 框架的一次升級，允許開發人員使用單一代碼庫為多個平台構建原生用戶界面。 使用 .NET MAUI，您可以建立 Android、iOS、macOS、Windows 等應用程式，減少開發時間和精力。

介紹 IronBarcode

IronBarcode是一個功能強大的條碼和 QR 碼生成庫，用於 .NET 應用程式。 它提供了一個易於使用的API，用於創建各類型的條碼，包括QR碼，可以自定義設置如大小、錯誤更正和編碼選項。

設定 .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 Machine」。如果不是，請從工具列中的下拉選單選擇「Windows Machine」。

2. 點擊「開始偵錯」按鈕或按下 F5 以在 Windows 機器上建置並執行應用程式。

   

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

3. 在 Visual Studio 顯示的「啟用 Windows 開發人員模式」對話框中，找到標示為「適用於開發人員的設定」的連結。

   

4. 點擊「開發者設定」鏈接。 這將在您的 Windows 機器上打開設定應用程式。

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

   

   啟用開發者模式後運行專案。 接下來的視窗將會出現：

   

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

安裝 IronBarcode

安裝IronBarcode在 NuGet 套件管理器主控台中開啟。 要在 Visual Studio 中打開套件管理器主控台，您可以按照以下步驟進行：

1. 在您的 Windows 機器上啟動 Visual Studio。

2. 打開您要處理的專案或創建一個新專案。

3. 在 Visual Studio 菜單中，前往「工具」。

4. 在下拉選單中，點擊「NuGet 套件管理員」。

5. 另一個下拉式選單將會出現，您應該選擇「套件管理器主控台」。

   Package Manager Console 視窗將會開啟，為您提供一個命令列界面，以管理專案中的 NuGet 套件。 在套件管理器控制台中輸入以下命令。

:PackageInstall

這將把 IronBarcode 程式庫新增到您的專案中，並使其可供使用。

使用 IronBarcode 的 .NET MAUI QR Code 生成器

現在，讓我們編寫程式碼來建立我們自己的 QR Code 生成器行動應用程式。 為了在螢幕上顯示生成的 QR 碼，我們將利用 .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 頁面，用於生成 QR 碼。 以下是 .NET MAUI 元件的簡單說明：

• 
  ```<Label>```
  ```: 這個 ```
  ``` 的目的是```
  ```<Label>```
  ``` 元件是用於在螢幕上顯示文字。 在此應用程式中，用於顯示歡迎訊息和標題，以提供資訊和指導給使用者。

• 
  ```<Entry>: The<Entry>```
  ``` component` 用於為使用者提供文字輸入欄位。 在此應用程式中，使用者可以輸入他們想要編碼為 QR 碼的內容。

• 
  ```<Image>: The<Image>```
  ``` component 用於在螢幕上顯示圖像。 在此應用程式中，用於在使用者點擊生成按鈕後顯示生成的 QR 碼影像。

• 
  ```<Button>: The<Button>```
  ```component` 代表一個可點擊的按鈕。 它允許使用者在點擊時觸發一個動作。 在此應用程式中，按鈕用於根據使用者輸入的內容啟動 QR 碼的生成。<Entry>欄位。

這些組件一起創建了一個介面，使用者可以在其中輸入文字，點擊按鈕，並在螢幕上看到相應的 QR 碼顯示。

現在，讓我們編寫用於生成 QR Code 的後端代碼。 現在，打開 MainPage.xaml.cs 文件，並將後置代碼類更新如下：

using IronBarCode;

namespace QrCodeGeneratorMAUI;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        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)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }
}

Imports IronBarCode

Namespace QrCodeGeneratorMAUI

	Partial Public Class MainPage
		Inherits ContentPage

		Public Sub New()
			InitializeComponent()
		End Sub

		Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
			Dim text As String = qrCodeText.Text
			Dim qrCode = QRCodeWriter.CreateQrCode(text)
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace

以下是程式碼說明。

1. OnButtonClicked 方法是按鈕點擊事件的事件處理常式。 按下按鈕時，將執行此方法。

2. 在 OnButtonClicked 方法中，qrCodeText 輸入欄位中的文字被賦值給 text 變量。

3. QRCodeWriter.CreateQrCode(文字) 用於根據輸入的文字生成 QR 碼。

4. `qrCode.ToJpegBinaryData()將 QR 碼轉換為二進位 JPEG 資料。

5. qrCodeImage.Source = ImageSource.FromStream(() => 新的 MemoryStream(qrCodeBytes))將qrCodeImage` 控制項的來源設置為顯示生成的 QR 碼圖片。

運行 .NET MAUI 應用程式

讓我們運行項目來測試其功能。 按 F5 在 Windows 機器上運行應用程式。執行該專案後，將出現以下畫面。

在文字檔案中輸入您想要編碼的文字，然後按下生成QR碼按鈕。 QR碼將會生成並顯示在螢幕上，如下所示。

添加註釋和 QR 碼值

現在，我們已經開發了具有基本功能的 QR Code Generator。 讓我們透過添加 QR Code 註釋和 QR Code 值來使我們的 QR Code 更具功能性。 如下來源代碼所示，修改 OnButtonClicked 方法。

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	Dim text As String = qrCodeText.Text
	Dim qrCode = QRCodeWriter.CreateQrCode(text)
	qrCode.AddBarcodeValueTextBelowBarcode()
	qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

• qrCode.AddBarcodeValueTextBelowBarcode()`在生成的條碼下方添加二維碼值的文字。

• `qrCode.AddAnnotationTextAboveBarcode(「我的 QR Code 由 .NET MAUI 應用程式生成」)在條碼上方新增註解文本，指定它是由.NET MAUI應用程式生成的。

  Visual Studio 2022 為 .NET MAUI 應用程式提供熱重載選項。在更改 OnButtonClicked 之後，可以點擊熱重載，變更將會顯示出來，可能不需要關閉並重新建置應用程式。

  輸入您想要編碼的文字，然後按下生成 QR Code 按鈕。 QR Code 將如以下所示生成。

  

  IronBarcode 提供其他有用的功能，例如添加圖片、著色和調整 QR 碼大小等。欲了解更多詳細資訊教程和程式碼範例, 您可以參考他們的官方文件.

.NET MAUI 條碼生成器

您也可以借助IronBarcode庫創建.NET MAUI條碼生成器。 您只需要在代碼中稍作更改，我們就可以按照以下代碼範例開始進行。

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
		Dim text As String = barCodeText.Text
		Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)
		barCode.AddBarcodeValueTextBelowBarcode()
		barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
		Dim qrCodeBytes = barCode.ToJpegBinaryData()
		barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

輸出

除了學習如何使用 .NET MAUI 和 IronBarcode 庫創建 QR 碼生成器之外，還值得一提的是 IronBarcode 的定價方面。

IronBarcode開發免費並提供一個免費試用和不同的定價方案以滿足各種商業需求。 定價是根據授權選項，包括用於內部部署的永久性授權以及用於基於雲端部署的訂閱式授權。

結論

在本文中，我們學習了如何創建一個QR碼生成器使用 .NET MAUI 和 IronBarcode 庫進行條碼生成。 我們探討了安裝 IronBarcode、創建 QR 碼並使用 .NET MAUI 的圖像控制項將其顯示在螢幕上的步驟。

.NET MAUI 提供了一個強大的框架來構建跨平台應用程序，而 IronBarcode 簡化了生成條碼和 QR 碼的過程。 結合這些技術，您可以創建多功能且高效的應用程序，充分利用現代設備的功能。