Fix barcode overlay z-order, support runtime navigation bar color changes, and remove SafeAreaEdges.None from CameraPreview containers

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [60.0.2]
+- [BarcodeScanner] Fixed barcode scan overlay rendering on top of toolbar containers by inserting the overlay at the correct z-order position.
+- [ContentPage] `NavigationPage.BarBackgroundColorProperty` and `NavigationPage.BarTextColorProperty` changes are now propagated at runtime, allowing dynamic navigation bar color updates without re-navigation.
+- [CameraPreview] Removed `SafeAreaEdges.None` from internal containers so maui handles insets.
+
 ## [60.0.1]
 - [CameraPreview] Removed manual safe-area padding on iOS and set `SafeAreaEdges.None` on internal containers so the top toolbar renders correctly on both modal and regular shell pages.
 

src/app/Playground/VetleSamples/BarcodeNoNavBarRepro.xaml

@@ -0,0 +1,14 @@
+<?xml
+    version="1.0"
+    encoding="utf-8"?>
+
+<dui:ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                 xmlns:dui="http://dips.com/mobile.ui"
+                 x:Class="Playground.VetleSamples.BarcodeNoNavBarRepro"
+                 Title="No NavBar Repro"
+                 NavigationPage.HasNavigationBar="False"
+                 NavigationPage.BarBackgroundColor="Black"
+                 NavigationPage.BarTextColor="White">
+    <dui:CameraPreview x:Name="CameraPreview"/>
+</dui:ContentPage>

src/app/Playground/VetleSamples/BarcodeNoNavBarRepro.xaml.cs

@@ -0,0 +1,93 @@
+using DIPS.Mobile.UI.API.Camera;
+using DIPS.Mobile.UI.API.Camera.BarcodeScanning;
+using Colors = Microsoft.Maui.Graphics.Colors;
+
+namespace Playground.VetleSamples;
+
+/// <summary>
+/// Repro: When no navigation bar in a modal page, top toolbar is squished into the status bar.
+/// Open this page modally with a NavigationPage wrapper (nav bar hidden) and observe
+/// the top toolbar content overlapping with the status bar.
+/// </summary>
+public partial class BarcodeNoNavBarRepro
+{
+    private readonly BarcodeScanner m_barcodeScanner;
+
+    public BarcodeNoNavBarRepro()
+    {
+        InitializeComponent();
+        m_barcodeScanner = new BarcodeScanner();
+    }
+
+    private async Task Start()
+    {
+        try
+        {
+            await m_barcodeScanner.Start(new BarcodeScannerStartOptions
+            {
+                Preview = CameraPreview,
+                OnCameraFailed = CameraFailed,
+                OnBarcodeAcceptedAsync = HandleBarcodeAcceptedAsync,
+                Strategy = new ScanRectangleBarcodeScanStrategy
+                {
+                    WidthFraction = 0.8f,
+                    HeightFraction = 0.3f
+                }
+            });
+
+            CameraPreview.AddTopToolbarView(new BoxView
+            {
+                Color = Colors.White,
+                HeightRequest = 50,
+                WidthRequest = 200,
+                HorizontalOptions = LayoutOptions.Center
+            });
+            CameraPreview.AddBottomToolbarView(CreateCloseButton());
+        }
+        catch (Exception exception)
+        {
+            Console.WriteLine(exception);
+        }
+    }
+
+    private void CameraFailed(CameraException e)
+    {
+        Console.WriteLine($"Camera failed: {e.Message}");
+    }
+
+    private Task HandleBarcodeAcceptedAsync(BarcodeScanResult barcodeScanResult)
+    {
+        return Task.CompletedTask;
+    }
+
+    protected override void OnAppearing()
+    {
+        _ = Start();
+        base.OnAppearing();
+    }
+
+    private void Close()
+    {
+        m_barcodeScanner.StopAndDispose();
+        Shell.Current.Navigation.PopModalAsync();
+    }
+
+    protected override bool OnBackButtonPressed()
+    {
+        Close();
+        return true;
+    }
+
+    private Button CreateCloseButton()
+    {
+        var button = new Button
+        {
+            Text = "Close",
+            TextColor = Colors.White,
+            BackgroundColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.Center
+        };
+        button.Clicked += (_, _) => Close();
+        return button;
+    }
+}

src/app/Playground/VetleSamples/BarcodeNoNavBarStatusBarRepro.xaml

@@ -0,0 +1,14 @@
+<?xml
+    version="1.0"
+    encoding="utf-8"?>
+
+<dui:ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                 xmlns:dui="http://dips.com/mobile.ui"
+                 x:Class="Playground.VetleSamples.BarcodeNoNavBarStatusBarRepro"
+                 Title="StatusBar Color Repro"
+                 NavigationPage.HasNavigationBar="False"
+                 NavigationPage.BarBackgroundColor="Black"
+                 NavigationPage.BarTextColor="White">
+    <dui:CameraPreview x:Name="CameraPreview"/>
+</dui:ContentPage>

src/app/Playground/VetleSamples/BarcodeNoNavBarStatusBarRepro.xaml.cs

@@ -0,0 +1,88 @@
+using DIPS.Mobile.UI.API.Camera;
+using DIPS.Mobile.UI.API.Camera.BarcodeScanning;
+using Colors = Microsoft.Maui.Graphics.Colors;
+
+namespace Playground.VetleSamples;
+
+/// <summary>
+/// Repro: When navigation bar is hidden in a modal, the status bar text color is not changed.
+/// Open this page modally with a NavigationPage wrapper (nav bar hidden) and observe
+/// the status bar text remains dark instead of switching to light for the camera background.
+/// </summary>
+public partial class BarcodeNoNavBarStatusBarRepro
+{
+    private readonly BarcodeScanner m_barcodeScanner;
+
+    public BarcodeNoNavBarStatusBarRepro()
+    {
+        InitializeComponent();
+        m_barcodeScanner = new BarcodeScanner();
+    }
+
+    private async Task Start()
+    {
+        try
+        {
+            await m_barcodeScanner.Start(new BarcodeScannerStartOptions
+            {
+                Preview = CameraPreview,
+                OnCameraFailed = CameraFailed,
+                OnBarcodeAcceptedAsync = HandleBarcodeAcceptedAsync
+            });
+
+            CameraPreview.AddTopToolbarView(new BoxView
+            {
+                Color = Colors.White,
+                HeightRequest = 50,
+                WidthRequest = 200,
+                HorizontalOptions = LayoutOptions.Center
+            });
+            CameraPreview.AddBottomToolbarView(CreateCloseButton());
+        }
+        catch (Exception exception)
+        {
+            Console.WriteLine(exception);
+        }
+    }
+
+    private void CameraFailed(CameraException e)
+    {
+        Console.WriteLine($"Camera failed: {e.Message}");
+    }
+
+    private Task HandleBarcodeAcceptedAsync(BarcodeScanResult barcodeScanResult)
+    {
+        return Task.CompletedTask;
+    }
+
+    protected override void OnAppearing()
+    {
+        _ = Start();
+        base.OnAppearing();
+    }
+
+    private void Close()
+    {
+        m_barcodeScanner.StopAndDispose();
+        Shell.Current.Navigation.PopModalAsync();
+    }
+
+    protected override bool OnBackButtonPressed()
+    {
+        Close();
+        return true;
+    }
+
+    private Button CreateCloseButton()
+    {
+        var button = new Button
+        {
+            Text = "Close",
+            TextColor = Colors.White,
+            BackgroundColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.Center
+        };
+        button.Clicked += (_, _) => Close();
+        return button;
+    }
+}

src/app/Playground/VetleSamples/BarcodeOverlayToolbarRepro.xaml

@@ -0,0 +1,17 @@
+<?xml
+    version="1.0"
+    encoding="utf-8"?>
+
+<dui:ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                 xmlns:dui="http://dips.com/mobile.ui"
+                 x:Class="Playground.VetleSamples.BarcodeOverlayToolbarRepro"
+                 Title="Overlay Toolbar Repro"
+                 NavigationPage.BarBackgroundColor="Black"
+                 NavigationPage.BarTextColor="White">
+    <dui:ContentPage.ToolbarItems>
+        <ToolbarItem IconImageSource="{dui:Icons close_line}"
+                     Clicked="Close"/>
+    </dui:ContentPage.ToolbarItems>
+    <dui:CameraPreview x:Name="CameraPreview"/>
+</dui:ContentPage>

src/app/Playground/VetleSamples/BarcodeOverlayToolbarRepro.xaml.cs

@@ -0,0 +1,89 @@
+using DIPS.Mobile.UI.API.Camera;
+using DIPS.Mobile.UI.API.Camera.BarcodeScanning;
+using Colors = Microsoft.Maui.Graphics.Colors;
+
+namespace Playground.VetleSamples;
+
+/// <summary>
+/// Repro: Android's GraphicsView overlay spans the entire top and bottom toolbar.
+/// Open this page modally with a NavigationPage wrapper and observe the overlay
+/// extending behind the navigation bar and bottom safe area on Android.
+/// </summary>
+public partial class BarcodeOverlayToolbarRepro
+{
+    private readonly BarcodeScanner m_barcodeScanner;
+
+    public BarcodeOverlayToolbarRepro()
+    {
+        InitializeComponent();
+        m_barcodeScanner = new BarcodeScanner();
+    }
+
+    private async Task Start()
+    {
+        try
+        {
+            await m_barcodeScanner.Start(new BarcodeScannerStartOptions
+            {
+                Preview = CameraPreview,
+                OnCameraFailed = CameraFailed,
+                OnBarcodeAcceptedAsync = HandleBarcodeAcceptedAsync,
+                Strategy = new ScanRectangleBarcodeScanStrategy
+                {
+                    WidthFraction = 0.8f,
+                    HeightFraction = 0.3f
+                }
+            });
+
+            CameraPreview.AddTopToolbarView(new BoxView
+            {
+                Color = Colors.White,
+                HeightRequest = 50,
+                WidthRequest = 200,
+                HorizontalOptions = LayoutOptions.Center
+            });
+            CameraPreview.AddBottomToolbarView(CreateCloseButton());
+        }
+        catch (Exception exception)
+        {
+            Console.WriteLine(exception);
+        }
+    }
+
+    private void CameraFailed(CameraException e)
+    {
+        Console.WriteLine($"Camera failed: {e.Message}");
+    }
+
+    private Task HandleBarcodeAcceptedAsync(BarcodeScanResult barcodeScanResult)
+    {
+        return Task.CompletedTask;
+    }
+
+    protected override void OnAppearing()
+    {
+        _ = Start();
+        base.OnAppearing();
+    }
+
+    private void Close()
+    {
+        m_barcodeScanner.StopAndDispose();
+        Shell.Current.Navigation.PopModalAsync();
+    }
+
+    private void Close(object? sender, EventArgs e) => Close();
+
+    private Button CreateCloseButton()
+    {
+        var button = new Button
+        {
+            Text = "Close",
+            TextColor = Colors.White,
+            BackgroundColor = Colors.Transparent,
+            HorizontalOptions = LayoutOptions.Center
+        };
+        button.Clicked += (_, _) => Close();
+        return button;
+    }
+}

src/app/Playground/VetleSamples/CameraNavBarColorNoNavBarRepro.xaml

@@ -0,0 +1,19 @@
+<?xml
+    version="1.0"
+    encoding="utf-8"?>
+
+<dui:ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                 xmlns:dui="http://dips.com/mobile.ui"
+                 x:Class="Playground.VetleSamples.CameraNavBarColorNoNavBarRepro"
+                 Title="Camera NavBar Color (No NavBar)"
+                 NavigationPage.HasNavigationBar="False"
+                 NavigationPage.BarBackgroundColor="Black"
+                 NavigationPage.BarTextColor="White">
+    <Grid SafeAreaEdges="None">
+        <dui:CameraPreview x:Name="CameraPreview"/>
+        <Image x:Name="CapturedImageView"
+               IsVisible="False"
+               Aspect="AspectFit"/>
+    </Grid>
+</dui:ContentPage>