.NET MAUI BarCode/QRCode 사용하기 - ZXing

.NET MAUI BarCode/QRCode 사용하기 - ZXing

 

1. ZXing.Net.Maui.Controls Nuget 설치

https://github.com/Redth/ZXing.Net.Maui

GitHub - Redth/ZXing.Net.Maui: Barcode Scanning for MAUI?

 

2. MauiProgram.cs 에 코드 추가

using Microsoft.Extensions.Logging;

using ZXing.Net.Maui.Controls;

namespace Maui.ZxingBarcodeTest
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseBarcodeReader() // 추가
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });

#if DEBUG
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

 

3. BarcodeView 및 GeneratorView 생성

- BarCode 스캔 후 결과 문자열을 표시하고 결과를 다시 QRCode 로 표시합니다.
- 플래시를 켰다 끄기 기능이 있습니다.
- 카메라 전/후 변경 기능이 있습니다.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Maui.ZxingBarcodeTest.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI.Controls">


    <Grid RowDefinitions="*,*">
        <zxing:CameraBarcodeReaderView
            x:Name="barcodeReader"
            Grid.Row="0"
            BarcodesDetected="BarcodeReader_BarcodesDetected"
            IsDetecting="True"
            IsTorchOn="False" />
        <HorizontalStackLayout
            Grid.Row="0"
            HorizontalOptions="End"
            VerticalOptions="Start">
            <Switch
                x:Name="touchOnSwitch"
                IsToggled="False"
                Toggled="touchOnSwitch_Toggled" />
            <Label
                Margin="0,0,10,0"
                Text="Light"
                TextColor="White"
                VerticalOptions="Center"
                VerticalTextAlignment="Center" />
        </HorizontalStackLayout>
        <HorizontalStackLayout
            Grid.Row="0"
            HorizontalOptions="Start"
            VerticalOptions="Start">
            <Label
                Margin="10,0,0,0"
                Text="Rear"
                TextColor="White"
                VerticalOptions="Center"
                VerticalTextAlignment="Center" />
            <Switch
                x:Name="cameraSwitch"
                IsToggled="False"
                Toggled="cameraSwitch_Toggled" />
            <Label
                Margin="0"
                Text="Front"
                TextColor="White"
                VerticalOptions="Center"
                VerticalTextAlignment="Center" />
        </HorizontalStackLayout>
        <Label
            x:Name="barcodeResult"
            Grid.Row="0"
            FontSize="18"
            VerticalOptions="End"
            VerticalTextAlignment="Center" />

        <zxing:BarcodeGeneratorView
            x:Name="generateBarcode"
            Grid.Row="1"
            Margin="20"
            ForegroundColor="Black"
            Format="QrCode" />
        <!--<Label
            Grid.Row="1"
            FontSize="18"
            HorizontalOptions="Center"
            Text="kjun.kr"
            VerticalOptions="End"
            VerticalTextAlignment="Center" />-->
    </Grid>

</ContentPage>

MainPage.xaml.cs

namespace Maui.ZxingBarcodeTest
{
    public partial class MainPage : ContentPage
    {
        int count = 0;

        public MainPage()
        {
            InitializeComponent();
        }

        private void BarcodeReader_BarcodesDetected(object sender, ZXing.Net.Maui.BarcodeDetectionEventArgs e)
        {
            Dispatcher.Dispatch(() =>
            {
                this.barcodeResult.Text = $"{e.Results[0].Value}{Environment.NewLine}[{e.Results[0].Format}]";

                //this.generateBarcode.Format = e.Results[0].Format; // Error 발생
                this.generateBarcode.Value = e.Results[0].Value;
            });
        }

        private void touchOnSwitch_Toggled(object sender, ToggledEventArgs e)
        {
            this.barcodeReader.IsTorchOn = this.touchOnSwitch.IsToggled;
        }

        private void cameraSwitch_Toggled(object sender, ToggledEventArgs e)
        {
            if (this.cameraSwitch.IsToggled)
            {
                this.barcodeReader.CameraLocation = ZXing.Net.Maui.CameraLocation.Front;
            }
            else
            {
                this.barcodeReader.CameraLocation = ZXing.Net.Maui.CameraLocation.Rear;
            }
        }
    }
}

 

4. Camera 권한 허용하기

Android

- AndroidManifest.xml 에 아래항목 추가

</uses-permission android:name="android.permission.camera" >

iOS

- Info.plist 에 아래항목 추가

<key>NSCameraUsageDescription</key> <string>This app uses barcode scanning to...</string>

 

실행

 

소스

https://github.com/kei-soft/Maui.ZxingBarcode

GitHub - kei-soft/Maui.ZxingBarcode