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 (Multiplattform-App UI) ist eine Weiterentwicklung des Xamarin Forms-Frameworks, mit dem Entwickler native Benutzeroberflächen für mehrere Plattformen mit einer einzigen Codebasis erstellen können. 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 leistungsfähige Bibliothek zur Erzeugung 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.

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

Zum Installieren IronBarcodeöffnen Sie die NuGet-Paketmanager-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 ## .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 `komponente dient der Anzeige von Text auf dem Bildschirm. In dieser Anwendung wird es verwendet, um eine Willkommensnachricht und eine Überschrift anzuzeigen, um dem Benutzer Informationen und Anweisungen zu geben.
• <Entry>: Die `komponente wird verwendet, um ein Texteingabefeld für den Benutzer bereitzustellen. In dieser Anwendung kann der Benutzer den Inhalt eingeben, den er in einem QR-Code kodieren möchte.
• <Image>: Die `die 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 `komponente stellt eine anklickbare Schaltfläche 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 auf der Grundlage des vom Benutzer im Feld "QR-Code" eingegebenen Inhalts einzuleitenfeld.

  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 Ereignis-Handler für das Klick-Ereignis einer Schaltfläche. Wenn die Schaltfläche angeklickt wird, wird diese Methode ausgeführt.

2. In der Methode OnButtonClicked wird der Text aus dem Eingabefeld qrCodeText der Variablen text zugewiesen.

3. QRCodeWriter.CreateQrCode(text) wird verwendet, um einen QR-Code auf der Grundlage des eingegebenen Textes zu erstellen.

4. qrCode.ToJpegBinaryData() wandelt den QR-Code in binäre JPEG-Daten um.

5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes))setzt die Quelle desqrCodeImage`-Steuerelements, 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 Methode "OnButtonClicked" 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-Codes unterhalb des generierten Barcodes ein.

• qrCode.AddAnnotationTextAboveBarcode("Mein QR-Code wird von .NET MAUI App generiert") fügt einen Anmerkungstext über dem Barcode hinzu, der angibt, dass er von einer .NET MAUI-Anwendung erzeugt wurde.

  Visual Studio 2022 bietet eine Hot-Reload-Option für .NET MAUI-Apps. Nach dem Ändern von "OnButtonClicked" können Sie auf "Hot reload" klicken, und die Änderungen werden angezeigt, Sie müssen 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 Einfärben und Ändern der Größe des QR-Codes usw. Für mehr Details tutorials und code-Beispielekönnen Sie sich auf deren offizielle Dokumentation.

.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 Entwickler und bietet eine kostenloser Test und verschiedene Preispläne, die den unterschiedlichen Anforderungen für kommerzielle Zwecke gerecht werden. Die Preisgestaltung basiert auf lizenzierungsoptionendie sowohl unbefristete Lizenzen für die Bereitstellung vor Ort als auch abonnementbasierte Lizenzen für cloudbasierte Bereitstellungen umfassen.

Schlussfolgerung

In diesem Artikel haben wir gelernt, wie man eine QR-Code-Generator und Barcode Generator mit .NET MAUI und der IronBarcode Bibliothek. 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.