.NET MAUI Barkod Tarayıcı

Önkoşullar

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

IronBarcode Kütüphanesini Yükle

IronBarcode kutuphanesini NuGet kullanarak Package Manager Console ile kurabiliriz. Bu konsolu Visual Studio'da açmak için Tools > NuGet Package Manager > Package Manager Console gidin. Sonra, aşağıdaki komutu konsolda yazın:

Install-Package BarCode

Bu konsol komutu, MAUI projesinde IronBarcode kutuphanesinin en son sürümünü indirecektir. Alternatif olarak, NuGet web sitesi'nde NuGet paketinin en son sürümünü arayabilirsiniz.

Ön Yüz

İlk adım ön yüz tasarımını oluşturmaktır. Bunun için iki düğme, bir metin alanı ve bir resim kutusundan oluşan bir düzen oluşturacağız. Bir düğme barkod seçmek için, diğeri ise barkod metnini kopyalamak için kullanılacak. Resim kutusu seçilen resmi gösterecek.

MainPage.xaml dosyasındaki içeriği aşağıdakilerle 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 merkezi konumda dikey bir yığında yer alıyor. Bunu tercihlerinize göre değiştirebilirsiniz.

IronBarcode kullanarak Barkod Tarama

Bu bölümde IronBarcode kütüphanesi kullanılarak barkod tarama kodu açıklanacaktır. Öncelikle, dosyayı seçmek ve görüntü için dosya türünü belirtmek için bir FilePicker kullanacağız. Bundan sonra, görüntü dosyasının yolunu almak için FullPath özelliğini kullanacağız ve ardından görüntü kutusunun kaynağını FullPath değerine ayarlayacağız. Son olarak, metni almak için BarcodeReader fonksiyonunun Read içerisinde path 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 editörünün metnini kopyalamak ve kullanıcının metnin kopyalandığını belirten bir uyarı mesajı vermek 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. Resim henüz seçilmediği için gösterilmiyor.

Resim seçilmediğinde çıktı

Barkod seçildiğinde, aşağıdaki ekran görüntüsünde olduğu gibi görünecek ve QR Kodunun çıktı metni editörde gösterilecektir.

Resim seçildikten sonra çıktı

Kopyala düğmesine tıklamak, daha önce bahsedilen uyarı penceresini tetikleyecektir.

Kopyalama uyarısı