Generieren von QR-Codes in .NET MAUI

In diesem Artikel erfahren Sie, wie Sie einen QR-Code-Generator mit .NET MAUI, einem modernen Framework zur Erstellung plattformübergreifender Anwendungen, erstellen können. Wir werden die IronBarcode-Bibliothek nutzen, um QR-Codes zu erzeugen und sie auf dem Bildschirm anzuzeigen.

Was ist .NET MAUI?

.NET MAUI (Multi-platform App UI) ist eine Weiterentwicklung des Xamarin Forms-Frameworks, die es Entwicklern ermöglicht, native Benutzeroberflächen für mehrere Plattformen mit einer einzigen Codebasis zu erstellen. Mit .NET MAUI können Sie Android-, iOS-, macOS-, Windows- und weitere Apps erstellen und so Entwicklungszeit und -aufwand reduzieren.

IronBarcode stellt sich vor

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

Einrichten eines .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, aber die Schritte sind dann anders. Es wird jedoch empfohlen, Visual Studio zu verwenden. Folgen Sie den folgenden Schritten, um das Projekt zu erstellen.

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

So erstellen Sie einen QR-Code in .NET MAUI: Abbildung 1 - Visual Studio 2022 IDE

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

Wählen Sie .NET MAUI App Template und klicken Sie auf den Next Button. Das folgende Fenster wird angezeigt.

Geben Sie Ihrem Projekt einen Namen, wählen Sie den Speicherort und klicken Sie auf die Schaltfläche Weiter. Das folgende Fenster wird angezeigt.

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

Dieses Tutorial konzentriert sich in erster Linie auf die anfängliche Bereitstellung einer .NET MAUI-Anwendung auf einem lokalen Windows-Rechner. Sie können die Anwendung je nach Bedarf auf einem Android- oder iOS-Simulator mit der gleichen Codebasis konfigurieren.

Um eine .NET MAUI-Anwendung auf Ihrem lokalen Windows-Rechner bereitzustellen, können Sie die folgenden Schritte mit Visual Studio ausführen:

1. Vergewissern Sie sich, dass das Debug-Ziel auf "Windows-Maschine" eingestellt ist Ist dies nicht der Fall, wählen Sie "Windows-Maschine" aus dem Dropdown-Menü in der Symbolleiste.

2. Klicken Sie auf die Schaltfläche "Debugging starten" oder drücken Sie F5, um die Anwendung auf Ihrem Windows-Rechner zu erstellen und auszuführen.

   

   Wenn der Entwicklermodus auf Ihrem Windows-Rechner nicht aktiviert ist, werden Sie von Visual Studio aufgefordert, ihn zu aktivieren. Führen Sie dazu die folgenden Schritte aus:

3. Suchen Sie im Dialogfeld "Entwicklermodus für Windows aktivieren", das von Visual Studio angezeigt wird, den Link mit der Bezeichnung "Einstellungen für Entwickler"

   

4. Klicken Sie auf den Link "Einstellungen für Entwickler". Dadurch wird die App "Einstellungen" auf Ihrem Windows-Rechner geöffnet.

5. 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 Anwendungsvorlage, die von Visual Studio 2022 beim Erstellen des Projekts automatisch erstellt wird. Jetzt installieren wir IronBarcode und ändern den Code entsprechend unseren Anforderungen.

IronBarcode installieren

Um IronBarcode zu installieren, öffnen Sie die NuGet-Paket-Manager-Konsole. Um die Konsole des Paketmanagers in Visual Studio zu öffnen, können Sie die folgenden Schritte ausführen:

1. Starten Sie Visual Studio auf Ihrem Windows-Rechner.

2. Öffnen Sie das Projekt, mit dem Sie arbeiten möchten, oder erstellen Sie ein neues Projekt.

3. Gehen Sie im Menü von Visual Studio auf "Werkzeuge".

4. Klicken Sie im Dropdown-Menü auf "NuGet Package Manager".

5. Es erscheint ein weiteres Dropdown-Menü, in dem Sie "Paketmanager-Konsole" auswählen sollten.

   Das Fenster Package Manager Console wird geöffnet und bietet Ihnen eine Befehlszeilenschnittstelle zur Verwaltung der NuGet-Pakete in Ihrem Projekt. Schreiben Sie den folgenden Befehl Package Manager Console.

:PackageInstall

Dies fügt die IronBarcode-Bibliothek zu Ihrem Projekt hinzu und macht sie für die Verwendung verfügbar.

.NET MAUI QR Code Generator using IronBarcode

Schreiben wir nun den Code, um unsere eigene mobile Anwendung QR Code Generator zu erstellen. Um den generierten QR-Code auf dem Bildschirm anzuzeigen, werden wir die Möglichkeiten 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 erzeugt. Hier ist eine einfache Erklärung der .NET MAUI-Komponenten:

• <Label>: Der Zweck der <Label>-Komponente besteht darin, Text auf dem Bildschirm anzuzeigen. In dieser Anwendung wird es verwendet, um eine Willkommensnachricht und eine Überschrift anzuzeigen, um dem Benutzer Informationen und Anweisungen zu geben.
• <Entry>: Der <Entry> -Komponente wird verwendet, um dem Benutzer ein Texteingabefeld bereitzustellen. In dieser Anwendung kann der Benutzer den Inhalt eingeben, den er in einem QR-Code kodieren möchte.
• <Image>: Die <Image>-Komponente wird verwendet, um ein Bild auf dem Bildschirm anzuzeigen. In dieser Anwendung wird das generierte QR-Code-Bild dem Benutzer angezeigt, nachdem er auf die Schaltfläche "Generieren" geklickt hat.

• <Button>: Die <Button>-Komponente stellt einen klickbaren Button dar. Sie 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 vom Benutzer im <Entry>-Feld eingegebenen Inhalt zu initiieren.

  Diese Komponenten bilden zusammen eine Schnittstelle, auf der der Benutzer Text eingeben, eine Schaltfläche anklicken und den entsprechenden QR-Code auf dem Bildschirm sehen kann.

  Schreiben wir nun den Backend-Code für die Erzeugung des QR-Codes. Öffnen Sie nun 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)
    {
        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

Hier ist die Erklärung des Codes.

1. Die Methode OnButtonClicked ist ein Ereignishandler für das Klickevent eines Buttons. Wenn die Schaltfläche angeklickt wird, wird diese Methode ausgeführt.

2. Innerhalb der OnButtonClicked-Methode wird der Text aus dem qrCodeText-Eingabefeld der Variablen text 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)) legt die Quelle des qrCodeImage-Steuerung fest, um das generierte QR-Code-Bild anzuzeigen.

Ausführen der .NET MAUI-Anwendung

Führen wir das Projekt aus, um die Funktionalität zu testen. Drücken Sie F5, um die Anwendung auf dem Windows-Rechner auszuführen. Beim Ausführen des Projekts wird der folgende Bildschirm angezeigt.

Geben Sie den Text, den Sie kodieren möchten, in die Textdatei ein und klicken Sie auf die Schaltfläche QR-Code generieren. Der QR-Code wird generiert und auf dem Bildschirm angezeigt, wie unten dargestellt.

Anmerkung und QR-Code-Wert hinzufügen

Jetzt haben wir QR Code Generator mit grundlegenden Funktionen entwickelt. Wir wollen ihn funktioneller gestalten, indem wir unserem QR-Code eine QR-Code-Anmerkung und einen QR-Code-Wert hinzufügen. Ändern Sie die OnButtonClicked-Methode wie im folgenden Quellcode gezeigt.

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

• qrCode.AddBarcodeValueTextBelowBarcode() fügt den Text des QR-Code-Werts unterhalb des generierten Barcodes hinzu.

• qrCode.AddAnnotationTextAboveBarcode("Mein QR-Code, generiert von .NET MAUI App") fügt einen Anmerkungstext oberhalb des Barcodes hinzu, der angibt, dass er von einer .NET MAUI-App generiert wurde.

  Visual Studio 2022 bietet eine Hot-Reload-Option für .NET MAUI App. Nach dem Ändern des OnButtonClicked können Sie auf Hot reload klicken, und die Änderungen werden angezeigt, möglicherweise müssen Sie die Anwendung nicht schließen und neu erstellen.

  Geben Sie den Text ein, den Sie kodieren möchten, und klicken Sie auf die Schaltfläche QR-Code generieren. Der QR-Code wird wie unten dargestellt generiert.

  

  IronBarcode bietet weitere nützliche Funktionen wie das Hinzufügen von Bildern, das Färben und Ändern der Größe des QR-Codes usw. Für detailliertere Tutorials und Codebeispiele können Sie auf die offizielle Dokumentation verweisen.

.NET MAUI Strichcode-Generator

Sie können auch einen .NET MAUI Barcode Generator mit Hilfe der IronBarcode Bibliothek erstellen. Sie müssen nur einen kleinen Teil des Codes ändern, und schon kann es losgehen, wie im folgenden Codebeispiel gezeigt.

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

Ausgabe

Neben dem Erlernen der Erstellung eines QR-Code-Generators mit .NET MAUI und der IronBarcode-Bibliothek ist auch der preisliche Aspekt von IronBarcode erwähnenswert.

IronBarcode ist kostenlos für die Entwicklung und bietet eine kostenlose Testversion sowie verschiedene Preispläne, um unterschiedlichen kommerziellen Bedürfnissen gerecht zu werden. Die Preisgestaltung basiert auf Lizenzoptionen, die sowohl unbefristete Lizenzen für die Bereitstellung vor Ort als auch abonnementsbasierte Lizenzen für cloudbasierte Bereitstellungen umfassen.

Schlussfolgerung

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

.NET MAUI bietet ein leistungsfähiges Framework für die Entwicklung plattformübergreifender Anwendungen, und IronBarcode vereinfacht die Erstellung von Barcodes und QR-Codes. Durch die Kombination dieser Technologien können Sie vielseitige und effiziente Anwendungen erstellen, die die Möglichkeiten moderner Geräte optimal nutzen.