Escáner de código de barras .NET MAUI

Prerrequisitos

1. Visual Studio 2022
2. Un proyecto .NET MAUI en Visual Studio

Instalar la biblioteca IronBarcode

Podemos instalar la biblioteca IronBarcode usando la Consola del Gestor de Paquetes de NuGet. Para abrir esta consola en Visual Studio, navega a Herramientas > Gestor de Paquetes NuGet > Consola del Gestor de Paquetes. Después, escribe el siguiente comando en la consola:

Install-Package BarCode

Este comando de consola descargará la última versión de la biblioteca IronBarcode en el proyecto MAUI. Alternativamente, también podrías buscar la última versión del paquete NuGet en el sitio web de NuGet.

Interfaz

El primer paso será crear el diseño de la interfaz frontal. Para esto, crearemos un diseño que consiste en dos botones, un área de texto y un cuadro de imagen. Un botón se usará para seleccionar el código de barras, y otro copiará el texto del código de barras. El cuadro de imagen mostrará la imagen seleccionada.

Reemplaza el contenido en el archivo MainPage.xaml con lo siguiente:

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

Todos los elementos están en una pila vertical con la posición central. Puedes cambiarlo según tu preferencia.

Escaneo de códigos de barras con IronBarcode

Esta sección describirá el código para escanear códigos de barras utilizando la biblioteca IronBarcode. Primero, usaremos un FilePicker para seleccionar el archivo y especificar el tipo de archivo para la imagen. Después de eso, usaremos la propiedad FullPath para recuperar la ruta del archivo de imagen y luego establecemos la fuente del cuadro de imagen al valor FullPath. Finalmente, usaremos el valor path en la función Read del BarcodeReader para recuperar el texto.

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

El código mostrado a continuación se usará para copiar el texto del editor de texto y mostrar un mensaje de alerta al usuario de que el texto se ha copiado.

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.

Resultado

Después de ejecutar el proyecto, verás la siguiente salida. La imagen no se muestra porque aún no está seleccionada.

Salida cuando no se selecciona ninguna imagen

Cuando el código de barras sea seleccionado, se mostrará como la captura de pantalla de abajo, y el texto de salida del Código QR se mostrará en el editor.

Salida después de seleccionar la imagen

Al hacer clic en el botón de Copiar, se activará la ventana de alerta mencionada anteriormente.

Alerta de copia