使用IRONBARCODE

如何在 .NET MAUI 中生成 QR 码

发布 2023年五月30日

本文将探讨如何使用.NET MAUI（一种构建跨平台应用程序的现代框架）创建二维码生成器。我们将利用 IronBarcode 库生成二维码并显示在屏幕上。

什么是 .NET MAUI？

.NET MAUI(多平台应用程序用户界面)Xamarin Forms 是 Xamarin Forms 框架的进化版，允许开发人员使用单个代码库为多个平台构建本地用户界面。使用 .NET MAUI，您可以创建 Android、iOS、macOS、Windows 以及更多应用程序，从而减少开发时间和精力。

如何在 .NET Maui 中生成 QR 码

下载用于生成 QR 代码的 C# 库
配置 Maui 用户界面
使用 创建 QrCode 方法从字符串生成二维码
使用 ToJpegBinaryData 方法
将二进制数据传递给 Maui 应用程序，以显示二维码

介绍 IronBarcode

IronBarcodeBarCode 是适用于 .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 Framework。我选择了 .NET 7，您也可以选择 .NET 6.0。创建的项目如下所示。

如何在 .NET MAUI 中生成 QR 码：图 5

本教程主要侧重于在本地 Windows 机器上初始部署 .NET MAUI 应用程序。您可以根据自己的要求，在 Android 或 iOS 模拟器上使用相同的代码库进行配置。

要在本地 Windows 机器上部署 .NET MAUI 应用程序，可以使用 Visual Studio 按照以下步骤进行：

确保调试目标设置为 "Windows 机器"。如果没有，请从工具栏的下拉菜单中选择 "Windows 机器"。
单击 "开始调试 "按钮或按 F5 键，在 Windows 机器上构建并运行应用程序。
如果您的 Windows 机器未启用开发者模式，Visual Studio 将提示您启用该模式。要执行此操作，请按照以下步骤操作：
在 Visual Studio 显示的 "启用 Windows 开发人员模式 "对话框中，找到标有 "开发人员设置 "的链接。
单击 "开发人员设置 "链接。这将在 Windows 机器上打开 "设置 "应用程序。
打开开发人员模式下的切换开关，如下图所示。
打开开发人员模式后运行项目。将出现以下窗口：
这是 Visual Studio 2022 在创建项目时自动创建的模板应用程序。现在，我们将安装 IronBarcode 并按照要求修改代码。

安装 IronBarcode

安装IronBarcode打开 NuGet 软件包管理器控制台。要在 Visual Studio 中打开软件包管理器控制台，可以按照以下步骤操作：

在 Windows 机器上启动 Visual Studio。
打开您要处理的项目或创建一个新项目。
在 Visual Studio 菜单中，转到 "工具"。
从下拉菜单中点击 "NuGet 包管理器"。
另一个下拉菜单将出现，您应选择 "Package Manager Console"。
将打开 "软件包管理器控制台 "窗口，为您提供管理项目中 NuGet 软件包的命令行界面。编写以下命令包管理器控制台。

:PackageInstall

这将把 IronBarcode 库添加到您的项目中并使其可用。

如何在 .NET MAUI 中生成 QR 码：图 10

使用 IronBarcode for .NET 的 .NET MAUI QR 码生成器

现在，让我们编写代码，创建自己的 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>的目的<Label> 组件是在屏幕上显示文本。在此应用程序中，它用于显示欢迎信息和标题，为用户提供信息和说明。
<Entry>:的组件 "用于为用户提供一个文本输入框。在此应用程序中，用户可以输入想要编码到 QR 代码中的内容。
<Image>:的组件用于在屏幕上显示图像。在本应用程序中，它用于在用户点击生成按钮后向其显示生成的二维码图像。
<Button>:的
这些组件共同创建了一个界面，用户可以在该界面上输入文本、点击按钮并看到屏幕上显示的相应二维码。
现在，我们来编写生成 QR 代码的后台代码。现在，打开 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

VB C#

以下是代码解释。

OnButtonClicked "方法是按钮点击事件的处理程序。当点击按钮时，将执行此方法。
在 "OnButtonClicked "方法中，"qrCodeText "输入字段中包含的文本被分配给文本变量。
QRCodeWriter.CreateQrCode(文本) 用于根据输入的文本创建 QR 代码。
4.`qrCode.ToJpegBinaryData()将 QR 代码转换为二进制 JPEG 数据。
5.qrCodeImage.Source = ImageSource.FromStream(()=> 新内存流(qrCodeBytes))设置qrCodeImage` 控件的源，以显示生成的二维码图像。

运行 .NET MAUI 应用程序

让我们运行项目来测试功能。按 F5 键在 Windows 机器上运行应用程序。运行项目时将出现以下屏幕。

在文本文件中输入要编码的文本，然后点击生成 QR 码按钮。将生成 QR 代码并显示在屏幕上，如下图所示。

如何在 .NET MAUI 中生成 QR 码：图 11

添加注释和 QR 码值

现在，我们已开发出具有基本功能的 QR 代码生成器。让我们为 QR 代码添加 QR 代码注释和 QR 代码值，使其更加实用。修改 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 代码由 .NET MAUI 应用程序生成) 在条形码上方添加注释文本，说明条形码是由 .NET MAUI 应用程序生成的。
Visual Studio 2022 为 .NET MAUI 应用程序提供了热重载选项。在更改 "OnButtonClicked "后，您可以点击 "Hot reload"，更改就会出现，您可能不需要关闭和重建应用程序。
输入要编码的文本，然后点击生成 QR 代码按钮。生成的 QR 代码如下所示。
IronBarcode 还提供其他实用功能，如添加图像、着色和调整 QR 码大小等。如需更详细的教程和代码示例您可以参考他们的官方文件.

.NET MAUI BarCode 生成器

您还可以借助 IronBarcode 库创建 .NET MAUI BarCode 生成器。您只需在代码中稍作改动，我们就可以开始工作了，如以下代码示例所示。

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#