In diesem Artikel werden wir erkunden, wie man einen QR-Code-Generator mit .NET MAUI erstellt, einem modernen Framework zum Erstellen plattformübergreifender Anwendungen. Wir werden die IronBarcode-Bibliothek verwenden, um QR-Codes zu generieren und sie auf dem Bildschirm anzuzeigen.

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.

Projekt ausführen, wenn 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 anklickbare Schaltfläche dar. Es ermöglicht es dem Benutzer, eine Aktion auszulösen, wenn er darauf klickt. In dieser Anwendung wird der Knopf verwendet, um die Generierung des QR-Codes basierend auf dem vom Benutzer im <Entry> Feld eingegebenen Inhalt zu starten.

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

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 OnButtonClicked Methode ist ein Ereignishandler für das Klick-Ereignis eines Buttons. Wenn die Schaltfläche geklickt wird, wird diese Methode ausgeführt.
2. Innerhalb der OnButtonClicked Methode wird der im qrCodeText Eingabefeld enthaltene Text der Textvariable 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 der qrCodeImage Steuerung, um das generierte QR-Code-Bild anzuzeigen.

Führen Sie die .NET MAUI-Anwendung aus

Lassen Sie uns das Projekt ausführen, um die Funktionalität zu testen. Drücken Sie F5, um die Anwendung auf der Windows-Maschine auszuführen. Der folgende Bildschirm erscheint, wenn das Projekt ausgeführt wird.

Geben Sie den Text ein, den Sie codieren möchten, und drücken Sie auf die Schaltfläche QR-Code generieren. Der QR-Code wird generiert und auf dem Bildschirm wie unten gezeigt angezeigt.

Fügen Sie Annotation und QR-Code-Wert hinzu

Jetzt haben wir einen QR-Code-Generator mit grundlegenden Funktionen entwickelt. Lassen Sie es uns funktionaler machen, indem wir QR-Code-Anmerkung und QR-Code-Wert zu unserem QR-Code hinzufügen. Ändern Sie die OnButtonClicked Methode wie im folgenden Quellcode gezeigt.

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

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

• qrCode.AddBarcodeValueTextBelowBarcode() fügt den Text des QR-Code-Wertes unter dem generierten Barcode hinzu.
• qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App") fügt über dem Barcode einen Anmerkungstext hinzu, der angibt, dass er von einer .NET MAUI App generiert wurde.

Visual Studio 2022 bietet eine Hot Reload Option for .NET MAUI App. Nach der Änderung der OnButtonClicked Methode können Sie auf Hot Reload klicken, und die Änderungen werden angezeigt; Sie müssen die Anwendung möglicherweise nicht schließen und neu erstellen.

Geben Sie den Text ein, den Sie codieren möchten, und drücken Sie auf die Schaltfläche QR-Code generieren. Der QR-Code wird wie unten gezeigt 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 ausführlichere Tutorials und Code-Beispiele können Sie deren offizielle Dokumentation einsehen.

.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

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

Ausgabe

Neben dem Erlernen, wie man einen QR-Code-Generator mit .NET MAUI und der IronBarcode-Bibliothek erstellt, ist es erwähnenswert, dass der Preisaspekt von IronBarcode berücksichtigt werden muss.

IronBarcode ist für die Entwicklung kostenlos und bietet eine kostenlose Testversion und verschiedene Preispläne, um den unterschiedlichen kommerziellen Anforderungen gerecht zu werden. Die Preisgestaltung basiert auf Lizenzierungsoptionen, die sowohl unbefristete Lizenzen für die lokale Bereitstellung als auch abonnementbasierte Lizenzen für Cloud-basierte Bereitstellungen umfassen.

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.