.NET MAUI 7 Barcode Scanner Issue with ZXing.Net.Maui on a TabbedPage

656 views Asked by At

I am experiencing an issue with the barcode scanner on ZXing.Net.Maui in a TabbedPage.

On the TabbedPage, I am trying to open a page with barcode recognition. Here is the XAML code:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:MauiPages="clr-namespace:App.MauiPages"
            x:Class="App.MauiPages.TabbedLayout"
            Title="TabbedLayout">
    <NavigationPage Title="One">
        <x:Arguments>
            <ContentPage Title="Home"></ContentPage>
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="One">
        <x:Arguments>
            <MauiPages:QrPage/>
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

And here is the QrPage 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"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI.Controls"
             x:Class="App.MauiPages.QrPage"
             Title="QrPage">

    <VerticalStackLayout>
        <Label x:Name="qrlabel"
               Text="SomeText"
               FontSize="20"
               FontFamily="Verdana"
               FontAttributes="Bold"
               TextColor="Red"/>
        <zxing:CameraBarcodeReaderView
            WidthRequest="200"
            HeightRequest="200"
            x:Name="cameraBarcodeReaderView"
            BarcodesDetected="cameraBarcodeReaderView_BarcodesDetected"/>
    </VerticalStackLayout>
</ContentPage>

I am following the documentation to integrate ZXing.Net.Maui. The barcode recognition works fine when the application starts, but if I swipe to the previous page in the TabbedLayout and return to the QrPage, the barcode recognition no longer works, and only a black rectangle is displayed instead of the scanner.

Then I decided to experiment and noticed that the scanner initializes in that case in the OnAppearing event:

protected async override void OnAppearing()
{
    base.OnAppearing();
    InitializeComponent();

    cameraBarcodeReaderView.IsDetecting = true;
    cameraBarcodeReaderView.Options = new BarcodeReaderOptions
    {
        Formats = BarcodeFormats.OneDimensional,
        AutoRotate = true,
        Multiple = false
    };
}

However, with this initialization, other controls on the page do not work. I also attempted to set the text for the Label, but it does not change.

protected void cameraBarcodeReaderView_BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
{
    Dispatcher.Dispatch(() =>
    {
        qrlabel.Text = $"{e.Results[0].Format} -> {e.Results[0].Value}";
        cameraBarcodeReaderView.IsDetecting = false;
    });
}

Please advise on how to make the ZXing CameraBarcodeReaderView work correctly on a TabbedPage.

0

There are 0 answers