.NET MAUI Skaner Kodów Kreskowych

Wymagania wstępne

1. Visual Studio 2022
2. Projekt .NET MAUI w Visual Studio

Zainstaluj bibliotekę IronBarcode

Możemy zainstalować bibliotekę IronBarcode używając NuGet Package Manager Console. Aby otworzyć tę konsolę w Visual Studio, przejdź do Tools > NuGet Package Manager > Package Manager Console. Następnie wpisz następującą komendę w konsoli:

Install-Package BarCode

Ta komenda konsolowa pobierze najnowszą wersję biblioteki IronBarcode w projekcie MAUI. Alternatywnie, można również wyszukać najnowszą wersję pakietu NuGet nastronie NuGet.

Front-End

Pierwszym krokiem będzie stworzenie projektu front-end. W tym celu stworzymy układ złożony z dwóch przycisków, jednej strefy tekstowej i jednego pola obrazu. Jeden przycisk zostanie użyty do wyboru kodu kreskowego, a inny do skopiowania tekstu kodu kreskowego. Pole obrazu wyświetli wybrany obraz.

Zamień zawartość w pliku MainPage.xaml na poniższą:

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

Wszystkie elementy są w pionowym stosie z pozycją środkową. Możesz zmienić to według własnych preferencji.

Skanowanie kodu kreskowego przy użyciu IronBarcode

Ta sekcja opisze kod do skanowania kodów kreskowych przy użyciu biblioteki IronBarcode. Najpierw użyjemy FilePicker do wyboru pliku i określenia typu pliku dla obrazu. Po tym, użyjemy właściwości FullPath do pobrania ścieżki do pliku obrazu, a następnie ustawimy źródło pola obrazu na wartość FullPath. Na końcu, użyjemy wartości path w funkcji Read z BarcodeReader do pobrania tekstu.

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

Poniższy kod będzie używany do kopiowania tekstu edytora tekstu i wyświetlania użytkownikowi powiadomienia, że tekst został skopiowany.

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.

Wynik

Po uruchomieniu projektu zobaczysz następujące wyjście. Obraz nie jest wyświetlany, ponieważ nie został jeszcze wybrany.

Wyjście, gdy obraz nie jest wybrany

Gdy kod kreskowy zostanie wybrany, zostanie wyświetlony jak na poniższym zrzucie ekranu, a tekst wyjściowy kodu QR zostanie wyświetlony w edytorze.

Wyjście po wybraniu obrazu

Kliknięcie przycisku Kopiuj wywoła wcześniej wspomniane okno powiadomienia.

Powiadomienie o skopiowaniu