.NET MAUI 바코드 스캐너

필수 조건

1. Visual Studio 2022
2. Visual Studio에서의 .NET MAUI 프로젝트

IronBarcode 라이브러리 설치

NuGet Package Manager Console를 사용하여 IronBarcode 라이브러리를 설치할 수 있습니다. Visual Studio에서 이 콘솔을 열려면 Tools > NuGet Package Manager > Package Manager Console으로 이동하세요. 그런 다음 콘솔에 다음 명령어를 작성하십시오:

Install-Package BarCode

이 콘솔 명령어는 MAUI 프로젝트 내 최신 버전의 IronBarcode 라이브러리를 다운로드할 것입니다. 또한, NuGet 웹사이트에서 최신 버전의 NuGet 패키지를 검색할 수도 있습니다.

프론트 엔드

첫 번째 단계는 프론트 엔드 디자인을 만드는 것입니다. 이를 위해 버튼 두 개, 텍스트 영역 하나, 그리고 이미지 박스를 포함하는 레이아웃을 만듭니다. 하나의 버튼은 바코드를 선택하는 데 사용되며, 다른 하나는 바코드의 텍스트를 복사합니다. 이미지 박스는 선택된 이미지를 표시할 것입니다.

MainPage.xaml 파일의 내용을 다음과 같이 교체하십시오:

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

모든 요소는 가운데 정렬로 수직 스택에 있습니다. 취향에 따라 변경할 수 있습니다.

IronBarcode를 이용한 바코드 스캔

이 섹션에서는 IronBarcode 라이브러리를 사용하여 바코드를 스캔하는 코드를 설명합니다. 먼저, 파일을 선택하고 이미지의 파일 유형을 지정하기 위해 FilePicker를 사용할 것입니다. 그 후, FullPath 속성을 사용하여 이미지 파일의 경로를 검색한 다음 이미지 상자의 소스를 FullPath 값으로 설정합니다. 마지막으로, BarcodeReader의 Read 함수에서 path 값을 사용하여 텍스트를 검색할 것입니다.

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

산출

프로젝트를 실행한 후에는 다음과 같은 출력이 표시됩니다. 이미지가 아직 선택되지 않았기 때문에 표시되지 않습니다.

이미지가 선택되지 않은 경우의 출력

바코드가 선택되면 아래 스크린샷과 같이 표시되며, QR 코드의 출력 텍스트가 편집기에 표시됩니다.

이미지가 선택된 후의 출력

복사 버튼을 클릭하면 이전에 언급한 알림 창을 트리거합니다.

복사 알림