跳過到頁腳內容
使用IRONBARCODE

如何在.NET MAUI中生成QR碼

在本文中,我們將探討如何使用 .NET MAUI(一個構建跨平台應用的現代框架)創建 QR 碼生成器。 我們將利用 IronBarcode 庫生成 QR 碼並在屏幕上顯示它們。

.NET MAUI 是什麼?

.NET MAUI(多平台應用 UI)是 Xamarin Forms 框架的演進,它允許開發人員使用單一代碼庫構建多平台的本地用戶界面。 使用 .NET MAUI,您可以創建 Android、iOS、macOS、Windows 和更多應用,從而減少開發時間和精力。

class="hsg-featured-snippet">

如何在 .NET MAUI 中生成 QR 碼

  1. 下載 C# 庫以生成 QR 碼
  2. 配置 MAUI 用戶界面
  3. 使用 CreateQrCode 方法從字符串生成 QR 碼
  4. 使用 ToJpegBinaryData 方法訪問圖像的二進制數據
  5. 將二進制數據傳遞給 MAUI 應用以顯示 QR 碼

介紹 IronBarcode

IronBarcode 是一個用於 .NET 應用程序的強大條碼和 QR 碼生成庫。 它提供了用於創建各種類型條碼的易於使用的 API,包括具有可自定義設置(如大小、錯誤校正和編碼選項)的 QR 碼。

設置 .NET MAUI 項目

要開始,我們需要在 Microsoft Visual Studio 2022 中創建一個新的 .NET MAUI 項目。您也可以使用 Microsoft Visual Studio Code,但步驟會有所不同。 然而,建議使用 Visual Studio。 按照以下步驟創建項目。

打開 Visual Studio 2022。將顯示如下面所示的屏幕。

如何在 .NET MAUI 中生成 QR 碼:圖 1 - Visual Studio 2022 IDE

點擊創建新項目並搜索 MAUI 模板,如下所示。

如何在 .NET MAUI 中生成 QR 碼:圖 2

選擇 .NET MAUI 應用模板並點擊下一步按鈕。 以下窗口將出現。

如何在 .NET MAUI 中生成 QR 碼:圖 3

命名您的項目,選擇位置並點擊下一步按鈕,將出現如下窗口。

如何在 .NET MAUI 中生成 QR 碼:圖 4

選擇 .NET 框架。 我選擇了 .NET 7,您也可以選擇 .NET 6.0。將創建的項目如下所示。

如何在 .NET MAUI 中生成 QR 碼:圖 5

本教程主要關注於 .NET MAUI 應用程序首次部署到本地 Windows 機器。您可以根據需要在 Android 或 iOS 模擬器上配置它,相同的代碼庫。

要在本地 Windows 機器上部署 .NET MAUI 應用程序,您可以使用 Visual Studio 按照以下步驟進行操作:

  1. 確保調試目標設置為“Windows 機器”。如果不是,請從工具欄的下拉菜單中選擇“Windows 機器”。
  2. 點擊“開始調試”按鈕或按 F5 在您的 Windows 機器上構建並運行應用程序。

如何在 .NET MAUI 中生成 QR 碼:圖 6

如果您的 Windows 機器上沒有啟用開發者模式,Visual Studio 將提示您啟用它。 要執行此操作,請按照以下步驟操作:

  1. 在 Visual Studio 顯示的“啟用 Windows 的開發者模式”對話框中,找到標有“開發者設置”的鏈接。

如何在 .NET MAUI 中生成 QR 碼:圖 7

  1. 點擊“開發者設置”鏈接。 這將在您的 Windows 機器上打開設置應用。
  2. 打開開發者模式下面的切換,如下所示。

如何在 .NET MAUI 中生成 QR 碼:圖 8

啟用開發者模式後運行項目。 以下窗口將出現:

如何在 .NET MAUI 中生成 QR 碼:圖 9

這是 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 庫添加到您的項目中並使其可用。

如何在 .NET MAUI 中生成 QR 碼:圖 10

.NET MAUI QR 碼生成器使用 IronBarcode

現在,讓我們編寫代碼來創建我們自己的 QR 碼生成器移動應用程序。 要在屏幕上顯示生成的 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>
XML

上述 XAML 代碼表示生成 QR 碼的 .NET MAUI 頁面。 以下是 .NET MAUI 組件的簡單說明:

  • <Label>:在屏幕上顯示文本。 在此應用中,用於顯示歡迎消息和標題,以便向用戶提供信息和指引。
  • <Entry>:為用戶提供文本輸入框。 在此應用中,它允許用戶輸入他們想編碼為 QR 碼的內容。
  • <Image>:在屏幕上顯示圖像。 在此應用中,它用於在用戶點擊生成按鈕後顯示生成的 QR 碼圖像。
  • <Button>:表示可點擊的按鈕。 它允許用戶在被點擊時觸發一個動作。 在此應用中,按鈕用於基於用戶在 <Entry> 框中輸入的內容來啟動 QR 碼的生成。

這些組件一起創建了一個界面,用戶可以在其中輸入文本,點擊按鈕,並在屏幕上看到相應的 QR 碼。

現在,讓我們編寫生成 QR 碼的後端代碼。 打開 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));
        }
    }
}
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)
			' Get the text from the entry field
			Dim text As String = qrCodeText.Text

			' Generate the QR code using the IronBarcode library
			Dim qrCode = QRCodeWriter.CreateQrCode(text)

			' Convert the QR code to binary JPEG data
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()

			' Set the QR code image source to display the generated QR code on the UI
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace
$vbLabelText   $csharpLabel

以下是代碼解釋。

  1. OnButtonClicked 方法是按鈕單擊事件的事件處理程序。 當按鈕被點擊時,將執行該方法。
  2. OnButtonClicked 方法內,qrCodeText 輸入框中包含的文本被分配給 text 變量。
  3. 使用 QRCodeWriter.CreateQrCode(text) 根據所輸入的文本創建 QR 碼。
  4. 使用 qrCode.ToJpegBinaryData() 將 QR 碼轉換為二進制 JPEG 數據。
  5. 使用 qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) 設置 qrCodeImage 控件的來源以顯示生成的 QR 碼圖像。

運行 .NET MAUI 應用程序

讓我們運行項目來測試功能。 按 F5 鍵在 Windows 機器上運行應用程序。啟動項目后將顯示以下屏幕。

輸入您想編碼的文本並按生成 QR 碼按鈕。 將生成 QR 碼並如下面所示顯示在屏幕上。

如何在 .NET MAUI 中生成 QR 碼:圖 11

添加註釋和 QR 碼值

現在,我們開發了一個具有基本功能的 QR 碼生成器。 讓我們通過向 QR 碼添加註釋和 QR 碼值來使其更具功能。 修改 OnButtonClicked 方法,如以下源代碼所示。

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));
}
Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	' Get the text from the entry field
	Dim text As String = qrCodeText.Text

	' Generate the QR code using the IronBarcode library
	Dim 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
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()

	' Set the QR code image source to display the generated QR code on the UI
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub
$vbLabelText   $csharpLabel
  • qrCode.AddBarcodeValueTextBelowBarcode() 在生成的條碼下方添加 QR 碼值的文本。
  • qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App") 在條碼上方添加一條註釋文本,說明它由 .NET MAUI 應用生成。

Visual Studio 2022 為 .NET MAUI 應用提供了熱重載選項。在更改 OnButtonClicked 方法后,您可以點擊熱重載並查看更改效果; 您可能不需要關閉並重建應用程序。

輸入您想編碼的文本並按生成 QR 碼按鈕。 將生成 QR 碼,如下所示。

如何在 .NET MAUI 中生成 QR 碼:圖 12 - QrCode 生成器

IronBarcode provides other useful functionality such as adding images, coloring and resizing the QR code, etc. For more detailed tutorials and code examples, you may refer to their official documentation.

.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));
}
Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	' Get the text from the entry field
	Dim text As String = barCodeText.Text

	' Generate the barcode using the IronBarcode library with Code128 encoding
	Dim 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
	Dim qrCodeBytes = barCode.ToJpegBinaryData()

	' Set the barcode image source to display the generated barcode on the UI
	barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub
$vbLabelText   $csharpLabel

輸出

如何在 .NET MAUI 中生成 QR 碼:圖 13 - 條碼生成器

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

IronBarcode is free for development and offers a 免費試用和不同的商業用途定價計劃。 定價基於許可選項,包括用於本地部署的永久許可以及用於基於雲的部署的訂閱許可。

如何在 .NET MAUI 中生成 QR 碼:圖 14

結論

在本文中,我們學習了如何使用 .NET MAUI 和 IronBarcode 庫創建QR 碼生成器 和條碼生成器。 我們探索了安裝 IronBarcode、創建 QR 碼並使用 .NET MAUI 的圖像控件在屏幕上顯示 QR 碼的步驟。

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

常見問題解答

.NET MAUI 是什麼,它與 Xamarin Forms 有何不同?

.NET MAUI(多平台應用程序界面)是 Xamarin Forms 框架的進化,允許開發者使用單一代碼庫構建多個平台的本地用戶界面。它支持 Android、iOS、macOS、Windows 等,提供了較 Xamarin Forms 更流暢的開發體驗。

如何在 .NET MAUI 應用中生成 QR 碼?

要在 .NET MAUI 應用中生成 QR 碼,使用 IronBarcode 庫。首先,通過 NuGet 添加 IronBarcode,配置 MAUI 用戶界面,然後使用 IronBarcode 中的 CreateQrCode 方法從字符串生成 QR 碼。

在 Visual Studio 中設置 .NET MAUI 專案的步驟有哪些?

要在 Visual Studio 2022 中設置 .NET MAUI 專案,打開 Visual Studio,創建一個新專案,搜索 MAUI 模板,選擇 .NET MAUI App 模板,並按照 Visual Studio 提供的設置說明進行操作。

如何在 .NET MAUI 應用中顯示 QR 碼?

要在 .NET MAUI 應用中顯示 QR 碼,使用 IronBarcode 的 CreateQrCode 方法生成 QR 碼,並使用 ToJpegBinaryData 將其轉換為二進制數據。然後,您可以用 Image 控件將其顯示在用戶界面上。

我可以在 .NET MAUI 專案中為 QR 碼添加註釋嗎?

是的,您可以使用 IronBarcode 在 .NET MAUI 專案中為 QR 碼添加註釋。使用方法如 AddBarcodeValueTextBelowBarcodeAddAnnotationTextAboveBarcode 在 QR 碼上下添加文本註釋。

IronBarcode 在 .NET MAUI 應用中是免費使用的嗎?

IronBarcode 免費供開發用途,並提供免費試用。對於商業用途,有各種定價計劃和授權選項可選,開發者可以根據他們的專案需求進行選擇。

如何用 .NET MAUI 創建條形碼生成器?

要用 .NET MAUI 創建條碼生成器,您可以通過修改 QR 碼生成代碼使用 IronBarcode 庫。使用 BarcodeWriter.CreateBarcode 方法及您所需的編碼生成不同類型的條形碼。

使用 IronBarcode 和 .NET MAUI 有哪些優勢?

使用 IronBarcode 與 .NET MAUI 可以讓開發者在多個平台上用單一代碼庫高效生成和操作條形碼及 QR 碼。它提供了強大的功能,如可自定義尺寸、錯誤校正和編碼選項,增強了跨平台應用程序的功能。

Jordi Bardia
軟體工程師
Jordi 在 Python、C# 和 C++ 上最得心應手,當他不在 Iron Software 展現技術時,便在做遊戲編程。在分担产品测测试,产品开发和研究的责任时,Jordi 为持续的产品改进增值。他说这种多样化的经验使他受到挑战并保持参与, 而这也是他与 Iron Software 中工作一大乐趣。Jordi 在佛罗里达州迈阿密长大,曾在佛罗里达大学学习计算机科学和统计学。