Scanner de Código de Barras .NET MAUI

Pré-requisitos

1. Visual Studio 2022
2. Um projeto .NET MAUI no Visual Studio

Instalar a Biblioteca IronBarcode

Podemos instalar a biblioteca IronBarcode usando o NuGet Package Manager Console. Para abrir este console no Visual Studio, navegue para Tools > NuGet Package Manager > Package Manager Console. Em seguida, escreva o seguinte comando no console:

Install-Package BarCode

Este comando do console irá baixar a versão mais recente da biblioteca IronBarcode no projeto MAUI. Alternativamente, você também pode procurar a versão mais recente do pacote NuGet no site do NuGet.

Front-End

A primeira etapa será criar o design do front-end. Para isso, vamos criar um layout que consiste em dois botões, uma área de texto e uma caixa de imagem. Um botão será usado para selecionar o código de barras, e outro irá copiar o texto do código de barras. A caixa de imagem mostrará a imagem selecionada.

Substitua o conteúdo do arquivo MainPage.xaml pelo seguinte:

<?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 os elementos estão em uma pilha vertical com a posição central. Você pode alterá-lo conforme sua preferência.

Digitalização de Código de Barras usando IronBarcode

Esta seção descreve o código para digitalizar códigos de barras usando a biblioteca IronBarcode. Primeiro, usaremos um FilePicker para selecionar o arquivo e especificar o tipo de arquivo para a imagem. Depois disso, usaremos a propriedade FullPath para recuperar o caminho do arquivo de imagem e, em seguida, definir a origem da caixa de imagem para o valor FullPath. Finalmente, usaremos o valor path na função Read do BarcodeReader para recuperar o 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;
}

O código mostrado abaixo será usado para copiar o texto do editor de texto e exibir uma mensagem de alerta para o usuário que o texto foi 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");
}

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

Saída

Após executar o projeto, você verá a seguinte saída. A imagem não está sendo mostrada porque ainda não foi selecionada.

Saída quando nenhuma imagem é selecionada

Quando o código de barras for selecionado, ele aparecerá como na captura de tela abaixo, e o texto de saída do Código QR será mostrado no editor.

Saída após a imagem ser selecionada

Clicar no botão Copiar acionará a janela de alerta mencionada anteriormente.

Alerta de cópia