.NET MAUI Barcode Scanner

Voraussetzungen

1. Visual Studio 2022
2. Ein .NET MAUI-Projekt in Visual Studio

IronBarcode-Bibliothek installieren

Wir können die IronBarcode-Bibliothek mithilfe der NuGet Package Manager Console installieren. Um diese Konsole in Visual Studio zu öffnen, navigieren Sie zu Tools > NuGet Package Manager > Package Manager Console. Geben Sie dann den folgenden Befehl in der Konsole ein:

Install-Package BarCode

Dieser Konsolenbefehl lädt die neueste Version der IronBarcode-Bibliothek im MAUI-Projekt herunter. Alternativ könnten Sie auch auf der NuGet-Website nach der neuesten Version des Pakets suchen.

Front-End

Der erste Schritt besteht darin, das Front-End-Design zu erstellen. Dafür erstellen wir ein Layout, das aus zwei Schaltflächen, einem Textbereich und einer Bildbox besteht. Eine Schaltfläche wird verwendet, um den Barcode auszuwählen, und eine weitere wird den Text des Barcodes kopieren. Die Bildbox zeigt das ausgewählte Bild an.

Ersetzen Sie den Inhalt in der MainPage.xaml-Datei mit dem folgenden:

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

Alle Elemente befinden sich in einem vertikalen Stapel mit zentrierter Position. Sie können es nach Ihren Vorlieben ändern.

Barcode-Scannen mit IronBarcode

In diesem Abschnitt wird der Code zum Scannen von Barcodes mit der IronBarcode-Bibliothek beschrieben. Zuerst verwenden wir eine FilePicker, um die Datei auszuwählen und den Dateityp für das Bild anzugeben. Danach verwenden wir die FullPath-Eigenschaft, um den Pfad der Bilddatei zu erhalten, und setzen dann die Quelle der Bildbox auf den FullPath-Wert. Schließlich verwenden wir den path-Wert in der Read-Funktion des BarcodeReader, um den Text abzurufen.

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

Der unten gezeigte Code wird verwendet, um den Text des Texteditors zu kopieren und dem Benutzer eine Benachrichtigung anzuzeigen, dass der Text kopiert wurde.

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.

Ausgabe

Nach dem Starten des Projekts wird die folgende Ausgabe angezeigt. Das Bild wird nicht angezeigt, da es noch nicht ausgewählt ist.

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

Ausgabe, wenn kein Bild ausgewählt ist

Wenn der Barcode ausgewählt ist, wird er wie im folgenden Screenshot angezeigt und der Ausgabe-Text des QR-Codes wird im Editor angezeigt.

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

Ausgabe nach Auswahl des Bildes

Durch Klicken auf die Kopierschaltfläche wird das zuvor erwähnte Benachrichtigungsfenster angezeigt.

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

Kopierwarnung