Fix barcode overlay z-order, support runtime navigation bar color changes, and remove SafeAreaEdges.None from CameraPreview containers#876
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves camera-related UX in the MAUI library by fixing the barcode overlay z-order, ensuring runtime changes to NavigationPage bar colors propagate correctly, and letting MAUI handle safe-area insets for CameraPreview internal containers. It also adds several Playground repro pages for validating the scenarios.
Changes:
- Fixes barcode scan rectangle overlay rendering above toolbars by inserting the overlay at the correct z-order.
- Propagates runtime updates to
NavigationPage.BarBackgroundColorProperty/BarTextColorPropertyfromContentPageto the parentNavigationPage(and refreshes status bar styling). - Removes
SafeAreaEdges.NonefromCameraPreviewinternal toolbar/grid containers so MAUI handles insets; adds multiple Playground repro pages.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/library/DIPS.Mobile.UI/Components/Pages/ContentPage.navigationbar.cs | Adds OnNavigationBarColorPropertyChanged() helper to re-apply nav bar colors and refresh status bar styling. |
| src/library/DIPS.Mobile.UI/Components/Pages/ContentPage.cs | Overrides OnPropertyChanged to detect bar color property changes and trigger nav bar/status bar refresh. |
| src/library/DIPS.Mobile.UI/API/Camera/Preview/CameraPreview.cs | Removes SafeAreaEdges.None from internal grids/containers; minor formatting cleanup. |
| src/library/DIPS.Mobile.UI/API/Camera/BarcodeScanning/BarcodeScanner.cs | Inserts scan-rectangle overlay at index 1 so toolbars render above dim overlay. |
| src/app/Playground/VetleSamples/VetlePage.xaml.cs | Wires up navigation to new repro pages from the Vetle Playground page. |
| src/app/Playground/VetleSamples/VetlePage.xaml | Updates UI to list repro samples as NavigationListItems. |
| src/app/Playground/VetleSamples/CameraNavBarColorRepro.xaml.cs | New repro: demonstrates runtime nav bar color change after capture + retake. |
| src/app/Playground/VetleSamples/CameraNavBarColorRepro.xaml | New repro page markup for nav bar color propagation scenario. |
| src/app/Playground/VetleSamples/CameraNavBarColorNoNavBarRepro.xaml.cs | New repro: same scenario with hidden navigation bar. |
| src/app/Playground/VetleSamples/CameraNavBarColorNoNavBarRepro.xaml | New repro page markup (nav bar hidden). |
| src/app/Playground/VetleSamples/BarcodeOverlayToolbarRepro.xaml.cs | New repro: overlay spanning toolbars scenario. |
| src/app/Playground/VetleSamples/BarcodeOverlayToolbarRepro.xaml | New repro page markup for overlay z-order scenario. |
| src/app/Playground/VetleSamples/BarcodeNoNavBarStatusBarRepro.xaml.cs | New repro: status bar text color not updating when nav bar hidden. |
| src/app/Playground/VetleSamples/BarcodeNoNavBarStatusBarRepro.xaml | New repro page markup (nav bar hidden). |
| src/app/Playground/VetleSamples/BarcodeNoNavBarRepro.xaml.cs | New repro: top toolbar overlaps status bar when nav bar hidden. |
| src/app/Playground/VetleSamples/BarcodeNoNavBarRepro.xaml | New repro page markup (nav bar hidden). |
| CHANGELOG.md | Adds 60.0.2 entry describing the user-facing fixes. |
haavamoa
approved these changes
May 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description of Change
Fix barcode scanner overlay z-order and add runtime navigation bar color updates
This PR addresses multiple camera and navigation bar issues:
1. Barcode scan overlay z-order
The
BarcodeScanRectangleOverlaywas added to the CameraPreview grid after the toolbar containers, causing the dim overlay to render on top of the toolbars. Fixed by inserting the overlay at index 1 (between PreviewView and the toolbar containers).2. Runtime NavigationPage bar color propagation
NavigationPage.BarBackgroundColorPropertyandBarTextColorPropertychanges at runtime (e.g., switching from a black camera navbar to a default color after capture) were not propagated to the NavigationPage. AddedOnPropertyChangedoverride inContentPagethat detects these property changes and callsOnNavigationBarColorPropertyChanged()to update the NavigationPage and refresh the status bar.3. CameraPreview SafeAreaEdges cleanup
Removed explicit
SafeAreaEdges.Nonefrom internal CameraPreview containers (top/bottom toolbar, grid) so MAUI handles insets.Playground repro samples added:
BarcodeOverlayToolbarRepro— overlay spanning toolbarBarcodeNoNavBarRepro— toolbar squished into status bar when nav bar hiddenBarcodeNoNavBarStatusBarRepro— status bar text color when nav bar hiddenCameraNavBarColorRepro— navbar color change after photo capture with retakeCameraNavBarColorNoNavBarRepro— same as above with hidden nav bar