.NET MAUI Barcode Scanner

Prérequis

1. Visual Studio 2022
2. Un projet .NET MAUI dans Visual Studio

Installer la bibliothèque IronBarcode

Nous pouvons installer la bibliothèque IronBarcode en utilisant la Console du gestionnaire de packages NuGet. Pour ouvrir cette console dans Visual Studio, naviguez vers Outils > Gestionnaire de packages NuGet > Console du gestionnaire de packages. Ensuite, écrivez la commande suivante dans la console :

Install-Package BarCode

Cette commande de console téléchargera la dernière version de la bibliothèque IronBarcode dans le projet MAUI. Alternativement, vous pouvez également rechercher la dernière version du package NuGet sur le site NuGet.

Front-End

La première étape sera de créer le design du front-end. Pour cela, nous allons créer une mise en page composée de deux boutons, une zone de texte et une zone d'image. Un bouton sera utilisé pour sélectionner le code-barres, et un autre copiera le texte du code-barres. La zone d'image affichera l'image sélectionnée.

Remplacez le contenu du fichier MainPage.xaml par ce qui suit :

<?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="MAUI_Barcode.MainPage">

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

            <Button
                x:Name="ImageSelect"
                Text="Select Barcode"
                SemanticProperties.Hint="Select Image"
                Clicked="SelectBarcode"
                HorizontalOptions="Center" />
            <Image
                x:Name="barcodeImage"
                SemanticProperties.Description="Selected Barcode"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Editor
                x:Name="outputText"
                Placeholder="Output text"
                HeightRequest="100"
                WidthRequest="500" />
            <Button
                x:Name="copyText"
                Text="Copy"
                SemanticProperties.Hint="Copy Text"
                WidthRequest="150"
                Clicked="CopyEditorText"
                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="MAUI_Barcode.MainPage">

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

            <Button
                x:Name="ImageSelect"
                Text="Select Barcode"
                SemanticProperties.Hint="Select Image"
                Clicked="SelectBarcode"
                HorizontalOptions="Center" />
            <Image
                x:Name="barcodeImage"
                SemanticProperties.Description="Selected Barcode"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Editor
                x:Name="outputText"
                Placeholder="Output text"
                HeightRequest="100"
                WidthRequest="500" />
            <Button
                x:Name="copyText"
                Text="Copy"
                SemanticProperties.Hint="Copy Text"
                WidthRequest="150"
                Clicked="CopyEditorText"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Tous les éléments sont empilés verticalement avec la position centrale. Vous pouvez le changer selon votre préférence.

Scanner de codes-barres utilisant IronBarcode

Cette section décrira le code pour scanner des codes-barres enutilisant la bibliothèque IronBarcode. Tout d'abord, nous utiliserons un FilePicker pour sélectionner le fichier et spécifier le type de fichier pour l'image. Ensuite, nous utiliserons la propriété FullPath pour récupérer le chemin du fichier image, puis définirons la source de la zone d'image à la valeur FullPath. Enfin, nous utiliserons la valeur path dans la fonction Read du BarcodeReader pour récupérer le texte.

private async void SelectBarcode(object sender, EventArgs e)
{
    // Use FilePicker to allow the user to select an image file.
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image file.
    var imageSource = images.FullPath.ToString();

    // Set the source of the Image view to the selected image's path.
    barcodeImage.Source = imageSource;

    // Use IronBarcode to read the barcode from the image file and get the first result.
    var result = BarcodeReader.Read(imageSource).First().Text;

    // Display the read result in the Editor.
    outputText.Text = result;
}

private async void SelectBarcode(object sender, EventArgs e)
{
    // Use FilePicker to allow the user to select an image file.
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image file.
    var imageSource = images.FullPath.ToString();

    // Set the source of the Image view to the selected image's path.
    barcodeImage.Source = imageSource;

    // Use IronBarcode to read the barcode from the image file and get the first result.
    var result = BarcodeReader.Read(imageSource).First().Text;

    // Display the read result in the Editor.
    outputText.Text = result;
}

Private Async Sub SelectBarcode(ByVal sender As Object, ByVal e As EventArgs)
	' Use FilePicker to allow the user to select an image file.
	Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
		.PickerTitle = "Pick image",
		.FileTypes = FilePickerFileType.Images
	})

	' Get the full path of the selected image file.
	Dim imageSource = images.FullPath.ToString()

	' Set the source of the Image view to the selected image's path.
	barcodeImage.Source = imageSource

	' Use IronBarcode to read the barcode from the image file and get the first result.
	Dim result = BarcodeReader.Read(imageSource).First().Text

	' Display the read result in the Editor.
	outputText.Text = result
End Sub

Le code montré ci-dessous sera utilisé pour copier le texte de l'éditeur de texte et afficher un message d'alerte à l'utilisateur que le texte est copié.

private async void CopyEditorText(object sender, EventArgs e)
{
    // Copy the text from the Editor to the clipboard.
    await Clipboard.SetTextAsync(outputText.Text);

    // Show a success message to the user.
    await DisplayAlert("Success", "Text is copied!", "OK");
}

private async void CopyEditorText(object sender, EventArgs e)
{
    // Copy the text from the Editor to the clipboard.
    await Clipboard.SetTextAsync(outputText.Text);

    // Show a success message to the user.
    await DisplayAlert("Success", "Text is copied!", "OK");
}

Private Async Sub CopyEditorText(ByVal sender As Object, ByVal e As EventArgs)
	' Copy the text from the Editor to the clipboard.
	Await Clipboard.SetTextAsync(outputText.Text)

	' Show a success message to the user.
	Await DisplayAlert("Success", "Text is copied!", "OK")
End Sub

You can find the project source code in this article on GitHub.

Sortie

Après avoir exécuté le projet, vous verrez la sortie suivante. L'image ne s'affiche pas car elle n'est pas encore sélectionnée.

class="content-img-align-center">

Sortie quand aucune image n'est sélectionnée

Lorsque le code-barres est sélectionné, il s'affichera comme la capture d'écran ci-dessous, et le texte de sortie du code QR sera affiché dans l'éditeur.

class="content-img-align-center">

Sortie après sélection de l'image

Cliquer sur le bouton Copier déclenchera la fenêtre d'alerte mentionnée précédemment pour apparaître.

class="content-img-align-center">

Alerte de copie