How to Generate QR Code in .NET MAUI

什么是.NET MAUI？

.NET MAUI（多平台应用程序界面）是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。如下所示的屏幕将出现。

点击创建新项目并搜索如下所示的MAUI模板。

选择.NET MAUI应用程序模板并点击下一步。 将出现以下窗口。

命名您的项目，选择位置，并点击下一步，将出现如下窗口。

选择.NET Framework。 我选择了.NET 7，您也可以选择.NET 6.0。项目将被创建，如下所示。

本教程主要关注于将.NET MAUI应用程序初次部署到本地Windows机器。您可以根据需要使用相同的代码库在Android或iOS模拟器上进行配置。

要将.NET MAUI应用程序部署到本地Windows机器，您可以按照以下步骤使用Visual Studio：

1. 确保调试目标设置为"Windows机器"。如果不是，请在工具栏的下拉菜单中选择"Windows机器"。
2. 点击"开始调试"按钮或按F5在Windows机器上构建并运行应用程序。

如果您的Windows机器上未启用开发者模式，Visual Studio会提示您启用它。 请按照以下步骤操作：

1. 在由Visual Studio显示的"启用Windows开发者模式"对话框中，找到标有"开发者设置"链接。

2. 点击"开发者设置"链接。 这将打开Windows机器上的设置应用程序。
3. 如下所示，打开开发者模式开关。

开发者模式打开后，运行项目。 以下窗口将出现：

这是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码生成器使用IronBarcode

现在，让我们编写代码来创建我们自己的二维码生成器移动应用程序。 为了在屏幕上显示生成的二维码，我们将利用.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页面。 以下是.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));
        }
    }
}

这是代码说明。

1. OnButtonClicked方法是一个按钮点击事件的事件处理程序。 当按钮被点击时，该方法被执行。
2. 在OnButtonClicked方法内，包含在qrCodeText输入字段中的文本被分配给text变量。
3. 使用QRCodeWriter.CreateQrCode(text)基于所输入的文本创建一个二维码。
4. qrCode.ToJpegBinaryData()将二维码转换为二进制JPEG数据。
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes))设置qrCodeImage控件的源以显示生成的二维码图像。

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

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

结论

在本文中，我们学习了如何使用.NET MAUI和IronBarcode库创建二维码生成器和条形码生成器。 我们探讨了安装IronBarcode、创建二维码以及使用.NET MAUI的图像控件在屏幕上显示二维码的步骤。

.NET MAUI提供了强大的跨平台应用程序构建框架，而IronBarcode简化了生成条形码和二维码的过程。 通过结合这些技术，您可以创建多功能和高效的应用程序，充分利用现代设备的能力。