如何在.NET MAUI中生成QR碼

什麼是.NET MAUI？

.NET MAUI (多平台應用程式UI) 是Xamarin Forms框架的演化，允許開發者使用單一程式碼庫建構多個平台的原生使用者介面。 使用.NET MAUI，您可以建立Android、iOS、macOS、Windows等應用程式，減少開發時間和努力。

介紹IronBarcode

IronBarcode是一個強大的條碼和QR Code生成程式庫，適用於.NET應用程式。 它提供了一個易於使用的API，用於建立各種型別的條碼，包括QR Code，並具有可自定義的設置，如大小、錯誤更正和編碼選項。

設立.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程式庫新增到您的項目中並使其可供使用。

使用IronBarcode的.NET MAUI QR Code生成器

現在，讓我們撰寫程式碼來建立我們自己的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 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程式碼表示一個生成QR Code的.NET MAUI頁面。 以下是.NET MAUI組件的簡單解釋：

• <Label>：在螢幕上顯示文字。 在這個應用程式中，它用於顯示歡迎消息和提供資訊和說明給使用者的標題。
• <Entry>：為使用者提供一個文字輸入欄位。 在這個應用程式中，它允許使用者輸入他們想要編碼到QR Code中的內容。
• <Image>：在螢幕上顯示圖像。 在這個應用程式中，當使用者點擊生成按鈕後，它用於顯示生成的QR Code圖像。
• <Button>：代表一個可點擊的按鈕。 它允許使用者在被點擊時觸發一個操作。 在這個應用程式中，按鈕用於根據使用者在<Entry>欄位中輸入的內容來開始生成QR Code。

這些組件共同建立了一個介面，讓使用者可以輸入文字、點擊按鈕並在螢幕上查看相應的QR Code。

現在，讓我們撰寫後端程式碼來生成QR Code。 打開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

這是程式碼的解釋。

1. OnButtonClicked方法是按鈕點擊事件的事件處理程式。 當按鈕被點擊時，這個方法會被執行。
2. 在qrCodeText輸入欄中的文字被分配給text變數。
3. QRCodeWriter.CreateQrCode(text)用於根據輸入的文字建立一個QR Code。
4. qrCode.ToJpegBinaryData()將QR Code轉換為二進位JPEG資料。
5. qrCodeImage控件的來源以顯示生成的QR Code圖像。

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

.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

結論

在本文中，我們學習了如何使用.NET MAUI和IronBarcode程式庫建立QR Code生成器和條碼生成器。 我們探討了安裝IronBarcode、建立QR Code以及使用.NET MAUI的圖像控制將它們顯示在螢幕上的步驟。

.NET MAUI提供了一個強大的框架來建構跨平台應用程式，而IronBarcode簡化了生成條碼和QR Code的過程。 通過結合理技術，您可以建立多功能且高效的應用程式，充分發揮現代裝置的能力。