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.