.NET MAUI Barkod Tarayıcı

Ön Koşullar

1. Visual Studio 2022
2. Visual Studio'da bir .NET MAUI projesi

IronBarcode Kütüphanesini Yükleyin

NuGet Package Manager Console kullanarak IronBarcode kütüphanesini yükleyebiliriz. Bu konsolu Visual Studio'da açmak için Tools > NuGet Package Manager > Package Manager Console adresine gidin. Ardından, konsola aşağıdaki komutu yazın:

Install-Package BarCode

Bu konsol komutu, MAUI projesinde en son sürüm IronBarcode kütüphanesini indirecektir. Alternatif olarak, NuGet web sitesinde NuGet paketinin en son sürümünü de arayabilirsiniz.

Ön Yüz

İlk adım, ön yüz tasarımını oluşturmaktır. Bunun için iki buton, bir metin alanı ve bir görüntü kutusundan oluşan bir düzen oluşturacağız. Bir buton barkodu seçmek için kullanılacak, diğer buton ise barkod metnini kopyalayacak. Görüntü kutusu seçilen görüntüyü gösterecek.

MainPage.xaml dosyasındaki içeriği aşağıdakiyle değiştirin:

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

Tüm öğeler ortalandığında dikey bir yığın içindedir. Tercihinize göre değiştirebilirsiniz.

IronBarcode kullanarak Barkod Tarama

Bu bölümde, IronBarcode kütüphanesini kullanarak barkod taramak için gereken kodu açıklayacağız. İlk olarak, dosyayı seçmek ve görüntünün dosya türünü belirtmek için FilePicker kullanacağız. Bundan sonra, FullPath özelliğini kullanarak görüntü dosyasının yolunu alacağız ve ardından görüntü kutusunun kaynağını FullPath değerine ayarlayacağız. Son olarak, metni almak için BarcodeReader işlevindeki Read değerini kullanacağız.

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

Aşağıda gösterilen kod, metin düzenleyicisinin metnini kopyalamak ve kullanıcının metnin kopyalandığını bildiren bir uyarı mesajı görüntülemek için kullanılacaktır.

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.

Çıktı

Projeyi çalıştırdıktan sonra aşağıdaki çıktıyı göreceksiniz. Görüntü henüz seçilmediği için görünmüyor.

Görüntü seçilmediğinde çıktı

Barkod seçildiğinde, aşağıdaki ekran görüntüsündeki gibi görünecek ve QR Kodunun çıktı metni düzenleyicide gösterilecektir.

Görüntü seçildikten sonra çıktı

Kopyala düğmesine tıkladığınızda, daha önce açıklanan uyarı penceresi açılacaktır.

Kopya uyarısı