Skip to main content

Classic UI | MAUI Barcode Scanner

Classic UI Components​

Our Classic UI Components allows you to build custom screens which are flexible and fully customizable. It is a set of easy to integrate components (Views, Buttons, Handlers, Controllers, etc.) which can be embedded and extended in your custom screens.

For more details please see the documentation of our native Barcode Scanner SDKs for iOS and Android as well as our example apps.

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

BaseBarcodeScannerView​

The class offers various properties to control its behavior and appearance. Here's a quick overview:

  • OverlayConfiguration: Configures the overlay for the barcode scanner view.
  • IsFlashEnabled: Controls the camera flash state.
  • FinderConfiguration: Customizes the finder's appearance and behavior.
  • CameraZoomRange: Sets the valid camera zoom factors.
  • CameraZoomLevel: Adjusts the camera's zoom level.
  • BarcodeFormats: Defines the barcode formats the scanner will recognize.
  • AcceptedDocumentFormats: Filters which document formats to recognize.
  • MinFocusDistanceLock: Locks the camera's minimum focus distance.
  • CameraModule: Chooses the camera module (e.g., front or back).

For details on each property, please refer to their respective sections below.

OverlayConfiguration​

Click to expand
  • Type: SelectionOverlayConfiguration
  • Description: Configures the overlay for the barcode scanner view. This includes properties like PolygonColor, TextColor, and TextContainerColor. While these are required if the overlay is enabled, other properties are optional and can be tailored as needed.
  • Fields:
    • Enabled: Enables or disables the overlay.
    • AutomaticSelectionEnabled: Enables or disables automatic selection within the overlay.
    • StrokeColor: The color of the overlay's stroke.
    • HighlightedStrokeColor: The color of the overlay's stroke when highlighted.
    • PolygonBackgroundColor: The background color of the polygon.
    • PolygonBackgroundHighlightedColor: The background color of the polygon when highlighted.
    • TextColor: The color of the overlay text.
    • TextContainerColor: The color of the text container.
    • HighlightedTextColor: The color of the text when highlighted.
    • HighlightedTextContainerColor: The color of the text container when highlighted.
    • OverlayTextFormat: Defines the format of the text displayed in the overlay.

FinderConfiguration​

Click to expand
  • Type: FinderConfiguration
  • Description: Allows customization of the finder part of the barcode scanner, including its appearance and how it behaves during scanning operations.
  • Fields:
    • IsFinderEnabled: Specifies whether the finder is enabled.
    • FinderLineWidth: The line width of the finder's border.
    • FinderMinimumPadding: The minimum padding around the finder.
    • FinderLineColor: The color of the finder's line.

BarcodeScannerView​

BarcodeScannerView extends BaseBarcodeScannerView with additional functionality specific to barcode scanning scenarios.

Properties and Event Handlers

  • Properties

    • BackgroundColor: Determines the background color of the scanner view. Defaults to Colors.Transparent.
    • OverlayTextEnabled: A boolean that indicates whether the text overlay is enabled on the scanner. Defaults to true.

  • Event Handlers

    • OnResumeHandler: Invoked in accordance with the view's lifecycle, specifically when the view appears or resumes.
    • OnPauseHandler: Invoked in accordance with the view's lifecycle, specifically when the view disappears or pauses.
    • StartDetectionHandler: Called to initiate barcode detection.
    • StopDetectionHandler: Called to halt barcode detection.
    • OnBarcodeScanResult: An event that fires when a barcode scan is successfully completed, returning the scan result.
    • OnSelectBarcodeResult: An event that fires when a barcode is selected, returning the selection result.

BarcodeScanAndCountView​

BarcodeScanAndCountView extends the BaseBarcodeScannerView to facilitate scenarios requiring both barcode scanning and counting.

Properties and Event Handlers

  • Properties

    • BackgroundColor: Sets the background color of the view. Default is Colors.Transparent.
    • CheckMarkImageByteArray: A byte array for the custom check mark image to be displayed after a successful scan.

  • Event Handlers

    • StartDetectionHandler: Invoked to start the detection of barcodes.
    • StopDetectionHandler: Invoked to stop the detection of barcodes.
    • StartScanAndCountHandler: Begins the process of scanning and counting barcodes.
    • ContinueScanningHandler: Continues the scanning and counting process without resetting the count.
    • OnBarcodeScanResult: Event triggered upon a successful barcode scan.
    • OnScanAndCountFinished: Event triggered when the scan and count process is complete.

Classic components Integration preparation​

Required: Permission validation​

Classic components do not automatically validate camera access permissions. It's up to developers to request and secure these permissions within their applications. Before integrating camera functionalities, ensure that your app has obtained the necessary permissions to provide users with a seamless experience.

For MAUI applications, please see our example on how to request camera permissions to ensure smooth operation:

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Common/Validation.cs
loading...

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

Classic UI Example​

You can utilize the BarcodeScannerView class from xmlns:classicComponent="clr-namespace:ScanbotSDK.MAUI.ClassicComponent;assembly=BarcodeSDK.MAUI" to integrate barcode scanning functionality into your application seamlessly. This component encapsulates the barcode scanning feature within a single UI component.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeClassicComponentPage.xaml
loading...

In the BarcodeClassicComponentPage class, the cameraView component is configured for barcode scanning. The SetupViews() method initializes event handlers to process barcode scan results and configures the visual overlay for barcode detection.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeClassicComponentPage.xaml.cs
loading...

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

Classic ScanAndCount UI Example​

Use the class BarcodeScanAndCountView from xmlns:classicComponent="clr-namespace:ScanbotSDK.MAUI.ClassicComponent;assembly=BarcodeSDK.MAUI" which incapsulates the Barcode Scanning ScanAndCount feature in one UI component. When using the BarcodeScanAndCountView component, it is not required to work directly with the Camera view or to set up a finder view separately.

To start using the barcode feature, add the following view into your xaml:

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeScanAndCountClassicComponentPage.xaml
loading...

The cameraView component in BarcodeScanAndCountClassicComponentPage handles barcode scanning and counting smoothly. It manages scan results, visual settings, and detection control. When the page appears, scanning starts, and it stops when the page disappears. Also, it handles button states for user interaction.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeScanAndCountClassicComponentPage.xaml.cs
loading...

To enhance the configuration of Overlay with manual barcode SelectionOverlay, you can modify the above code by adding additional parameters and settings according to your needs.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeArOverlayClassicComponentPage.xaml.cs
loading...

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

Want to scan longer than one minute?

Generate your free "no-strings-attached" Trial License and properly test the Scanbot SDK.

Get your free Trial License

What do you think of this documentation?

On this page

Scroll to top