[C#/MAUI/.NET6] CameraBarcodeReaderView 엘리먼트 : 바코드/QR 코드 캡처하기

■ CameraBarcodeReaderView 엘리먼트를 사용해 바코드/QR 코드를 캡처하는 방법을 보여준다.

▶ TestProject.cs


<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
        <OutputType>Exe</OutputType>
        <RootNamespace>TestProject</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
        <ImplicitUsings>enable</ImplicitUsings>
        <ApplicationTitle>TestProject</ApplicationTitle>
        <ApplicationId>com.companyname.testproject</ApplicationId>
        <ApplicationIdGuid>307F785A-6EDE-4AEB-8813-DC0FFA886398</ApplicationIdGuid>
        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
        <ApplicationVersion>1</ApplicationVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">31.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
        <TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
        <EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
    </PropertyGroup>
    <ItemGroup>
        <MauiIcon
            Include="Resources\appicon.svg"
            ForegroundFile="Resources\appiconfg.svg"
            Color="#512bd4" />
        <MauiSplashScreen
            Include="Resources\appiconfg.svg"
            Color="#512bd4"
            BaseSize="128,128" />
        <MauiImage Include="Resources\Images\*" />
        <MauiImage
            Update="Resources\Images\dotnet_bot.svg"
            BaseSize="168,208" />
        <MauiFont Include="Resources\Fonts\*" />
        <MauiAsset
            Include="Resources\Raw\**"
            LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
    </ItemGroup>
    <ItemGroup>
        <PackageReference Include="ZXing.Net.Maui" Version="0.1.0-preview.5" />
    </ItemGroup>
</Project>

<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>

<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>

<RootNamespace>TestProject</RootNamespace>

<ImplicitUsings>enable</ImplicitUsings>

<ApplicationTitle>TestProject</ApplicationTitle>

<ApplicationId>com.companyname.testproject</ApplicationId>

</PropertyGroup>

<MauiIcon

Include="Resources\appicon.svg"

ForegroundFile="Resources\appiconfg.svg"

Color="#512bd4" />

<MauiSplashScreen

Include="Resources\appiconfg.svg"

Color="#512bd4"

BaseSize="128,128" />

<MauiImage

Update="Resources\Images\dotnet_bot.svg"

BaseSize="168,208" />

<MauiAsset

Include="Resources\Raw\**"

LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />

</ItemGroup>

</ItemGroup>

</Project>

▶ Platforms\Android\AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:allowBackup="true"
        android:icon="@android:mipmap/sym_def_app_icon"
        android:roundIcon="@mipmap/appicon_round"
        android:supportsRtl="true" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET"             />
    <uses-permission android:name="android.permission.CAMERA"               />
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<application

android:allowBackup="true"

android:icon="@android:mipmap/sym_def_app_icon"

android:roundIcon="@mipmap/appicon_round"

android:supportsRtl="true" />

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

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

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

</manifest>

▶ MauiProgram.cs


using ZXing.Net.Maui;
using ZXing.Net.Maui.Controls;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseBarcodeReader()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            )
            .ConfigureMauiHandlers
            (
                handlerCollection =>
                {
                    handlerCollection.AddHandler(typeof(CameraBarcodeReaderView), typeof(CameraBarcodeReaderViewHandler));
                    handlerCollection.AddHandler(typeof(CameraView             ), typeof(CameraViewHandler             ));
                    handlerCollection.AddHandler(typeof(BarcodeGeneratorView   ), typeof(BarcodeGeneratorViewHandler   ));
                }
            );

        return builder.Build();
    }

    #endregion
}

using ZXing.Net.Maui;

using ZXing.Net.Maui.Controls;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Public

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseBarcodeReader()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

)

.ConfigureMauiHandlers

(

handlerCollection =>

{

handlerCollection.AddHandler(typeof(CameraBarcodeReaderView), typeof(CameraBarcodeReaderViewHandler));

handlerCollection.AddHandler(typeof(CameraView ), typeof(CameraViewHandler ));

handlerCollection.AddHandler(typeof(BarcodeGeneratorView ), typeof(BarcodeGeneratorViewHandler ));

}

);

return builder.Build();

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.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">
    <Grid RowDefinitions="*,*,30">
        <zxing:CameraBarcodeReaderView x:Name="cameraBarcodeReaderView" Grid.Row="0"
            IsDetecting="True"
            IsTorchOn="False" />
        <HorizontalStackLayout Grid.Row="0"
            HorizontalOptions="Start"
            VerticalOptions="Start">
            <Label
                VerticalOptions="Center"
                Margin="10,0,0,0"
                TextColor="White"
                Text="후면" />
            <Switch x:Name="cameraLocationSwitch"
                VerticalOptions="Center"
                IsToggled="False" />
            <Label
                VerticalOptions="Center"
                Margin="0"
                TextColor="White"
                Text="전면" />
        </HorizontalStackLayout>
        <HorizontalStackLayout Grid.Row="0"
            HorizontalOptions="End"
            VerticalOptions="Start">
            <Switch x:Name="cameraLightSwitch"
                VerticalOptions="Center"
                IsToggled="False" />
            <Label
                VerticalOptions="Center"
                Margin="0,0,10,0"
                TextColor="White"
                Text="조명" />
        </HorizontalStackLayout>
        <zxing:BarcodeGeneratorView x:Name="barcodeGeneratorView" Grid.Row="1"
            Margin="20"
            ForegroundColor="Black"
            Format="QrCode" />
        <Label x:Name="barcodeResultLabel" Grid.Row="2"
            VerticalOptions="End"
            Margin="10,0,0,0"
            FontSize="18" />
    </Grid>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.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">

<zxing:CameraBarcodeReaderView x:Name="cameraBarcodeReaderView" Grid.Row="0"

IsDetecting="True"

IsTorchOn="False" />

<HorizontalStackLayout Grid.Row="0"

HorizontalOptions="Start"

VerticalOptions="Start">

<Label

VerticalOptions="Center"

Margin="10,0,0,0"

TextColor="White"

Text="후면" />

<Switch x:Name="cameraLocationSwitch"

VerticalOptions="Center"

IsToggled="False" />

<Label

VerticalOptions="Center"

Margin="0"

TextColor="White"

Text="전면" />

</HorizontalStackLayout>

<HorizontalStackLayout Grid.Row="0"

HorizontalOptions="End"

VerticalOptions="Start">

<Switch x:Name="cameraLightSwitch"

VerticalOptions="Center"

IsToggled="False" />

<Label

VerticalOptions="Center"

Margin="0,0,10,0"

TextColor="White"

Text="조명" />

</HorizontalStackLayout>

<zxing:BarcodeGeneratorView x:Name="barcodeGeneratorView" Grid.Row="1"

Margin="20"

ForegroundColor="Black"

Format="QrCode" />

<Label x:Name="barcodeResultLabel" Grid.Row="2"

VerticalOptions="End"

Margin="10,0,0,0"

FontSize="18" />

</Grid>

</ContentPage>

▶ MainPage.xaml.cs


using ZXing.Net.Maui;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.cameraLocationSwitch.Toggled             += cameraLocationSwitch_Toggled;
        this.cameraLightSwitch.Toggled                += cameraLightSwitch_Toggled;
        this.cameraBarcodeReaderView.BarcodesDetected += cameraBarcodeReaderView_BarcodesDetected;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 카메라 위치 스위치 토글시 처리하기 - cameraLocationSwitch_Toggled(sender, e)

    /// <summary>
    /// 카메라 위치 스위치 토글시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void cameraLocationSwitch_Toggled(object sender, ToggledEventArgs e)
    {
        if(this.cameraLocationSwitch.IsToggled)
        {
            this.cameraBarcodeReaderView.CameraLocation = CameraLocation.Front;
        }
        else
        {
            this.cameraBarcodeReaderView.CameraLocation = CameraLocation.Rear;
        }
    }

    #endregion
    #region 카메라 조명 스위치 토글시 처리하기 - cameraLightSwitch_Toggled(sender, e)

    /// <summary>
    /// 카메라 조명 스위치 토글시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void cameraLightSwitch_Toggled(object sender, ToggledEventArgs e)
    {
        this.cameraBarcodeReaderView.IsTorchOn = this.cameraLightSwitch.IsToggled;
    }

    #endregion
    #region 카메라 바코드 리더 뷰 바코드 탐지시 처리하기 - cameraBarcodeReaderView_BarcodesDetected(sender, e)

    /// <summary>
    /// 카메라 바코드 리더 뷰 바코드 탐지시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void cameraBarcodeReaderView_BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
    {
        Dispatcher.Dispatch
        (
            () =>
            {
                this.barcodeResultLabel.Text = $"{e.Results[0].Value}{Environment.NewLine}[{e.Results[0].Format}]";

                this.barcodeGeneratorView.Value = e.Results[0].Value;
            }
        );
    }

    #endregion
}

using ZXing.Net.Maui;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.cameraLocationSwitch.Toggled += cameraLocationSwitch_Toggled;

this.cameraLightSwitch.Toggled += cameraLightSwitch_Toggled;

this.cameraBarcodeReaderView.BarcodesDetected += cameraBarcodeReaderView_BarcodesDetected;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 카메라 위치 스위치 토글시 처리하기 - cameraLocationSwitch_Toggled(sender, e)

/// <summary>

/// 카메라 위치 스위치 토글시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void cameraLocationSwitch_Toggled(object sender, ToggledEventArgs e)

{

if(this.cameraLocationSwitch.IsToggled)

{

this.cameraBarcodeReaderView.CameraLocation = CameraLocation.Front;

}

else

{

this.cameraBarcodeReaderView.CameraLocation = CameraLocation.Rear;

}

#endregion

#region 카메라 조명 스위치 토글시 처리하기 - cameraLightSwitch_Toggled(sender, e)

/// <summary>

/// 카메라 조명 스위치 토글시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void cameraLightSwitch_Toggled(object sender, ToggledEventArgs e)

{

this.cameraBarcodeReaderView.IsTorchOn = this.cameraLightSwitch.IsToggled;

}

#endregion

#region 카메라 바코드 리더 뷰 바코드 탐지시 처리하기 - cameraBarcodeReaderView_BarcodesDetected(sender, e)

/// <summary>

/// 카메라 바코드 리더 뷰 바코드 탐지시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void cameraBarcodeReaderView_BarcodesDetected(object sender, BarcodeDetectionEventArgs e)

{

Dispatcher.Dispatch

(

() =>

{

this.barcodeResultLabel.Text = $"{e.Results[0].Value}{Environment.NewLine}[{e.Results[0].Format}]";

this.barcodeGeneratorView.Value = e.Results[0].Value;

}

);

}

#endregion

}

TestProject.zip