1. IronQR
  2. Commencer
  3. .NET MAUI Scanner de QR Code

Scanner de codes QR .NET MAUI

Curtis Chau
Curtis Chau
Mis à jour:
This article was translated from English: Does it need improvement?
Translated
View the article in English

Introduction

.NET MAUI (.NET Multi-platform App UI) est un framework multiplateforme pour construire des applications mobiles et de bureau natives à partir d'une seule base de code C#. Un seul projet peut cibler Android, iOS, macOS et Windows, partageant des mises en page d'interface utilisateur et une logique métier sur toutes les plateformes. L'intégration de MAUI avec l'écosystème .NET signifie que les développeurs peuvent atteindre les utilisateurs mobiles sans abandonner les outils ou langages familiers.

Dans cet article, nous expliquerons comment créer un scanner de codes QR natif dans une application .NET MAUI en utilisant IronQR pour décoder les codes QR sélectionnés à partir de la bibliothèque photo de l'appareil.

Comment créer un scanner de codes QR dans .NET MAUI

  1. Installez la bibliothèque C# IronQR pour scanner les codes QR sur mobile
  2. Concevez la disposition de l'application dans `MainPage.xaml`
  3. Utilisez `FilePicker` pour permettre à l'utilisateur de sélectionner une image de code QR depuis l'appareil
  4. Chargez l'image et enveloppez-la dans un `QrImageInput`
  5. Appelez `Read` et affichez la valeur décodée dans un `Label`

IronQR : Bibliothèque QR Code C

Pour lire les codes QR dans l'application, nous utiliserons la bibliothèque IronQR .NET. Elle fournit une API simple pour détecter et décoder les codes QR à partir de n'importe quelle source d'image, y compris les fichiers sélectionnés sur un appareil mobile. IronQR fonctionne sur toutes les plateformes cibles de MAUI et ne nécessite aucune connaissance spécifique en domaine de codes-barres pour intégrer.

IronQR peut décoder des codes QR standard, des Micro QR codes et des codes rMQR, et accepte l'entrée d'images sous forme de fichiers, de flux ou de bitmaps. Elle peut être installée en quelques secondes via le Package Manager NuGet.

Étapes pour créer un scanner de codes QR dans .NET MAUI

Suivez ces étapes pour ajouter le scan de codes QR à une application .NET MAUI.

Prérequis

  1. Visual Studio 2022 avec la charge de travail .NET MAUI installée
  2. Un projet .NET MAUI ciblant Android ou iOS

Installer IronQR

Installez la bibliothèque IronQR en utilisant la console du gestionnaire de packages NuGet dans Visual Studio. Naviguez vers Tools > NuGet Package Manager > Package Manager Console et exécutez :

Install-Package IronQR

Alternativement, recherchez IronQR sur NuGet et installez la dernière version.

Conception Front-End

L'interface utilisateur du scanner consiste en un bouton pour déclencher la sélection d'image, une vue d'image pour prévisualiser le code QR sélectionné, et un label pour afficher le résultat décodé.

Remplacez le contenu de MainPage.xaml par le 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="MauiQrScanner.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="scanButton"
                Text="Select QR Code Image"
                SemanticProperties.Hint="Select Image"
                Clicked="OnScanButtonClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="qrImage"
                SemanticProperties.Description="Selected QR Code"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                x:Name="resultLabel"
                Text="Scanned Text: "
                HorizontalOptions="Center"
                VerticalOptions="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="MauiQrScanner.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="scanButton"
                Text="Select QR Code Image"
                SemanticProperties.Hint="Select Image"
                Clicked="OnScanButtonClicked"
                HorizontalOptions="Center" />

            <Image
                x:Name="qrImage"
                SemanticProperties.Description="Selected QR Code"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                x:Name="resultLabel"
                Text="Scanned Text: "
                HorizontalOptions="Center"
                VerticalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>
XML

Entrée d'exemple

Utilisez le code QR ci-dessous comme image test. Enregistrez-le sur votre appareil, puis sélectionnez-le via le sélecteur de fichiers de l'application. La valeur décodée doit s'afficher comme https://ironsoftware.com.

Sample QR code encoding https://ironsoftware.com for testing the .NET MAUI QR scanner

Exemple de code QR — encode `https://ironsoftware.com`

Scan de QR Code avec IronQR

Lorsque le bouton de scan est tapé, FilePicker ouvre la bibliothèque d'images de l'appareil. Après que l'utilisateur ait sélectionné une photo, le chemin complet est chargé dans un AnyBitmap, qui est passé à QrReader.Read(). La valeur décodée du premier code QR détecté s'affiche dans le label de résultat.

Ajoutez la méthode suivante à MainPage.xaml.cs :

using IronQr;
using IronSoftware.Drawing;

private async void OnScanButtonClicked(object sender, EventArgs e)
{
    // Start scanning QR codes
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });
    var imageSource = images.FullPath.ToString();

    var inputBmp = AnyBitmap.FromFile(imageSource);

    // Load the asset into QrImageInput
    QrImageInput imageInput = new QrImageInput(inputBmp);

    // Create a QR Reader object
    QrReader reader = new QrReader();

    // Read the input and get all embedded QR Codes
    IEnumerable<QrResult> results = reader.Read(imageInput);

    // Display the first result
    resultLabel.Text = "Scanned Text: " + results.First().Value;
}
using IronQr;
using IronSoftware.Drawing;

private async void OnScanButtonClicked(object sender, EventArgs e)
{
    // Start scanning QR codes
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });
    var imageSource = images.FullPath.ToString();

    var inputBmp = AnyBitmap.FromFile(imageSource);

    // Load the asset into QrImageInput
    QrImageInput imageInput = new QrImageInput(inputBmp);

    // Create a QR Reader object
    QrReader reader = new QrReader();

    // Read the input and get all embedded QR Codes
    IEnumerable<QrResult> results = reader.Read(imageInput);

    // Display the first result
    resultLabel.Text = "Scanned Text: " + results.First().Value;
}
Imports IronQr
Imports IronSoftware.Drawing

Private Async Sub OnScanButtonClicked(sender As Object, e As EventArgs)
    ' Start scanning QR codes
    Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
        .PickerTitle = "Pick image",
        .FileTypes = FilePickerFileType.Images
    })
    Dim imageSource = images.FullPath.ToString()

    Dim inputBmp = AnyBitmap.FromFile(imageSource)

    ' Load the asset into QrImageInput
    Dim imageInput As New QrImageInput(inputBmp)

    ' Create a QR Reader object
    Dim reader As New QrReader()

    ' Read the input and get all embedded QR Codes
    Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

    ' Display the first result
    resultLabel.Text = "Scanned Text: " & results.First().Value
End Sub
$vbLabelText   $csharpLabel

FilePicker.Default.PickAsync est fourni par la couche d'abstraction de la plateforme MAUI et fonctionne sur Android, iOS et Windows sans aucun code spécifique à la plateforme. AnyBitmap.FromFile gère le décodage de l'image, et QrReader.Read retourne un IEnumerable<QrResult> avec une entrée par code QR trouvé dans l'image.

Sortie

Sélectionner une image de code QR déclenche le scan. La valeur décodée apparaît dans le label de résultat sous l'aperçu de l'image.

.NET MAUI QR Code Scanner using IronQR — app selecting a QR code image and displaying the decoded value

Code QR sélectionné et valeur décodée affichée dans le label de résultat

Téléchargez le projet

Cliquez ici pour télécharger le projet complet MauiQrScanner.

Conclusion

Dans cet article, nous avons démontré comment créer un scanner de codes QR natif dans une application .NET MAUI en utilisant IronQR. L'API FilePicker fournit une sélection d'images native à la plateforme sur Android, iOS, et Windows, tandis que QrReader.Read d'IronQR gère le décodage en un seul appel. La même approche s'adapte à plusieurs codes QR par image en itérant sur la collection complète de résultats au lieu d'appeler .First().

IronQR nécessite une licence pour le développement et l'utilisation commerciale. Les détails des licences sont disponibles ici.

Pour un aperçu plus approfondi de la lecture des propriétés des codes QR au-delà de la valeur, consultez les guides Lire la valeur du code QR et Lire le type de code QR.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite
Prêt à commencer?
Nuget Téléchargements 63,625 | Version : 2026.4 vient de sortir
Still Scrolling Icon

Vous faites encore défiler ?

Vous voulez une preuve rapidement ? PM > Install-Package IronQR
exécuter un échantillon regarder votre URL devenir un code QR.