help with qr codes

Question

I have this VMnamespace Scan2Cart.ViewModels;

public partial class HomePageViewModel(IPageService pageService, IDataProvider dataProvider) : BaseViewModel(pageService) {
    [ObservableProperty]
    public partial bool ShouldDetect { get; set; } = true;
    [ObservableProperty]
    public partial bool _IsProductInfoVisible { get; set; } = false;
    [ObservableProperty]
    public partial Product Product { get; set; }
    [ObservableProperty]
    public partial bool PopUpDetectedOpen { get; set; }
    public ObservableCollection<Product> Products { get; set; } = [];
    [RelayCommand]
    private async Task BarcodesDetected(IEnumerable<BarcodeResult> results) {
        var val = results.FirstOrDefault()?.Value;
        if (string.IsNullOrEmpty(val))
            return;
        var product = await dataProvider.GetProductByIdAsync(val);
        Product = product;
        ShouldDetect = false;
        PopUpDetectedOpen = true;
    }
    [RelayCommand]
    void Yes() {
        if (!Products.Any(x => x.Id == Product.Id)) {
            Products.Add(Product);
            PopUpDetectedOpen = false;
        }
        PopUpDetectedOpen = false;
    }
    [RelayCommand]
    void No() {
        PopUpDetectedOpen = false;
    }
    [RelayCommand]
    void Opening() {
        _IsProductInfoVisible = true;
    }
    [RelayCommand]
    void Closing() {
        _IsProductInfoVisible = false;
        PopUpDetectedOpen = true;
        ShouldDetect = true;
    }
}

and this xaml

    <Grid RowDefinitions="*,Auto">
        <zxing:CameraBarcodeReaderView
            x:Name="CameraView"
            BarcodesDetected="CameraView_BarcodesDetected"
            IsDetecting="{x:Binding ShouldDetect}" />
        <Label
            Margin="10"
            FontAttributes="Bold"
            FontSize="40"
            HorizontalTextAlignment="End"
            Text="121$"
            TextColor="White" />
        <Grid Grid.Row="1">
            <badge:SfBadgeView
                BadgeText="{x:Binding Products.Count}"
                HorizontalOptions="Start"
                VerticalOptions="Center">
                <badge:SfBadgeView.Content>
                    <Label
                        FontFamily="la"
                        FontSize="50"
                        Text="{x:Static fi:IconFont.ShoppingCart}"
                        VerticalTextAlignment="Center" />
                </badge:SfBadgeView.Content>
                <badge:SfBadgeView.BadgeSettings>
                    <badge:BadgeSettings
                        Background="CornflowerBlue"
                        BadgeAlignment="End"
                        Position="TopRight" />
                </badge:SfBadgeView.BadgeSettings>
            </badge:SfBadgeView>
            <Button
                Margin="5"
                CornerRadius="16"
                HeightRequest="25"
                HorizontalOptions="End"
                Text="Pay"
                VerticalOptions="Center"
                WidthRequest="200" />
        </Grid>
        <pop:ProductPage x:Name="ProductPopupControl" IsOpen="{x:Binding PopUpDetectedOpen}" />
    </Grid>

The problem

the scanner scans the first time, but the second time doesn't open anything.

qr to test

Answer 1

Hi @Eduardo Gomez ,

Thanks for reaching out.

The behavior you’re seeing happens because the popup is controlled by a boolean flag, and that flag remains true after the first scan. When the scanner detects a second barcode, the value doesn’t actually change (true → true), so the UI has nothing new to react to and the popup won’t reopen.

Additionally, the barcode scanner fires continuously while detecting, which means that if you try to instantly toggle the popup state (false → true) during detection, it will cause flickering.

A reliable way to handle this scenario is to pause barcode detection when the popup is open, and then re-enable detection only after the user closes the popup. This prevents repeated triggers and ensures the popup displays consistently.

Here’s a clean example based on your original ViewModel structure:

[RelayCommand]
private async Task BarcodesDetected(IEnumerable<BarcodeResult> results)
{
    if (PopUpDetectedOpen)
        return; // Ignore new scans while popup is visible

    var val = results.FirstOrDefault()?.Value;
    if (string.IsNullOrEmpty(val))
        return;

    CameraView.IsDetecting = false; // Pause detection

    Product = await dataProvider.GetProductByIdAsync(val);
    PopUpDetectedOpen = true; // Open product popup
}

[RelayCommand]
void Yes()
{
    if (!Products.Any(x => x.Id == Product.Id))
        Products.Add(Product);
    ClosePopup();
}

[RelayCommand]
void No()
{
    ClosePopup();
}

void ClosePopup()
{
    PopUpDetectedOpen = false;    // Close popup
    CameraView.IsDetecting = true; // Resume detection
}

Depending on how your project is structured, your ViewModel might not have direct access to the CameraBarcodeReaderView. If you’re using IPageService, you may already have a way to reference it. But if your ViewModel cannot access UI elements directly, you can safely move the detection toggling to the code-behind instead.

For example, in your page’s code-behind:

private void CameraView_BarcodesDetected(object sender, BarcodeEventArgs e)
{
    if (ViewModel.PopUpDetectedOpen)
        return;

    CameraView.IsDetecting = false;
    ViewModel.BarcodesDetectedCommand.Execute(e.Results);
}

And when the popup closes, you can re-enable detection:

CameraView.IsDetecting = true;

This approach still achieves the same effect, while keeping UI-specific logic in the code-behind and application logic in the ViewModel.

Hope this helps! If my answer was helpful - kindly follow the instructions here so others with the same problem can benefit as well.

Answer 2

CameraView.IsDetecting = true;