.NET MAUI Barcode Scanner

前提条件

1. Visual Studio 2022
2. Visual Studio の .NET MAUI プロジェクト

IronBarcode ライブラリのインストール

NuGet パッケージマネージャーコンソール を使用して、IronBarcode ライブラリをインストールできます。 Visual Studio でこのコンソールを開くには、ツール > NuGet パッケージマネージャー > パッケージマネージャーコンソール に移動します。 次に、コンソールに次のコマンドを書きます。

Install-Package BarCode

このコンソールコマンドにより、MAUI プロジェクト内で最新バージョンの IronBarcode ライブラリがダウンロードされます。 また、NuGet ウェブサイトで最新バージョンのパッケージを検索することもできます。

フロントエンド

最初のステップはフロントエンドデザインを作成することです。 これには、2 つのボタン、1 つのテキストエリア、1 つの画像ボックスを含むレイアウトを作成します。 1 つのボタンはバーコードを選択するために使用され、もう 1 つはバーコードのテキストをコピーします。 画像ボックスは選択された画像を表示します。

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

以下のコードは、テキストエディタのテキストをコピーし、テキストがコピーされたことをユーザーに通知するアラートメッセージを表示するために使用されます。

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.

出力

プロジェクトを実行すると、以下の出力が表示されます。 画像はまだ選択されていないため、表示されていません。

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

画像が選択されていないときの出力

バーコードが選択されると、以下のスクリーンショットのように表示され、QR コードの出力テキストがエディタに表示されます。

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

画像が選択された後の出力

コピー ボタンをクリックすると、前述のアラート ウィンドウが表示されます。

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

コピー アラート