Comment générer un code QR dans .NET MAUI

Qu'est-ce que .NET MAUI ?

.NET MAUI (Multi-platform App UI) est une évolution du framework Xamarin Forms qui permet aux développeurs de créer des interfaces utilisateur natives pour plusieurs plateformes en utilisant une base de code unique. Avec .NET MAUI, vous pouvez créer des applications pour Android, iOS, macOS, Windows et plus, réduisant ainsi le temps et l'effort de développement.

Présentation d'IronBarcode

IronBarcode est une bibliothèque puissante de génération de codes-barres et de codes QR pour les applications .NET. Elle fournit une API facile à utiliser pour créer divers types de codes-barres, y compris les codes QR, avec des paramètres personnalisables tels que la taille, la correction d'erreur et les options de codage.

Configuration du projet .NET MAUI

Pour commencer, nous devons créer un nouveau projet .NET MAUI dans Microsoft Visual Studio 2022. Vous pouvez également utiliser Microsoft Visual Studio Code, mais les étapes varieront. Cependant, il est recommandé d'utiliser Visual Studio. Suivez les étapes suivantes pour créer le projet.

Ouvrez Visual Studio 2022. L'écran suivant apparaîtra comme indiqué ci-dessous.

Cliquez sur Créer un nouveau projet et recherchez le modèle MAUI comme indiqué ci-dessous.

Sélectionnez le modèle d'application .NET MAUI et cliquez sur le bouton Suivant. La fenêtre suivante apparaîtra.

Nommez votre projet, sélectionnez l'emplacement et cliquez sur le bouton Suivant, la fenêtre suivante apparaîtra comme indiqué ci-dessous.

Sélectionnez .NET Framework. J'ai sélectionné .NET 7, vous pouvez également sélectionner .NET 6.0. Le projet sera créé comme indiqué ci-dessous.

Cet article se concentre principalement sur le déploiement initial d'une application .NET MAUI sur une machine Windows locale. Vous pouvez la configurer sur un simulateur Android ou iOS selon votre besoin avec la même base de code.

Pour déployer une application .NET MAUI sur votre machine Windows locale, vous pouvez suivre ces étapes en utilisant Visual Studio :

1. Assurez-vous que la cible de débogage est définie sur "Windows Machine". Si ce n'est pas le cas, sélectionnez "Windows Machine" dans la liste déroulante de la barre d'outils.

2. Cliquez sur le bouton "Start Debugging" ou appuyez sur F5 pour construire et exécuter l'application sur votre machine Windows.

   

Si le mode développeur n'est pas activé sur votre machine Windows, Visual Studio vous invitera à l'activer. Pour ce faire, suivez ces étapes :

1. Dans la boîte de dialogue "Activer le mode développeur pour Windows" affichée par Visual Studio, trouvez le lien intitulé "paramètres pour les développeurs".

   

2. Cliquez sur le lien "paramètres pour les développeurs". Cela ouvrira l'application Paramètres sur votre machine Windows.

3. Activez le basculement sous Mode développeur comme indiqué ci-dessous.

   

Exécutez le projet une fois le mode développeur activé. La fenêtre suivante apparaîtra :

Ceci est l'application modèle qui est automatiquement créée par Visual Studio 2022 lors de la création du projet. Nous allons maintenant installer IronBarcode et modifier le code selon nos besoins.

Installer IronBarcode

Pour installer IronBarcode, ouvrez la console du gestionnaire de packages NuGet. Pour ouvrir la console du gestionnaire de packages dans Visual Studio, vous pouvez suivre ces étapes :

1. Lancez Visual Studio sur votre machine Windows.
2. Ouvrez le projet avec lequel vous souhaitez travailler ou créez un nouveau projet.
3. Dans le menu Visual Studio, allez sur "Outils".
4. Dans le menu déroulant, cliquez sur "Gestionnaire de packages NuGet".
5. Un autre menu déroulant apparaîtra, et vous devriez sélectionner "Console du gestionnaire de packages".

La fenêtre de la console du gestionnaire de packages s'ouvrira, vous offrant une interface en ligne de commande pour gérer les packages NuGet dans votre projet. Écrivez la commande suivante dans la console du gestionnaire de packages pour installer IronBarcode.

Install-Package BarCode

Cela ajoutera la bibliothèque IronBarcode à votre projet et la rendra disponible pour une utilisation.

Générateur de codes QR .NET MAUI utilisant IronBarcode

Passons maintenant à l'écriture du code pour créer notre propre application de générateur de codes QR pour mobile. Pour afficher le code QR généré à l'écran, nous utiliserons les capacités de .NET MAUI. Ouvrez le fichier MainPage.xaml et remplacez-le par le code suivant.

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

Le code XAML ci-dessus représente une page .NET MAUI qui génère des codes QR. Voici une simple explication des composants .NET MAUI :

• <Label> : Affiche du texte à l'écran. Dans cette application, il est utilisé pour afficher un message de bienvenue et un titre pour fournir des informations et des instructions à l'utilisateur.
• <Entry> : Fournit un champ de saisie de texte pour l'utilisateur. Dans cette application, il permet à l'utilisateur de saisir le contenu qu'il souhaite encoder dans un code QR.
• <Image> : Affiche une image à l'écran. Dans cette application, il est utilisé pour afficher l'image du code QR généré à l'utilisateur après avoir cliqué sur le bouton de génération.
• <Button> : Représente un bouton cliquable. Il permet à l'utilisateur de déclencher une action lorsqu'il est cliqué. Dans cette application, le bouton est utilisé pour initier la génération du code QR en fonction du contenu saisi par l'utilisateur dans le champ <Entry>.

Ces composants créent ensemble une interface où l'utilisateur peut entrer du texte, cliquer sur un bouton et voir le code QR correspondant affiché à l'écran.

Passons maintenant à l'écriture du code backend pour générer un code QR. Ouvrez le fichier MainPage.xaml.cs et mettez à jour la classe code-behind comme suit :

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

Voici l'explication du code.

1. La méthode OnButtonClicked est un gestionnaire d'événements pour l'événement de clic d'un bouton. Lorsque le bouton est cliqué, cette méthode est exécutée.
2. À l'intérieur de la méthode OnButtonClicked, le texte contenu dans le champ de saisie qrCodeText est assigné à la variable text.
3. QRCodeWriter.CreateQrCode(text) est utilisé pour créer un code QR basé sur le texte saisi.
4. qrCode.ToJpegBinaryData() convertit le code QR en données binaires JPEG.
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) définit la source du contrôle qrCodeImage pour afficher l'image du code QR généré.

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

Générateur de code-barres .NET MAUI

Vous pouvez également créer un générateur de code-barres .NET MAUI avec l'aide de la bibliothèque IronBarcode. Vous n'avez qu'à changer un peu dans le code, et vous êtes prêt à partir comme indiqué dans l'exemple de code suivant.

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

Conclusion

Dans cet article, nous avons appris à créer un générateur de codes QR et un générateur de codes-barres en utilisant .NET MAUI et la bibliothèque IronBarcode. Nous avons exploré les étapes pour installer IronBarcode, créer des codes QR et les afficher à l'écran en utilisant le contrôle d'image de .NET MAUI.

.NET MAUI fournit un cadre puissant pour construire des applications multiplateformes, et IronBarcode simplifie le processus de génération de codes-barres et de codes QR. En combinant ces technologies, vous pouvez créer des applications polyvalentes et efficaces qui exploitent les capacités des appareils modernes.