使用 IRONBARCODE

如何在 .NET MAUI 中生成 QR Code

發佈 2023年5月30日
分享:

在本文中,我們將探討如何使用 .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。將會出現如下圖所示的屏幕。

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

點擊建立新專案並按照下圖搜尋MAUI模板。

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

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

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

將您的專案命名,選擇位置,然後點擊下一步按鈕,以下窗口將出現如圖所示。

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

選擇 .NET 框架。我已選擇 .NET 7,您也可以選擇 .NET 6.0。項目將如圖所示地創建。

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

本教程主要介紹將 .NET MAUI 應用程式初始部署到本地的 Windows 機器。您可以根據需要,使用相同的代碼基礎在 Android 或 iOS 模擬器上配置它。

要將 .NET MAUI 應用程式部署到本地的 Windows 機器,您可以使用 Visual Studio 按以下步驟操作:

  1. 確保調試目標設置為「Windows Machine」。如果不是,請從工具欄的下拉菜單中選擇「Windows Machine」。

  2. 點擊「開始調試」按鈕或按 F5,在您的 Windows 機器上構建並運行應用程式。

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

如果您的 Windows 機器未啟用「開發人員模式」,Visual Studio 將提示您啟用它。要啟用此模式,請按照以下步驟操作:

  1. 在 Visual Studio 顯示的「啟用 Windows 開發人員模式」對話框中,找到標記為「開發人員設置」的鏈接。

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

  2. 點擊「開發人員設定」連結。這將會在您的 Windows 機器上打開「設定」應用程式。

  3. 開啟開發者模式下的切換按鈕,如下所示。

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

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

在 .NET MAUI 中生成 QR Code:圖 9

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

安裝 IronBarcode

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

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

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

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

  4. 在下拉菜單中,點擊「NuGet 套件管理器」。

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

套件管理器主控台窗口將打開,為您的專案提供一個管理 NuGet 套件的命令行界面。在套件管理器主控台中輸入以下命令。

:PackageInstall

這將會把 IronBarcode 程式庫加入到您的專案中並使其可供使用。

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

.NET MAUI QR Code Generator 使用 IronBarcode

現在,讓我們編寫代碼來創建我們自己的 QR Code 生成功能移動應用程式。為了在屏幕上顯示生成的 QR Code,我們將利用 .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

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

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

*: The```

<Input>

```組件用於為用戶提供文本輸入欄位。在這個應用程式中,它允許用戶輸入他們想要編碼成 QR 碼的內容。<Image>: The<Image>```

元件用於在螢幕上顯示圖片。在這個應用程式中,用於在使用者點選生成按鈕後顯示生成的QR碼圖片。

```<Button>: The<Button>```
```<Button>```
```組件代表一個可點擊的按鈕。它允許用戶在點擊時觸發某個操作。在這個應用程式中,按鈕用於根據用戶輸入的內容來開始生成 QR 碼。<Entry>```
```欄位。

這些元件一起建立了一個介面,使用者可以輸入文字,點擊按鈕,並在螢幕上看到相應的 QR 碼。

現在,我們來編寫用於生成 QR 碼的後端代碼。現在,打開 MainPage.xaml.cs 文件,並如下更新代碼後的類:

```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));
    }
}

以下是程式碼說明。

  1. OnButtonClicked 方法是按鈕點擊事件的事件處理程序。當按鈕被點擊時,會執行此方法。

  2. OnButtonClicked 方法中,qrCodeText 輸入框中的文字被賦值給 text 變數。

  3. `QRCodeWriter.CreateQrCode(文字)``` HTML 用於基於輸入的文本創建QR碼。

  4. qrCode.ToJpegBinaryData ```()將 QR 碼轉換為二進制 JPEG 數據。

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

運行 .NET MAUI 應用程式

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

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

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

增加註解和 QR Code 值

現在,我們已經開發了一個具有基本功能的 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
VB   C#
  • qrCode.AddBarcodeValueTextBelowBarcode()`將 QR 碼數值的文本添加到生成的條形碼下方。
  • qrCode.AddAnnotationTextAboveBarcode(「我的 QR Code 由 .NET MAUI 應用程式生成」) 在條碼上方添加註解文字,指定它是由 .NET MAUI 應用程序生成的。

Visual Studio 2022 為 .NET MAUI 應用程序提供了一個熱重載選項。更改 OnButtonClicked 後,您可以點擊熱重載,變更將會顯示,您可能不需要關閉並重建應用程序。

輸入您要編碼的文字並按下生成 QR 碼按鈕。QR 碼將按如下所示生成。

如何在 .NET MAUI 中生成 QR Code:圖 12 - 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
VB   C#

輸出

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

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

IronBarcode 開發免費並提供一個 免費試用 不同定價方案,以滿足各種商業用途需求。定價基於 授權選項涵蓋了內部部署的永久許可證以及基於雲端部署的訂閱式許可證。

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

結論

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

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

< 上一頁
如何在Blazor中生成QR碼
下一個 >
如何在 C# Windows 應用程式中列印條碼

準備開始了嗎? 版本: 2024.10 剛剛發布

免費 NuGet 下載 總下載次數: 1,203,227 查看許可證 >