Wie man QR-Code in .NET MAUI generiert

Was ist .NET MAUI?

.NET MAUI (Multi-platform App UI) ist eine Weiterentwicklung des Xamarin Forms-Frameworks, das Entwicklern ermöglicht, native Benutzeroberflächen für mehrere Plattformen mit einem einzigen Code-Bestand zu erstellen. Mit .NET MAUI können Sie Android-, iOS-, macOS-, Windows- und weitere Apps erstellen, was Entwicklungszeit und Aufwand reduziert.

Einführung von IronBarcode

IronBarcode ist eine leistungsstarke Barcode- und QR-Code-Generation-Bibliothek für .NET-Anwendungen. Es bietet eine benutzerfreundliche API zum Erstellen verschiedener Arten von Barcodes, einschließlich QR-Codes, mit anpassbaren Einstellungen wie Größe, Fehlerkorrektur und Kodierungsoptionen.

Einrichten des .NET MAUI-Projekts

Um zu beginnen, müssen wir ein neues .NET MAUI-Projekt in Microsoft Visual Studio 2022 erstellen. Sie können auch Microsoft Visual Studio Code verwenden, jedoch variieren die Schritte. Es wird jedoch empfohlen, Visual Studio zu verwenden. Befolgen Sie die folgenden Schritte, um das Projekt zu erstellen.

Öffnen Sie Visual Studio 2022. Der folgende Bildschirm wird wie unten dargestellt angezeigt.

Klicken Sie auf Neues Projekt erstellen und suchen Sie nach der MAUI-Vorlage, wie unten gezeigt.

Wählen Sie die .NET MAUI-App-Vorlage und klicken Sie auf die Schaltfläche Weiter. Das folgende Fenster wird angezeigt.

Benennen Sie Ihr Projekt, wählen Sie den Speicherort und klicken Sie auf die Schaltfläche Weiter, das folgende Fenster wird wie unten gezeigt angezeigt.

Wählen Sie .NET Framework. Ich habe .NET 7 ausgewählt, Sie können auch .NET 6.0 auswählen. Das Projekt wird wie unten gezeigt erstellt.

Dieses Tutorial konzentriert sich hauptsächlich auf die anfängliche Bereitstellung einer .NET MAUI-Anwendung auf einer lokalen Windows-Maschine. Sie können es mit derselben Code-Basis je nach Bedarf auf einem Android- oder iOS-Simulator konfigurieren.

Um eine .NET MAUI-Anwendung auf Ihrer lokalen Windows-Maschine bereitzustellen, können Sie diese Schritte mit Visual Studio befolgen:

1. Stellen Sie sicher, dass das Debug-Ziel auf "Windows-Maschine" eingestellt ist. Wenn nicht, wählen Sie "Windows-Maschine" aus dem Dropdown-Menü in der Werkzeugleiste.

2. Klicken Sie auf die Schaltfläche "Start Debugging" oder drücken Sie F5, um die Anwendung auf Ihrer Windows-Maschine zu bauen und auszuführen.

   

Wenn der Entwicklermodus auf Ihrer Windows-Maschine nicht aktiviert ist, wird Visual Studio Sie auffordern, ihn zu aktivieren. Führen Sie dazu die folgenden Schritte aus:

1. Im Dialogfeld "Entwicklermodus für Windows aktivieren", das von Visual Studio angezeigt wird, finden Sie den Link "Einstellungen für Entwickler".

   

2. Klicken Sie auf den Link "Einstellungen für Entwickler". Dadurch wird die Einstellungen-App auf Ihrer Windows-Maschine geöffnet.

3. Schalten Sie den Schalter unter Entwicklermodus ein, wie unten gezeigt.

   

Führen Sie das Projekt aus, sobald der Entwicklermodus aktiviert ist. Das folgende Fenster wird angezeigt:

Dies ist die Vorlagenanwendung, die von Visual Studio 2022 beim Erstellen des Projekts automatisch erstellt wird. Jetzt werden wir IronBarcode installieren und den Code nach unseren Anforderungen ändern.

IronBarcode installieren

Um IronBarcode zu installieren, öffnen Sie die NuGet-Paket-Manager-Konsole. Um die Paket-Manager-Konsole in Visual Studio zu öffnen, können Sie diese Schritte befolgen:

1. Starten Sie Visual Studio auf Ihrer Windows-Maschine.
2. Öffnen Sie das Projekt, an dem Sie arbeiten möchten, oder erstellen Sie ein neues Projekt.
3. Gehen Sie im Visual Studio-Menü zu "Tools".
4. Klicken Sie im Dropdown-Menü auf "NuGet-Paket-Manager".
5. Ein weiteres Dropdown-Menü wird angezeigt, in dem Sie "Paket-Manager-Konsole" auswählen sollten.

Das Fenster der Paket-Manager-Konsole wird geöffnet und bietet Ihnen eine Befehlszeilenschnittstelle zur Verwaltung von NuGet-Paketen in Ihrem Projekt. Schreiben Sie den folgenden Befehl in die Paket-Manager-Konsole, um IronBarcode zu installieren.

Install-Package BarCode

Dadurch wird die IronBarcode-Bibliothek zu Ihrem Projekt hinzugefügt und für die Verwendung verfügbar gemacht.

.NET MAUI QR Code Generator mit IronBarcode

Nun, lassen Sie uns den Code schreiben, um unsere eigene QR-Code-Generator-Mobile-App zu erstellen. Um den generierten QR-Code auf dem Bildschirm anzuzeigen, werden wir die Fähigkeiten von .NET MAUI nutzen. Öffnen Sie die Datei MainPage.xaml und ersetzen Sie sie durch den folgenden Code.

<?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>

Der obige XAML-Code stellt eine .NET MAUI-Seite dar, die QR-Codes generiert. Hier ist eine einfache Erklärung der .NET MAUI-Komponenten:

• <Label>: Zeigt Text auf dem Bildschirm an. In dieser Anwendung wird es verwendet, um eine Willkommensnachricht und eine Überschrift anzuzeigen, um dem Benutzer Informationen und Anweisungen bereitzustellen.
• <Entry>: Bietet ein Texteingabefeld für den Benutzer. In dieser Anwendung ermöglicht es dem Benutzer, den Inhalt einzugeben, den er in einen QR-Code codieren möchte.
• <Image>: Zeigt ein Bild auf dem Bildschirm an. In dieser Anwendung wird es verwendet, um das generierte QR-Code-Bild anzuzeigen, nachdem der Benutzer auf die Schaltfläche zum Generieren geklickt hat.
• <Button>: Stellt eine klickbare Schaltfläche dar. Es ermöglicht es dem Benutzer, eine Aktion auszulösen, wenn er darauf klickt. In dieser Anwendung wird die Schaltfläche verwendet, um die Generierung des QR-Codes basierend auf dem Inhalt, den der Benutzer im <Entry>-Feld eingegeben hat, zu initiieren.

Diese Komponenten zusammen schaffen eine Oberfläche, in der der Benutzer Text eingeben, eine Schaltfläche drücken und den entsprechenden QR-Code auf dem Bildschirm anzeigen kann.

Nun, lassen Sie uns den Backend-Code zur Generierung des QR-Codes schreiben. Öffnen Sie die Datei MainPage.xaml.cs und aktualisieren Sie die Code-Behind-Klasse wie folgt:

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

Hier ist die Code-Erklärung.

1. Die Methode OnButtonClicked ist ein Ereignishandler für das Klick-Ereignis einer Schaltfläche. Wenn die Schaltfläche geklickt wird, wird diese Methode ausgeführt.
2. In der Methode OnButtonClicked wird der im Eingabefeld qrCodeText enthaltene Text der text-Variable zugewiesen.
3. QRCodeWriter.CreateQrCode(text) wird verwendet, um einen QR-Code basierend auf dem eingegebenen Text zu erstellen.
4. qrCode.ToJpegBinaryData() konvertiert den QR-Code in binäre JPEG-Daten.
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) setzt die Quelle des qrCodeImage-Steuerelements, um das generierte QR-Code-Bild anzuzeigen.

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 Barcode-Generator

Sie können mit Hilfe der IronBarcode-Bibliothek auch einen .NET MAUI Barcode-Generator erstellen. Sie müssen lediglich ein wenig im Code ändern, und schon können Sie loslegen, wie im folgenden Codebeispiel gezeigt.

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

Abschluss

In diesem Artikel haben wir gelernt, wie man einen QR-Code-Generator und einen Barcode-Generator mit .NET MAUI und der IronBarcode-Bibliothek erstellt. Wir haben die Schritte zur Installation von IronBarcode, zum Erstellen von QR-Codes und zum Anzeigen auf dem Bildschirm mit dem .NET MAUI-Bildsteuerelement untersucht.

.NET MAUI bietet ein leistungsstarkes Framework zum Erstellen plattformübergreifender Anwendungen, und IronBarcode vereinfacht den Prozess der Erstellung von Barcodes und QR-Codes. Durch die Kombination dieser Technologien können Sie vielseitige und effiziente Anwendungen erstellen, die die Fähigkeiten moderner Geräte nutzen.