跳過到頁腳內容
使用IRONBARCODE

如何在.NET MAUI中生成QR碼

在本文中,我們將探討如何使用.NET MAUI創建QR碼生成器,這是一個為構建跨平台應用程式的現代框架。 我們將利用 IronBarcode 庫產生二維碼並將其顯示在螢幕上。

什麼是 .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。螢幕將顯示如下內容。

如何在 .NET MAUI 中產生二維碼:圖 1 - Visual Studio 2022 IDE

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

如何在 .NET MAUI 中產生二維碼:圖 2

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

如何在 .NET MAUI 中產生二維碼:圖 3

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

如何在 .NET MAUI 中產生二維碼:圖 4

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

如何在 .NET MAUI 中產生二維碼:圖 5

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

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

  1. 確保偵錯目標設定為"Windows 電腦"。如果不是,請從工具列的下拉清單中選擇"Windows 電腦"。
  2. 點選"開始偵錯"按鈕或按 F5 鍵,在 Windows 電腦上建置並執行應用程式。

    如何在 .NET MAUI 中產生二維碼:圖 6

如果您的 Windows 電腦上未啟用開發者模式,Visual Studio 會提示您啟用它。 要做到這一點,請遵循以下步驟:

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

    如何在 .NET MAUI 中產生二維碼:圖 7

  2. 點選"開發者設定"連結。 這將開啟Windows電腦上的"設定"應用程式。
  3. 開啟開發者模式下的開關,如下圖所示。

    如何在 .NET MAUI 中產生二維碼:圖 8

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

如何在 .NET MAUI 中產生二維碼:圖 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 中產生二維碼:圖 10

使用 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>
XML

以上 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));
        }
    }
}
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)用於根據輸入的文字建立二維碼。
  4. qrCode.ToJpegBinaryData()將二維碼轉換為二進位 JPEG 資料。
  5. qrCodeImage.Source = ImageSource.FromStream(() =&gt; new MemoryStream(qrCodeBytes))設定qrCodeImage控制項的來源以顯示產生的二維碼影像。

運行 .NET MAUI 應用程式

讓我們運行項目來測試其功能。 在 Windows 電腦上按 F5 執行應用程式。運行項目後,將顯示以下畫面。

輸入您要編碼的文本,然後點擊"產生二維碼"按鈕。 螢幕上將會產生並顯示如下所示的二維碼。

如何在 .NET MAUI 中產生二維碼:圖 11

新增註解和二維碼值

現在,我們已經開發出一款具備基本功能的二維碼產生器。 讓我們透過為二維碼添加二維碼註解和二維碼值來使其更具功能性。 依照以下原始碼所示修改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()將二維碼值的文字加入到產生的條碼下方。
  • qrCode.AddAnnotationTextAboveBarcode(&quot;My QR Code Generated by .NET MAUI App&quot;)在條碼上方新增註解文本,指定該二維碼是由 .NET MAUI 應用程式產生的。

Visual Studio 2022 為 .NET MAUI 應用程式提供了熱重載選項。更改OnButtonClicked方法後,您可以點擊熱重載,更改將立即生效; 您可能不需要關閉並重新建置應用程式。

輸入您要編碼的文本,然後點擊"產生二維碼"按鈕。 產生的二維碼如下所示。

如何在 .NET MAUI 中產生二維碼:圖 12 - 二維碼產生器

IronBarcode 還提供其他實用功能,例如添加圖像、為二維碼著色和調整大小等。有關更詳細的教學程式碼範例,您可以參考其官方文件

.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 中產生二維碼:圖 13 - 條碼產生器

除了學習如何使用 .NET MAUI 和 IronBarcode 庫建立二維碼產生器之外,IronBarcode 的定價方面也值得一提。

IronBarcode可免費用於開發,並提供免費試用和不同的定價方案,以滿足各種商業用途的需求。 定價基於許可選項,其中包括本地部署的永久許可和雲端部署的訂閱許可。

如何在 .NET MAUI 中產生二維碼:圖 14

結論

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

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

常見問題解答

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

.NET MAUI (Multi-platform App UI) 是 Xamarin Forms 框架的進化版,它允許開發人員使用單一代碼庫為多個平台建立原生使用者介面。它支援 Android、iOS、macOS、Windows 等平台,提供比 Xamarin Forms 更簡化的開發體驗。

如何在 .NET MAUI 應用程式中產生 QR 碼?

若要在 .NET MAUI 應用程式中產生 QR 碼,請使用 IronBarcode library。首先,透過 NuGet 新增 IronBarcode,設定 MAUI 使用者介面,並使用 IronBarcode 的 CreateQrCode 方法從字串產生 QR 碼。

在 Visual Studio 中建立 .NET MAUI 專案的步驟為何?

若要在 Visual Studio 2022 中設定 .NET MAUI 專案,請開啟 Visual Studio,建立新專案,搜尋 MAUI 模版,選擇 .NET MAUI App Template,並遵循 Visual Studio 提供的設定指示。

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

要在 .NET MAUI 應用程式中顯示 QR 代碼,請使用 IronBarcode 的 CreateQrCode 方法產生 QR 代碼,並使用 ToJpegBinaryData 將其轉換為二進位資料。然後,您可以使用 Image 控件將它顯示在 UI 上。

我可以在 .NET MAUI 專案中注釋 QR 碼嗎?

是的,您可以在 .NET MAUI 專案中使用 IronBarcode 註解 QR 代碼。使用 AddBarcodeValueTextBelowBarcodeAddAnnotationTextAboveBarcode 等方法在 QR 代碼的上方和下方新增文字註解。

在 .NET MAUI 應用程式中使用 IronBarcode 是否免費?

IronBarcode 對於開發用途是免費的,並提供免費試用。對於商業用途,則提供各種定價方案和授權選項,讓開發人員可根據其專案需求進行選擇。

如何使用 .NET MAUI 建立 BarCode 產生器?

若要使用 .NET MAUI 建立條碼產生器,您可以透過修改 QR 代碼產生程式碼來使用 IronBarcode 函式庫。使用 BarcodeWriter.CreateBarcode 方法與您所需的編碼來產生不同類型的條碼。

IronBarcode for .NET MAUI 有哪些優點?

將 IronBarcode 與 .NET MAUI 搭配使用,可讓開發人員透過單一程式碼基礎,在多種平台上有效率地產生和處理條碼與 QR 代碼。它提供了強大的功能,如可自訂大小、糾錯和編碼選項,增強了跨平台應用程式的能力。

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